Media Performance Optimization for Developers

Media Performance Optimization refers to the process of optimizing the uploads, transformations, and delivery of media files (Images, Videos, etc) across your apps and services.

Media Performance Optimization is necessary for many reasons, especially for your user base:

• Speed on the browser/client
• Great accessibility
• A seamless user experience
• Low data consumption for your users
• High conversion rates for your business or service.

Common Media Performance Bottlenecks

There are a lot of media performance bottlenecks. I'll highlight a few of the common ones found in today's apps & websites.

1. Large Images
2. Inconsistent Image and Video formats
3. Large Video files
4. Inefficient / Non-existent Image & Video Caching
5. Non-existent Media Performance Measurement
6. Inefficient Image & Video delivery technique to users devices.

This list is not news to many of us. So, how can we eliminate these bottlenecks as quickly as possible with the least effort?

Short answer: Cloudinary

Brief Intro to Cloudinary

Cloudinary is a full-stack media management service that provides Image and Video APIs for storing, transforming, optimizing, and delivering all your media assets.

Furthermore, Cloudinary provides a Digital Asset Management solution for non-developers to have full access to powerful UI features for storing, transforming, securing, and optimizing media assets.

From uploading photographers' photos and videos, to tagging and sharing them, performing sophisticated searches to find just the right assets for a particular new design or campaign, and up to the point that final assets are selected and ready to be delivered in your website or app by your developers.

You can sign up for free here.

Media Performance Optimization Tricks & Tips

1. Always Compress Images (Always, no jokes!)

Do everything within your power to not serve original images to your users. Always compress images.

With Cloudinary: you can deliver automatically compressed images with the q_auto parameter programmatically or by direct URL manipulation.

• q_auto invokes Cloudinary’s intelligent quality and encoding algorithm.
• The algorithm identifies the optimal quality-compression level and encoding settings, therefore compressing & encoding the image properly.

Follow the example below:

Uncompressed Image: 2MB

Normal URL: https://res.cloudinary.com/demo/image/upload/eden_group.jpg

Compressed Image: 918KB

URL with q_auto enabled: https://res.cloudinary.com/demo/image/upload/q_auto/eden_group.jpg

Can you spot the difference? I really can't. Yet there is a >50% reduction in size of the compressed image.

2. Deliver Appropriate Image File Formats

Browsers support image file formats differently. So, delivering the best format for the users browser optimizes delivery time and saves bandwidth. Newer formats, such as avif (AOM) and webp (Google), allow high compression limits for high-resolution images, resulting in images with suitable quality and much smaller file sizes, up to 30% less than JPEG and PNG formats.

Note: It is great to serve images in the correct format to the browser to ensure your website receives a high Core web vital score.

With Cloudinary: you can deliver the most appropriate image format automatically with the f_auto parameter programmatically or by direct URL manipulation.

f_auto instructs Cloudinary’s algorithm to automatically select the right format for each browser.

Follow the example below:

Normal URL: https://res.cloudinary.com/unicodeveloper/image/upload/va7trlvvsvhshbhdepto.png

URL with f_auto:
https://res.cloudinary.com/unicodeveloper/image/upload/f_auto/va7trlvvsvhshbhdepto.png

Note: If f_auto is used to deliver an image that contains transparency, and the requesting browser does not support WebP or AVIF, then the image is delivered in PNG format instead of the JPEG format.

The image can be delivered as AVIF, WebP or JPEG-2000 (or animated WebP, if it is an animated image). If a browser does not support any of the optimized formats that f_auto is enabled to return, then the image is delivered in the format specified by the file extension.

3. Resize Images Only From The Server

A commonly dangerous technique is to use CSS to adjust the size of images on the browser or adjust it with code on mobile apps. Please stay away from this approach.

• Users are forced to download unnecessary large images, thus wasting the users data bandwidth.
• Image resizing should be done on upload or delivery to the client.

With Cloudinary: you can resize and crop images server-side via direct URL manipulation before delivering them.

Cloudinary supports using width and height via the w_x, and h_x parameter where x stands for the unit, e.g w_300, h_300 instructs Cloudinary to resize the image to a width of 300 and height of 300 pixels respectively.

Follow the example below:

Normal URL: https://res.cloudinary.com/cdemo/image/upload/_mmm/envelope.jpg

URL with width and height appended: https://res.cloudinary.com/cdemo/image/upload/w_400,h_400/_mmm/envelope.jpg

Normal URL:
https://res.cloudinary.com/unicodeveloper/image/upload/CleanShot_2022-02-10_at_09.02.34_2x_rvvfc2.png

URL with crop mode, width and height appended:
https://res.cloudinary.com/unicodeveloper/image/upload/c_thumb,w_400,h_400/CleanShot_2022-02-10_at_09.02.34_2x_rvvfc2.png

Cloudinary supports many image-cropping modes: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop, and imagga_scale. Leverage them!

4. Use CSS Sprite In Place of Multiple Images

A CSS sprite is worth a hundred images - @unicodeveloper

Instead of the overhead of downloading multiple images to the user’s device, you can generate a css sprite which loads only one image.

For example, look at these two images below. They are a combination of small logos/images:

First Image:

Second Image

Interesting right? Walk with me to know more about Sprites...

• A sprite is a single image that contains a vertical set of images.
• The browser downloads the single sprite image, and the CSS code provides the browser with the coordinates of each image in the sprite.

How to Generate Sprites with Cloudinary

• Upload as many images or logo as possible and attach a tag to all of the ones you want to merge into a sprite. E.g (Name of images): amazon_logo, apple_logo, microsoft_logo and google_logo.
• Assign the tag a name, e.g, sprite_logo
• Now, use the tag name to generate a sprite like so by just calling the name with a .png extension attached to it in the URL.

This last action automatically creates a sprite image and generated css.

Sprite generated URL:
https://res.cloudinary.com/demo/image/sprite/sprite_logo.png

Sprite generated CSS:
https://res.cloudinary.com/demo/image/sprite/sprite_logo.css

You can simply use the CSS above in your app to display the image. Incredibly awesome!

5. Always Convert GIFs to Videos

GIFs are unnecessarily very expensive. Convert them to videos and you'll get a massively reduced and optimized file size.

With Cloudinary: All you need to do is to change the URL extension from .gif to .mp4 via the URL. That's all!

GIF: 10MB
https://res.cloudinary.com/unicodeveloper/image/upload/v1656440067/unnamed_v7xjey.gif

Video: 4.4MB
https://res.cloudinary.com/unicodeveloper/image/upload/v1656440067/unnamed_v7xjey.mp4

Conclusion

As a modern developer, media performance bottlenecks should not be a lingering problem in your project. Your mobile app should crash because of heavy media files, and your web app should not load slowly because of lack of optimization.

For further information, check out this awesome media performance article on how Cloudinary can work for you.