A guide to image optimization

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.

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.

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.

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.

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%.

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.

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.

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.

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

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.

Example #7: Art direction

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.