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.
Delayed loading
You can implement delayed image loading to prioritize the display of essential content before the images load. By deferring the loading of images until after the main content has finished loading, users can promptly access and engage with the primary information on the page.This approach ensures that images are treated as a lower priority, making it suitable when the page’s core content is independent of image assets.However, if visuals play a vital role, we recommend you look at other methods more appropriate for maintaining a seamless user experience.
Lazy loading
Load images only when they are needed. Instead of loading all images at once, only the visible images are initially loaded, with additional images loaded as the user scrolls or interacts with the page.This improves performance by reducing load times and conserving bandwidth. Lazy loading is particularly useful for pages with many images or high-resolution images, ensuring a smoother and faster browsing experience.Overall, lazy loading optimizes image loading based on user needs, resulting in a more efficient and responsive web experience.
Progressive image loading
Load low-quality images first and then seamlessly replace them with high-quality versions once the main content is loaded. This balance between speed and visual appeal can be achieved using the PJPG image format. PJPG files gradually improve image clarity during downloading, allowing for previewing before complete transmission.They have a unique encoding procedure that creates a distinctive visual effect. Initially blurry, PJPG images progressively sharpen, revealing details, while faint horizontal lines fade as the entire image becomes fully visible.You can implement progressive image loading with Kontent.ai’s native image optimization by converting the images to PJPG using fm=pjpg.
What's next?
Apply art direction for a more responsive design
Apart from resizing and optimizing your images to fit smaller dimensions of specific channels, it's also important to ensure your images convey the intended impact by highlighting the most significant visual elements.
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.
