We load a lot of images on our website. We want to optimize the load time for these images on our website and get them to open quickly for our customers, but the images should not degrade a lot in quality. What are the different approaches available in ImageKit to help with this? Can we optimize images to fix our Lighthouse scores using ImageKit without losing quality?
To optimize images for the web without losing quality, there are a few things you must do. Additionally, we would recommend following a standard score like Lighthouse or PageSpeed report and keep track of all image-related improvements suggested in these reports. These are industry standard reports, and the steps below help fix the issues pointed out in these reports as well.
1. Convert images to modern formats (WebP, AVIF)
Modern formats like WebP and AVIF offer much smaller file sizes compared to JPG and PNG, without compromising quality. Your image will visually look the same, but will be smaller in size.
With ImageKit, you can enable the automatic image format optimization setting from the dashboard or add f-auto to the transformation string and it will automatically serve the best format supported by the browser.
Example: The original file is a 100KB JPEG image, which is automatically converted to WebP (at 66.3KB) or AVIF (at 39.2KB) based on browser support.
https://ik.imagekit.io/ikmedia/docs_images/Community/forest.jpg
This is referred to as “Serve images in next-gen formats” in Lighthouse report.
2. Compress images
ImageKit applies automatic compression during transformation. The nature of compression is lossy i.e. some visual details are lost. But human eye won’t be able to make out this difference when done at the right quality level.
The default quality q-80 that is set in the ImageKit dashboard gives a good balance between visual quality and file size for most cases. You can move between 75 to 90 in the dashboard settings depending on your business requirements. Lighthouse report uses quality at 85 to test whether your images are optimized or not. To change the quality, the URL would look like
Example:
https://ik.imagekit.io/ikmedia/docs_images/Community/forest.jpg?tr=q-70
Reducing file size improves load time and metrics like “Efficiently encode images” in Lighthouse.
3. Resize images to match display size
Avoid serving high resolution images if they’re displayed only as small thumbnails. Use the w and h parameters to resize to the actual size needed.
Example:
https://ik.imagekit.io/ikmedia/docs_images/Community/forest.jpg?tr=w-400
This reduces the download size and improves “Properly size images” in Lighthouse. You can additionally use sharpening with your images as mentioned in this question How to resize image without losing quality - #2 by rahul_nanwani to further improve visual quality.
4. Use responsive images for different screen sizes
Instead of simple resizing to one dimension, if you need the same image to load in different sizes on different devices you can use multiple image sizes using ImageKit’s transformations (e.g. w-400, w-800, w-1200) and use them with srcset in your HTML. This also ensures that on high-density or retina displays, higher resolution images get loaded to maintain a good visual quality level for your images.
Refer to this detailed guide on responsive images.
5. Replace heavy GIFs with MP4 or WebM
GIFs are large and inefficient. They have a limited color palette that has poor visual quality. You should switch to using MP4 videos instead that have a wider color range, better quality and much smaller size. For your existing GIF images, ImageKit allows you to convert GIFs into much smaller MP4 or WebM files using f-mp4 or f-webm.
Example:
https://ik.imagekit.io/ikmedia/docs_images/Community/bird.gif?tr=f-mp4
This helps with “Use video formats for animated content” in Lighthouse.
You can also use lazy loading for the images on the web. While it does not impact visual quality, it helps in improving page load performance that results in better user experience.