How can I make my images load faster?

When your images load faster, your website's / mobile app's user experience is enhanced and metrics such as time on site and conversion rate improve as a result. To make your images load fast, you want their size to be as small as possible, and you want good caching and delivery architecture. When you use Cloudinary to deliver your images, they are served using the market-leading Akamai CDN, so the caching and delivery part is solved. As for reducing image size, the following list includes the most effective and easy-to-implement tips for optimizing your images. 

Below is a quick video that demonstrates how you can easily optimize your images using Cloudinary, followed by a detailed list of optimizations tips - 

(For more video tutorials see here)

1. Scale images to display size

In your website or application, you usually need to display images in specific dimensions, defined by the website's / application's graphic design. Use Cloudinary transformations to resize images to their actual display size, instead of having the client download large images and scale them on the client-side. On Web and mobile Web you can automate resizing by taking advantage of Cloudinary's support for responsive design.

Use one of multiple crop modes to achieve the exact visual result you are looking for when resizing.

2. Adjust image quality

High image quality results in larger file sizes, but you can adjust image quality to noticeably reduce an image's file size while making little to no perceptible difference visually for your users. The best practice is to use our automatic quality setting, q_auto. Quality can also be set to a specific number on a 1-100 scale for fine-tuning, however q_auto is typically enough to intelligently find a balance between file size reduction and visual quality. More information about these settings can be found in our quality optimization documentation.

With q_auto, expected savings to file size and thus bandwidth are between 10%-50%.

3. Automatically deliver optimal file formats based on client detection

While the JPG format is most widely supported, clients often support more advanced and efficient file formats. For example, Google Chrome and Android devices (and even iOS devices when using Google's libwebp) support the Google WebP format.

On a website, including mobile web, simply use f_auto to let Cloudinary automatically select the optimal file format for you (note: requires using Cloudinary's built-in Akamai CDN). 

On native mobile app, set file format explicitly based on client-side logic by setting the 'format' attribute (or by simply changing the file extension at the end of the URL, e.g. http://res.cloudinary.com/demo/image/upload/sample.webp). Note that WebP is supported natively on Android (version 4 and up for lossy, and version 4.2.1 for lossless and transparency). On iOS, WebP can be supported with libwebp. However, since WebP is not a native format on iOS, decoding is not as efficient and there might be a performance toll, especially on older devices.

Note that f_auto cannot be part of a named transformation, as it needs to explicitly exist in the URL. When using named transformation, you can simply add f_auto, for example 't_my_transformation,f_auto'.

With f_auto, expected savings to file size and thus bandwidth are typically about 30%.

4. Convert PNG to JPG

The PNG format supports transparency while JPG doesn't. However, PNG files are also much larger so in cases where transparency is not needed, it makes sense to convert them to JPG.

Cloudinary can automatically detect if a PNG has transparency (alpha channel) and convert it to JPG when no transparency is detected. On Web, use the 'lossy' flag combined with the 'auto' fetch format (in your URL, this would be 'fl_lossy,f_auto') so that Cloudinary will also automatically convert to more efficient formats such as WebP, when possible, depending on the user browser. The combination 'q_auto,f_auto' implies 'fl_lossy' and there is no need to specify it explicitly in that case.

In addition to automatic detection using the 'lossy' flag, it is also possible to force conversion to JPG by setting the 'format' parameter to 'jpg' when using Cloudinary's SDKs), or by simply changing the file extension at the end of the URL.

When converting PNGs to JPGs, expected savings to file size and thus bandwidth can be up to 85%.

5. Convert Animated GIF to WebM/MP4

If your website or application uses short, animated GIF-based video sequences, you can substantially reduce the size of these short video sequences by converting them to WebM/MP4.

Note that videos cannot be auto-played in iOS 9 and earlier. These restrictions have been lifted as of iOS 10 under certain conditions. 

When converting GIFs to WebMs/MP4s, expected savings to file size and thus bandwidth can be up to 95%.

More optimization - Cloudinary reports and actionable optimization tips

Cloudinary actionable optimization tips based on your specific usage patterns. Visit the Reports page in your Media Library to get insights and optimization suggestions.

Quick tips

• Optimize:
• On Web use ‘f_auto,q_auto’ 
• In native mobile apps use ‘f_webp,q_auto’, and on iOS make sure to include Google’s libwebp.
• Scale: Make sure to scale the images to the right size. Use Cloudinary's automatic responsive support on the Web.
• Social networks: Use an optimized image URL in the 'og:image' tag used for social sharing.