Image optimization techniques & examples for websites and mobile websites

1. Resize images (saves 50% image bandwidth)

Resizing is the most important image optimization. A large image takes up more bandwidth to load as compared to a smaller image. So, if you can use a smaller image at a particular place on your website, then use that instead of a larger image. Consider these images for an example. The smaller image is 1/5th the size of the original image and can be used wherever you need product thumbnails.

Full-size image

600px by 600px; Size - 99.8KB View Image

Resized image

200px by 200px; Size - 20.7KB View Image

2. Compress images (saves 40% image bandwidth)

With the improvements in camera quality and resolution, images have become huge in terms of size. But, in almost all the cases, you wouldn't need such a heavy, high quality image on your website. You can safely compress an image to a lower quality level because human eyes cannot perceive a lot of subtle differences in an image. Combine compression and resizing and you will get the best possible results for your images.

Original image

1920px by 1080px; Size - 517KB View Image

Compressed image

1920px by 1080px; Size - 377KB View Image

Compressed & Resized image

800px by 450px; Size - 70.3KB View Image

3. Choose correct file format (saves 30% image bandwidth)

As explained in this post choosing the appropriate file format can have a lot of positive impact on reducing the image size. JPEG images work best for photograph-like images whereas PNGs work best for logos, textual banners etc. WebP is a new format that has the best of all image formats but relatively poor cross-browser support.

JPG image

600px by 600px; Size - 99.8KB View Image

PNG image

600px by 600px; Size - 217KB View Image

WebP image (Check browser support)

600px by 600px; Size - 56.2KB View Image

4. Lazy loading of images

Even if you have to show 100 product images on one page, you need not start loading all the 100 images at the very beginning. Because the user can see, let's say, only 20 images at a time on his screen. Thus, the remaining 80 images can be loaded later. May be once the user scrolls down on the page, and when these images (or their containers) start appearing on the user's screen, you can load the next set of images.

This can be implemented by writing some Javascript or using a plugin JS library like LazyLoad

An example of lazy loading of images from Saif Sulaiman

5. Optimize image delivery

Your image servers or storage will be located in one particular city. Whereas your users are located in a lot of different cities. Use a Content Delivery Network to deliver your images. It will not only make image delivery faster across the globe but, also reduce the load on your image server.