Skip navigation

A guide to image optimization

13 min read
Download PDF

Image optimization turns out to be a much bigger topic now as fast-loading websites and apps become an important part of a positive user experience. Simply put, it's a process of delivering images in the right format and dimensions while keeping the file size to the minimum. All in all, image optimization is something that should be on your radar whether it's to improve your site or app performance.

Table of contents

    Image transformation and asset renditions

    Besides the image transformation options, there's also a thing called asset renditions. Content creators use asset renditions to customize images they insert into their content and you use image transformation to optimize the images. Asset renditions use a subset of the image transformation URL parameters. Combine asset renditions with image transformation to optimize the customized images by adjusting their size, format, or compression.

    When every pixel counts

    There are many benefits to looking into image optimization. For one, having a fast-loading website or an app creates a better user experience and visitors are more likely to stay and interact with it. What's more, search engine indexers might (and probably will) penalize your website if you use unoptimized images. Smaller image file sizes use less bandwidth and thus cost you less. And the list goes on.

    So let's look into a few techniques that you can try to improve your site or app performance by optimizing your images.

    Key points

    • Your number one goal should be reducing image data to only what's necessary.
    • The techniques described here apply image transformation by adding parameters to an image URL. This means you don't need to create multiple versions of one image as you can use just one asset and adjust it as desired.
    • The methods can be applied to your images displayed on a website, mobile app, or any kind of device. Parameters stay the same while the values are adjusted as needed.

    After you go through this guide and get a grip of the most common methods for image optimization, check out our hands-on tutorial on optimizing images for the web where you'll see a more in-depth example.

    Size your images correctly

    This is the most straightforward method to remove unnecessary data from an image. When using image transformation, you have the option to resize your images by using the width (w) and height (h) parameters. When these parameters have a value over 1, the image is resized to new pixel dimensions. This way, the resized image can fit your application or a mobile browser much better.

    Examples used for comparison

    The request time in the examples used here represents the 2nd load of an image, meaning the images are already cached.

    Example #1: Pixel-based resizing

    Below is an image that was resized using the width and height parameters only. The resized dimensions were changed to fit a Tablet device.

    Original image (4000*2525)Resized image (1280*800)What's the difference?
    Size1.7 MB 235 kB7.41x less
    Request time1210 ms 191 ms6.34x faster
    Image resized to fit tablet devices.

    Resized image. Paremeters used: w=1280&h=800

    Pixel-based sizing also works well with the fit parameter and its values (clip, crop, or scale) to help you focus on the most relevant part of the image. If maintaining aspect ratio while resizing images might be a concern, the fit=clip parameter is the way to go. On the other hand, using the fit=crop parameter means cropping the image to just the most meaningful part. This can also come in handy if you want to fit the image into a specific-sized container. Find the details in the API reference.

    Example #2: Cropping

    The sample image was now adjusted to fit the vertically-oriented container, such as for a mobile device, by resizing and cropping the image.

    Original image (4000*2525)Resized image (360*740, fit=crop)What's the difference?
    Size1.7 MB  60.6 kB28.73x less
    Request time1210 ms  85 ms14.24x faster
    Image resized for mobile devices.

    Resized image. Parameters used: w=360&h=740&fit=crop

    Example #3: Percentage-based resizing

    If you have a number of images that you need to scale down by the same amount, for example, to 50% of the original dimensions, it's best to use the percentage-based sizing of the width and height. This means having the parameters set to a value between 0 and 1. For example, setting an image height to h=0.5 will result in an image decreased in its height by 50%.

    Original image (4000*2525)Resized image (2000*1263, h=0.5)What's the difference?
    Size1.7 MB  522 kB3.34x less
    Request time1210 ms  426 ms2.84x faster

    Example #4: Adapting to different screen densities

    There's one more parameter that can prove useful in combination with the width and height of an image – device pixel ratio (dpr). This parameter eliminates the need to maintain multiple copies of the image to support different screen densities, such as for Retina displays (dpr=2 or 3) or Android devices (anywhere from 1.5 to 3.75). The rule of thumb is to develop graphics that are larger than what they would be represented on a standard screen and then scale accordingly.

    Resized image (720*454, dpr=1)Resized image (720*454, dpr=2)Resized image (720*454, dpr=3)
    Size60.6 kB 206 kB407 kB
    Request time87 ms 190 ms447 ms

    For an image on a low-DPR device, setting dpr=1 saves 346 kB over dpr=3, resulting in a 5x faster load speed for that device. At the same time, setting dpr=3 for high-DPR devices ensures that the image is as sharp as possible for those screens.

    Use faster-loading image formats

    Once you have your images resized, it's time to think about serving them in the right format. The file format you choose for your images should be carefully picked depending on how and where you plan to use it. For example, if you need to preserve fine detail with a high resolution, you'd use PNG. But for any other regular images, JPG is a better choice because of its smaller size and thus faster loading time.

    Once you determine the best format for your use case, you can use the format (fm) parameter to convert your image to a different format. 

    One thing to keep in mind is that the conversion for lossy formats, such as jpg, pjpg, and webp (which can also be lossless) can be controlled by using the quality (q) parameter. You can set this parameter anywhere from 0 to 100 with lower values resulting in more compressed images. This method can save you a big chunk of the image size if lossy image compression is acceptable for your site or an app.

    Example #5: 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 WebP (auto=format)
    Size11.79 MB1.7 MB 1.2 MB
    Request time15.72 s1.21 s 0.95 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 having to compromise on 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 it.

    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 app or web won't appear broken where WebP isn't yet fully supported, such as Safari browsers, it's good to have a fallback strategy in place. For example, by combining the auto parameter with the fm one: fm=png&auto=format. If the WebP format isn't supported, the image will be converted to PNG instead. Check out the details in our Image transformation reference.

    Also, if a lossy compression as described above with the quality 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 a lossless parameter like so: fm=webp&lossless=1. Although it's worth mentioning that 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.

    Example #6: Lossy and lossless compression

    Original JPG imageLossy compression to WebP (auto=format)Lossy compression to WebP (auto=format&q=90)Lossless compression to WebP (fm=webp&lossless=1)
    Size1.7 MB1.2 MB1.6 MB8.8 MB
    Request time1.21 s0.95 s1.57 s8.98 s

    Art direction for a more responsive design

    Resizing and compressing the images is only part of what makes the image responsive. Especially on smaller devices, the details and the focus of an image can easily get lost if you only stick to making the image smaller.

    To keep the focal point in frame, you need to art direct the image. This is especially useful when the image is the main draw into your content. Use the focal point crop for specifying the area of interest. It consists of the horizontal (fp-x), vertical (fp-y), and zoom (fp-z) parameters. It's important to note that focal point crop must always be used together with the fit and crop parameters: fit=crop&crop=focalpoint. Find out more in our Image transformation reference.

    Art direction using the Image transformation API.

    Art direction using focal point crop. Parameters used: fit=crop&crop=focalpoint&fp-x=0.4&fp-y=0.2&fp-z=2

    Example #7: Art direction

    Original JPG imageArt-directed version (fp-x=0.4&fp-y=0.2&fp-z=2)What's the difference?
    Size111 kB36.1 kB3.08x less
    Request time68 ms37 ms1.84x faster

    To maintain the visual interest of your visitors, especially the ones using mobile devices, it's best to also zoom in on the focal point by using the fp-z parameter. 

    Why lazy-loading is not that lazy

    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 but the 3 most common ones are: 

      • Delayed loading – stop images from loading until after the main content has finished loading.
      • Lazy loading – loads images when and as they are needed. The content is being loaded as the user scrolls.
      • Progressive image loading – you first load low-quality images and then replace them with high-quality ones after primary content has finished loading. This way balances performance with visual appeal. 

    Getting deeper into the ins and outs of these methods is out of the scope of this article. However, it's definitely worth spending your time for getting the most of your site or app performance as well as delivering the best user experience.

    What's next?