How can I make my assets load faster and reduce file size?

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. To make your images load faster, 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 market-leading CDN providers, so the caching and delivery part is solved.

For reducing image size, the following recommendations include the most effective and easy-to-implement Cloudinary features for optimizing image assets for delivery.

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

(For more video tutorials see our video tutorial library, or the Cloudinary Academy site)

1. Scale images to display size

In your website or application, you usually need to display images in specific dimensions, defined by the website or 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 and there are specific modes available if you want to increase the quality or decrease the file size further than the default behavior. More information about these settings can be found in our quality optimization documentation.

With q_auto, expected savings to file size and 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, and Cloudinary's CDNs will detect which formats are supported by the browser and adjust the response format to match. 

On native mobile apps, Cloudinary's native mobile SDKs can choose the response format automatically based on the mobile OS. You can also adjust the file format explicitly based on your own client-side logic by setting the 'format' attribute (or by changing the file extension at the end of the URL, e.g. http://res.cloudinary.com/demo/image/upload/sample.webp), and we have recommendations for which format to use in our Native Mobile Best Practices documentation. 

Note that f_auto cannot be part of a named transformation in most cases, because it needs to be visible in the URL to our CDN layers. If you're using Named Transformations, you can combine that with the automatic format transformation by including both options separately in the URL, for example: '/f_auto,t_my_transformation/'.

With f_auto, expected savings to file size and 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. The 'lossy' flag combined with the 'auto' fetch format (in your URL, this would be 'fl_lossy,f_auto') allows Cloudinary to automatically convert to more efficient formats such as WebP, when possible, depending on the user's browser. The combination of '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 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.

When converting GIFs to WebMs/MP4s, expected savings to file size and 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 Delivery Reports page in your account 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.