A guide to image optimization
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.
- 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?|
|Size||1.7 MB||235 kB||7.41x less|
|Request time||1210 ms||191 ms||6.34x faster|
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?|
|Size||1.7 MB||60.6 kB||28.73x less|
|Request time||1210 ms||85 ms||14.24x faster|
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?|
|Size||1.7 MB||522 kB||3.34x less|
|Request time||1210 ms||426 ms||2.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)|
|Size||60.6 kB||206 kB||407 kB|
|Request time||87 ms||190 ms||447 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 image||Image converted to JPEG (fm=jpg)||Image converted to WebP (auto=format)|
|Size||11.79 MB||1.7 MB||1.2 MB|
|Request time||15.72 s||1.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
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=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
Example #6: Lossy and lossless compression
|Original JPG image||Lossy compression to WebP (auto=format)||Lossy compression to WebP (auto=format&q=90)||Lossless compression to WebP (fm=webp&lossless=1)|
|Size||1.7 MB||1.2 MB||1.6 MB||8.8 MB|
|Request time||1.21 s||0.95 s||1.57 s||8.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=crop&crop=focalpoint. Find out more in our Image transformation reference.
Example #7: Art direction
|Original JPG image||Art-directed version (fp-x=0.4&fp-y=0.2&fp-z=2)||What's the difference?|
|Size||111 kB||36.1 kB||3.08x less|
|Request time||68 ms||37 ms||1.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
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.