Image optimization techniques and tools for web and mobile apps

Image optimization

According to the data from HTTP Archive, images make up nearly 64% of an average web page in terms of load size. Being such a critical component of e-commerce, news, fashion, blogs and travel portals, it is important to know how to optimize these images. Using optimized images will help us deliver an engaging yet fast visual experience without hogging on those extra kilobytes of data.

Here are some important image optimization techniques that should be kept in mind when using images on a website or mobile app.

1. Use correct image dimensions

You should always use an image that is sized exactly or at least close to the size that has to be finally rendered. Using an image that is larger than what is required is by far the most common and the most taxing mistake that can be seen on websites and mobile apps.

correct image format to use:

• If your image requires animation, use a GIF.
• If you don't need to preserve high image resolution, use JPEG (and test out different compression settings).
• If you do need to preserve high image resolution, use PNG.
  • If your image has a lot of colors, use PNG-24.
  • If your image doesn't have a lot of colors, use PNG-8.

Learn more about choosing image formats in Google's image optimization guide.

Consider a case where the final image that has to be rendered is 200px wide and 300px high. Ideally you should load an image that fits exactly in this container i.e. 200 px by 300px. If you were to load an image that is 800px by 1200px in this case and let the browser or app resize it for you, then you are loading about 10–15 times the data than what is actually required.

compression tools like Optimizilla or ImageOptim for Mac (or Windows alternatives), as well as evaluating what works best is the way to go.

This is more important for e-commerce applications where a lots of product thumbnails are shown on a page. Sizing the thumbnails right can reduce the page load size significantly.

2. Use the correct image format

As discussed in one of our previous posts, there are a lot of image formats out there with JPEG, PNG and GIF being the most common ones. There is a relatively new image format - WebP. It tries to encapsulate the good things from each of the previous three formats into a single image format while providing better compression ratio.

A common mistake is the use of PNG images for natural scenes and photographs. In such cases, a JPEG or a WebP image would be a lot lighter than the PNG image and yet look exactly the same. Using the correct format can have a great impact on reducing the bandwidth consumption by images.3. Compress your images

Even after selecting the correct image dimension and format, it is possible to further reduce the size of the image via compression.

One method of compression is by removing all the unnecessary metadata associated with the image without changing the image quality. This metadata can be safely discarded while displaying the image. This method is called lossless compression and is a must before using images on a website or an app.

The other method, lossy compression that reduces the quality of the image to get a lower size. However, the human eye cannot distinguish between the original uncompressed image and an image at a slightly reduced quality. Hence, on a scale of 100, it is often safe to reduce the image quality to 80–90. Doing so often brings down the size of the image to 20–25% of the original.

4. Use progressive JPEG

This optimization is tuned towards increasing perceived performance on the page and may come with a slightly higher bandwidth consumption.

One way to render a JPEG image is to start from top, rendering each row at a time and moving towards the bottom. This is called baseline loading pattern and doesn't go well with the users who have to wait to get a glimpse at the entire image.

The other way is to render a low-quality pixelated full image and then gradually keep on adding more pixels and information to the image. This kind of loading is called progressive loading and is available for JPEG images.

Using progressive JPEGs on your website and app will have a significant improvement in terms of user experience. The user gets visual feedback quicker as compared to the top-down loading method.

5. Optimize image delivery

Even after following the above steps and optimizing your images, there is one more thing to do. Delivering the image. After all, an optimized image is no good if it cannot be delivered quickly.

Ensure that your image servers can handle potentially 3–4x of your regular traffic to account for traffic spikes. Always deliver images with proper caching headers so that the user's device can use cached versions of images. This saves the client's device from downloading the entire image content if it is not modified as compared to the copy saved with the client's device. You can even consider setting up a caching layer on your server side to serve static content like images directly from the cache instead of going to your application servers.

If your traffic is global or if your image servers are located far away from your actual users, consider using a Content Delivery Network (CDN). In simple terms, a CDN is a global network of servers that can deliver images (or other static content) from a server closest to the geographical location of your user. Closer the server, faster the response time.

ImageKit.io is a ready-to-use image optimization and transformation server along with a global CDN network and storage. It is built to automatically optimize the image format and quality and provides powerful URL-based transformations to deliver the perfect image as quickly as possible to your users.

Alt text

Alt text (alternative text) important to have alt text descriptions so that any visually impaired person can understand what the pictures on your website depict. Search engine bots also crawl alt text to better understand your images,

Bad:

Good:

Submit an image sitemap

Google can crawl and index your images, submit an image sitemap in your Google Search Console account. This helps Google discover images they may have otherwise missed.