This post about image optimization techniques was originally published on ImageKit’s Medium blog here.
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.
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.
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.
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.
You can find a demonstration of the above optimizations on this page — 5 image optimization examples.
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.