Hi. I just started using the ImageKit product. I have 1000s of images in my own DigitalOcean storage. I want to improve my PageSpeed score. Currently the images I have are unoptimized and very large in size (some of them are over 5MBs). I want to optimize my images so that my PageSpeed score improves. What settings do I enable in ImageKit to do that?
To optimize images for PageSpeed or Lighthouse using ImageKit, here are the key steps you should follow:
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.
With ImageKit, just 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.
2. Compress images
ImageKit applies automatic compression during transformation. This is controlled by the quality setting in the dashboard. For more control, you can also use the q parameter to set quality explicitly.
The default quality q-80 gives a good balance between quality and file size. 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.
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 ensures that each device loads something that is appropriate for its layout. Refer to this detailed guide on responsive images.
5. Enable lazy loading
Use native HTML loading="lazy" or JS libraries like lazysizes to defer loading offscreen images. This reduces initial page load time and improves “Defer offscreen images” Lighthouse score.
Example:
<img src="your-image.jpg" loading="lazy" alt="..." />
We have covered this in a detailed lazy loading images guide.
6. Replace heavy GIFs with MP4 or WebM
GIFs are large and inefficient. 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.
Your images are served via ImageKit’s CDN for faster delivery and better caching.