Image optimization involves delivering images with the smallest possible file size while maintaining visual quality. Optimizing images means saving bytes and improving performance for your website: the fewer bytes per image, the faster the browser can download and render the content on your users’ screens. Research shows that this speed is directly related to visitor satisfaction and even monetary conversions.
- Half of web users expect a website to load within two seconds.
- A 1-second delay in page load time can decrease visitor satisfaction by 16% and can also lead to a drop in conversion of 7% or more.
- Load time is a major contributing factor to page abandonment, and the abandonment increases as a percentage with every second of load time, with nearly 40% of users abandoning a page after 3 seconds.
- 73% of mobile internet users report that they’ve experienced problems with page load times on their devices.
These statistics are from 2009 and 2010, and it’s reasonable to assume that visitors’ expectations have only increased over time.
Most of the time, it is images, and in some cases videos, that have the most impact on slow load time.
Cloudinary’s built-in fast CDN delivery helps to get all resources to your users quickly. Additionally, Cloudinary automatically performs certain optimizations on all transformed images by default. But beyond this, Cloudinary also provides many features that enable you to further optimize images to fit your needs.
This section provides an overview of considerations that can impact image optimization and covers the various Cloudinary optimization features and options you can use to make sure your images are delivered to your users in the quickest and best way possible.
You are also invited to watch the Optimization Tips video tutorial to see a demonstration of a few of the guidelines that are presented on this page.
Optimizing an image involves delivering images in the format, dimensions, resolution, and quality that will yield the smallest possible file size while ensuring that the resulting image is appropriate for the specific content, the overall page design, the requesting device, and the expectations of your site visitors.
The following table summarizes the main elements that impact image file size and potential solutions for addressing those issues. However, in many cases, implementing the solutions on your own can be very time or labor intensive. Click the link on each issue to learn how to use Cloudinary functionality to implement these solutions with minimal or no coding.
|Image quality||Often photographs are delivered at their original extra-high resolution, for fear of losing too much visual quality or to make sure users with high-res (retina display and DPR 2+) devices will get the quality they expect. The result is a huge file and slow delivery speeds.||In most cases, you can significantly lower quality without a significant visual impact. Consider your image purpose and audience, and use the lowest possible quality that is acceptable for the image content, audience, and purpose. When it’s important to deliver top-quality images for high-res devices, use the
|Image metadata||By default, images contain a lot of metadata stored by cameras and graphics applications, but this data is completely unnecessary in delivered images.||As a best practice, keep the metadata in your original copy of the graphics, but remove it in delivered images.|
|Image sizing and resizing||If you need to display an image at a size smaller than the original, and you rely on the browser to resize images, then you are delivering unnecessarily large files. This applies both to a standard image resize, and responsive design, which requires multiple different images sizes.||The required dimensions can be determined on the server-side (before it is delivered to the browser). For responsive design, use the
Whenever you apply any transformation to an image, Cloudinary performs the following optimizations by default:
Strips all associated metadata from the transformed image file, except the following:
To override this behavior and deliver a transformed image with its metadata intact, add the keep_iptc flag.
Applies an automatic quality adjustment to generated WebP, GIF, JPEG, and JPEG-XR formats. To override the default adjustments, set the quality parameter in your transformation.
Runs optimization algorithms to minimize the file size without impairing the visual quality when generating images in the PNG, JPEG or GIF format.
Adjusting the quality of your images to a level that still provides good visual output, is one of the most powerful tools in image optimization. You can often deliver images at less than half of the original file size with little to no visually noticeable difference.
As mentioned above, when you deliver an image with any transformation applied, it also uses a default quality setting. Depending on the content, purpose, and audience for the majority of your images, you may want to modify the
default image quality level in the Upload Settings for your account.
You can choose a fixed quality level, or use one of the q_auto options as the default.
When you want image transformations to use a quality setting that is different to the default set for your account, or if you are not performing any other transformations on your image, specify the quality level as a transformation using the
For example, the
q_60 parameter below decreases the delivered file size from 118 KB to 73 KB:
For details, see Adjusting image quality.
When you add the
q_auto in URLs) parameter to your delivered image, Cloudinary's intelligent quality and encoding algorithm selects the optimal quality compression level and optimal encoding settings based on the specific image content, format, and the viewing browser, in order to produce an image with good visual quality while minimizing the file size. This setting can significantly reduce the file size without any degradation noticeable to the human eye, and without the need for you to individually analyze every image.
For example, the
q_auto parameter below decreases the delivered file size from 569 KB to 45.1 KB, more than a 90% decrease:
You can further influence the aggressiveness of the algorithm, to get even smaller file sizes, or to ensure higher than average quality, with
q_auto:low in the example below, the delivered file size decreases from 569 KB to 33.6 KB, and yet the delivered image, while not perfect, is still quite clean:
You can also use
q_auto together with
f_auto (described below) to add additional quality considerations to the format selection algorithm.
q_autosetting. This can be useful to control the quality of an important image if you apply a
q_autodefault setting for your account, or if all images delivered through a particular process are delivered with a transformation that includes
q_auto. Cloudinary also uses your overrides as input that can help it improve the
- For more details, see automatic quality and encoding settings.
- For a hands on demo of how quality impacts file size, and to see the difference between regular quality settings and
q_auto, see The holy grail of image optimization OR balancing visual quality and file size
Image formats can be lossy or lossless, each with its own compression algorithm. And as mentioned, each type gives better results on some types of image content, and poorer results on other types. Furthermore, some of the newer formats are only supported on some browsers. See Image format support and usage.
Choosing the right format to deliver each image can result in significant file size savings without sacrificing quality.
There are several Cloudinary options you can use to address these issues.
- Even if your users upload images in a format that isn’t ideal for the content, you can easily deliver in them a different type, just by changing the file type extension in the delivery URL.
- Use the
f_auto) parameter to allow Cloudinary to analyze the image content and select the best format to deliver. For example, it can automatically deliver images as WebP to Chrome browsers or JPEG-XR to Internet Explorer browsers, while delivering in the original format to all other browsers. This option also delivers animated GIFs as WebP on Chrome, Android and Opera.
- If you use both
q_auto, then Cloudinary will still generally deliver WebP and JPEG-XR to the relevant browsers, but might deliver selected images as PNG-8 or PNG-24 if the quality algorithm determines that as optimal.
- For browsers that do not support WebP, you can also deliver animated GIFs as lossy GIFs, for significant file size savings while maintaining acceptable quality.
This lossy animated GIF is only 2.5 MB, compared to the 6.3 MB original:
Another way to lower the cost of animated graphics is to deliver animated GIFs as videos. You can do this by simply changing the file type extension to
webm for Chrome, Android, and Opera) in the delivery URL.
For example, this
mp4 is 95% smaller than the original animated GIF (319 KB instead of 6.3 MB):
Web site art-design generally requires displaying images at a variety of sizes, often much smaller than the original.
If you deliver full size images and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to unnecessarily download large images. Therefore, images should always be delivered from the server at their final size.
When you use any of the Cloudinary resizing transformations, the sizing (scaling/cropping) is performed on the server-side, and the image is always delivered to the browser at the requested size.
For details on resizing transformations, see Resizing and cropping images.
In general, the time for resizing an image on-the-fly (the first time it is delivered via the CDN) is negligible, but if you are resizing a very large image or video, and every millisecond counts even for those first users, consider doing an eager or explicit transformation to pre-generate the transformed image.
The importance of server-side resizing becomes that much more important if your Web site is responsive and needs to select an image size based on the current size of your browser or the resolution of your device.
By taking advantage of Cloudinary’s
w_auto, and other responsive image functionalities, you can ensure that you are delivering large or high-resolution images only to those users whose device resolution or browser size requires it, and you can create the many different sized images required, using simple transformations.
For example, to deliver the
sample image cropped to an aspect ratio of 4:3 using the fill crop method, and then automatically scaled to the width available for the image in the responsive layout, and with a DPR value suitable for the user's device, use a statement like this:
The above example will yield a 318 KB file on a DPR 2.0 device and 115 KB on a DPR 1.0 device.
For more details, on Cloudinary’s responsive design functionality, see Responsive images.
A sprite is a single image that is comprised of many smaller images. The web page is modified to download only a single image from the server and the page’s HTML uses alternative CSS class names to point to the small images within the larger image.
This minimizes the number of images to download and thus the number of server communications required, resulting in faster image delivery.
You can quickly create a single sprite image and the corresponding CSS file comprising all images with a particular tag.
After ensuring all relevant images are sized and tagged as needed, reference the URLs:
For more details, see Sprite Generation.
Even after employing as many automated optimization solutions as possible, you may find that specific original or derived images are still especially big bandwidth eaters.
Take a look at the Reports section of the Cloudinary console. There’s always a personalized tip at the top of the page based on your account’s usage. Then check out the Top bandwidth images or resources and the corresponding Top derived images and resources. Consider employing file-specific optimizations on these resources.
Scroll down to the Top Browsers to get an idea of how important each browser is to your users. This can give you insights on the relative value of using newer formats that are only supported on some browsers.
|Format||Browser support||Use for:|
|JPG||Universal||Photos, images with many gradients. No transparency needed.|
|PNG-8||Universal||Small color palette with solid colors and stark contrasts or if full transparency is required.|
|PNG-24||Universal||> 256 solid colors and stark contrasts, or if partial (soft alpha) transparency is required.|
|GIF||Universal||Animated, with or without transparency.|
|WebP||Chrome, Opera, Firefox, Edge,
|Supports transparency and animation with better compression than standard formats. Good alternative for users of the relevant browsers.|
|JPEG-XR||Internet Explorer||Supports transparency and animation with better compression than standard formats. Good alternative for users of the relevant browsers.|
|FLIF||Currently only with Polyfill solution||Lossless format, supports full and partial transparency and, according to its creators, outperforms all the above formats in terms of compression ratio. Currently only works in browsers using a polyfill solution, but it’s a format worth following: FLIF Details.|
- The holy grail of image optimization OR balancing visual quality and file size
- Top 10 mistakes in handling website images and how to solve them
- How to analyze your website's images, improve loading speed and reduce bandwidth costs
- Automatic WebP format CDN delivery based on visitors browsers
- JPEG-XR conversion with auto browser detection, optimize images for IE users
- Reduce size of animated GIFs, automatically convert to WebM and MP4
- Animated WebP - how to convert animated GIF to WebP and save up to 90% bandwidth
- PNG optimization - saving bandwidth on transparent PNGs with dynamic underlay
- How to support WebP images, save bandwidth and improve user experience
- FLIF, the new lossless image format that outperforms PNG, WebP and BPG
- Lossy compression for optimizing animated GIFs
- JPEGmini image optimization documentation and the Optimize your JPEG images without compromising quality with JPEGmini and Cloudinary article