Why is image optimization important?

There are a few different image formats that you can choose from to display it on your website. But it is not all the same even if it may look so to the naked eye. Images are the largest files that are displayed on your website. So it is important to keep those image sizes as low as possible.

You can significally improve your webpage’s loading time with optimizing the size of your images. So here are some tips on how can you make your website better and more friendly for people who have low bandwidth, to whom, your page could possibly load agonizingly long and ruin their user experience on top of that. It is also better for search engine optimization aswell.

I used an image optimizing tool online called Kraken.io, which is perfect for those who don’t want to get to technical about this stuff. It does a great job at optimizing rester images.

Swap images that contain text

You should definitely use webfonts to display text, because if you put an image with a ton of text, that text is not searchable, selectable and it is invisible to web crawlers. So using webfonts to display text istead of showing it in an image, will not only improve the user experience your audience is having but it will also benefit you with ranking your page on search engines.

Another thing that is also very useful is, using CSS to create resolution independent content styles. This will give you scalable elements that will still look as sharp and clean on devices with larger resolutions, as they would on smaller.

Two types of images that you should know about

There are vector and rester images and they both have its own pros and cons.

Vector images are used for simple shapes, that are in logos or smaller images. The main thing about vector images is that they are resolution and scale independent. Image is comprised with lines and shapes that will scale and at the same time won’t lose quality. These images are actually XML files that are rendered in the browser when the page is loaded on your computer.

Rester images are those images that most of us are use to seeing. These images do not scale with resolution, but are better for displaying photos and more complex pictures than an SVG (Scalable Vector Graphics) file could. These images are usually *.png or *.jpg format.

Let’s make image size as small as possible

There is a particular format that I would like to focus on. It’s called WebP format and it displays beautiful images that are the most optimal image sizes. This format allows you to have up to 30% lower image size than you would have with a JPEG file, without the need to sacrifice its quality.

How do image sizes work?

The size of an image depends on resolution that your image has and on how your pixels are rendered. Rester images are actually just a 2-dimensional grid of pixels. Each pixel stores 4 values, RGBA, which stand for red, green, blue and alpha (opacity) channels, which have 256 shades each.

For example an image with resolution 100×100 is made out of 10,000 pixels, each pixel holds 4 bytes of information, so an image like that would be (40,000/1024) 39kb large.

You have to keep in mind that when you display images on your website, that are not displayed in their natural size, you are potentially wasting your loading time for no reason.

Let me show you in an example:

Image size 110×110 pixels is displayed on a website with 100×100 pixels in size.

Let’s calculate the number of unnecessary pixels that are loaded with the page:

110 x 110 – 100 x 100 = 2100 pixels

Now this might not seem a whole lot, but if we take a look with a larger image:

We have an image with natural size 1620×1620 and it is displayed witha size of 800×800 pixels.

1620 x 1620 – (2 x 800) x (2 x 800) = 64400 unnecessary pixels

64400 x 4 = 257600 bytes or 257kb absolutely wasted

As you can see, it is very important to keep an eye on the sizes of your images, especially larger images, where you can see a substantial difference in loading time.