Optimize your images for the web
Optimizing image size is essential, but it's just one piece of the puzzle. After successfully resizing your images, it becomes crucial to serve them in the most suitable format. The choice of the correct image format significantly contributes to ensuring optimal image optimization.
Use faster-loading image formats
When deciding on the file format for your images, consider their intended usage and your specific requirements. For example, if your priority is preserving intricate details at high resolutions, you’d use PNG images. However, JPG is the superior choice for regular images due to its smaller file size, leading to faster loading times. Once you’ve determined the most suitable format for your use case, you can use the format (fm
) parameter to convert your image to a different format.
Example: Format conversion
Let’s see how much bandwidth you can save by converting your image to the right format for your use case.Original PNG image | Image converted to JPEG (fm=jpg ) | Image converted to lossy WebP (auto=format ) | |
Size | 15.3 MB | 1.3 MB | 1.2 MB |
Request time | 1.2 s | 0.7 s | 0.65 s |
Compress images to WebP
Using the next-gen file format known as WebP comes with a lot of perks – images in this format are smaller without compromising the resulting image quality. You can take advantage of theauto
parameter that automatically delivers the image in a WebP format to the browsers that support WebP.
auto
parameter with the fm
parameter: fm=png&auto=format
. This combination converts the image to PNG if the WebP format isn’t supported.
Lossy or lossless compression?
If a lossy compression with the quality (q
) parameter degrades the image a bit too much for you, you can always opt for a lossless compression by converting your images to WebP format and adding the lossless
parameter like so: fm=webp&lossless=1
.
Lossy compression is a better option when trying to reduce the file size, even if the quality parameter is set as high as q=90
.
Original JPG image | Lossy compression to WebP (auto=format ) | Lossy compression to WebP (auto=format&q=90 ) | Lossless compression to WebP (fm=webp&lossless=1 ) | |
Size | 0.95 MB | 0.65 MB | 1.1 MB | 8.2 MB |
Request time | 0.99 s | 2.11 s | 1.59 s | 9.43 s |
Beyond image optimization
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!