Kontent.ai
Copyright © 2023 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create

Optimize your images for the web

Is this page helpful?
Complete and continue
  • Sign in
  • Jake Kula
    5 minutes
    Image transformation (API)
    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 imageImage converted to JPEG (fm=jpg)Image converted to lossy WebP (auto=format)
    Size15.3 MB1.3 MB 1.2 MB
    Request time1.2 s0.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 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.

    Original JPG imageLossy compression to WebP (auto=format)Lossy compression to WebP (auto=format&q=90)Lossless compression to WebP (fm=webp&lossless=1)
    Size0.95 MB0.65 MB1.1 MB8.2 MB
    Request time0.99 s2.11 s1.59 s9.43 s
    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.
    • Develop with Kontent.ai
    • Hello World
    • Hello Web Spotlight
    • Run a sample app
    • Build apps
    • Decide navigation and URLs
    • Environments
    • Get Developer Certification
    • Optimize images
    • Optimize performance
    • Optimize SEO
    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.
    • Optimize every image
    • Resize your images
    • Optimize for the web
    • Customize and art direct
    • Display customized images
  • Use faster-loading image formats
  • Compress images to WebP
  • Lossy or lossless compression?
  • Beyond image optimization