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.
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 the auto parameter that automatically delivers the image in a WebP format to the browsers that support WebP.To make sure your websites and apps appear correct if WebP isn’t yet fully supported by the end users, such as with Safari browsers, it’s good to have a fallback strategy in place.For example, by combining the 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.
You can see that the first request times might be longer for the converted images. However, every subsequent request is cached in the CDN and served immediately.
Beyond image optimization
Further to image optimization, the way your application loads the images also plays a large part in the overall end-user experience.On top of optimizing your images to reduce the bandwidth and allow for them to load faster, you might also want to look into different web design methods of displaying images on your web or an app. There are many methods you can try. Let’s check the three most common ones.
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!
Control image quality of lossy formatsWith loss formats like JPG, PJPG, and WebP (which can also be lossless), you can use the quality (q) parameter to control the quality of your images. Its value ranges between 0 and 100, with lower values resulting in more compressed images.By adjusting image quality, you significantly reduce image size. Just make sure that the lossy image compression is acceptable for your use cases.
Native Android and iOS support
Lossy WebP images are supported in Android 4.0 (API level 14) and higher, and lossless WebP images are supported in Android 4.3 (API level 18) and higher. Find more details in Android Studio.
There is no native iOS support yet, but you can try using a 3rd party WebP plugin as a workaround.
.
To make sure your websites and apps appear correct if WebP isn’t yet fully supported by the end users, such as with Safari browsers, it’s good to have a fallback strategy in place.
For example, by combining the 
