Media Inspector browser extension (Beta)

The Cloudinary Media Inspector is a browser extension that analyzes all media assets on your site and shows you in-depth information about each asset, including file size, status, Cloudinary transformations, and more. Use the Media Inspector to debug your Cloudinary media on your website or application and to help you enhance the performance and appearance of your media assets.

To get started:

1. Add the extension from the Chrome Web Store.
2. Pin the Media Inspector icon to your browser extension toolbar.

You can launch the Media Inspector for a single media file or for all media on a page.

Inspect all media on a page

To see a list of all media assets on the page and information about each asset:

1. Click the Cloudinary Media Inspector button in the extensions section of Chrome, located in the top right corner (if you pinned it to the toolbar). The icon for the Media Inspector is the blue Cloudinary logo.
   
   
2. The Media Overview page opens, showing all media on the page. From here, you can filter results based on search expressions and drill down into specific files.
   
   
   Media Inspector: view all media

At the bottom of the screen, you can view stats for the minimum, maximum, average, and total number of delivered bytes for the assets presented. The 1xx, 2xx, etc. refer to HTTP status codes.

To see details of a specific asset, click View in the Details column. This opens the same details as described in Inspect a single media file.

Filter results

Enter search expressions in the fields at the top of the columns to filter the media on the page.

For example, to see which images aren't delivered with automatic format and quality optimizations, enter !f_auto AND !q_auto in the URL search field and Image in the Content Type field:

Or, to see which assets are over 500 KB, enter >500000 in the Size field.

The information at the bottom of the screen updates based on your filtered results. For example, in the above screen capture, 10 assets are over 500 KB, and they're all videos.

Sort results

Sort the results by clicking a column name. For example, to order the results by size, click the Size heading.

Inspect elements

To inspect the elements in the page that deliver a specific asset, click the number in the Number of elements (#) column for that asset:

Understand scaling

The Scale Ratio field indicates whether your images and videos are being upscaled, downscaled, or displayed with modified aspect ratios.

The presented value is:

<width ratio>:<height ratio>

where:

• width ratio = served width / display width
• height ratio = served height / display height

Scale ratio considerations:

• Width and height ratios greater than one indicate assets with dimensions larger than required for display. Consider resizing these assets in the delivery URL.
• Width and height ratios less than one indicate that assets are being upscaled, which may cause quality issues.
• If the width ratio and height ratio are different, the displayed image may appear squashed or stretched because the display aspect ratio differs from the source aspect ratio.

Inspect a single media file

To see information about a single media file:

1. Right-click the media file in your browser.
2. Click Media Inspector to open the Media Details view.

The Media Details view displays a summary of the media file as well as four tabs with more detailed information about the media.

Summary tab

The Summary tab displays general information about the image or video, including file type, size, dimensions, and the colors detected in the media file.

In the Original vs Derived section you can see how the served image differs from the original image stored in Cloudinary, highlighting the optimizations.

Transformation tab

The Transformation tab displays a breakdown of all individual Cloudinary transformations applied to the media file:

From here, you can also launch the Transformation Debugger to debug the transformation components by adding or removing them one by one:

Request and Response headers tabs

The Request headers and Response headers tabs display the HTTP request and response headers that were sent when viewing the media file.

Performance tab

The Performance tab displays performance metrics for the image or video, including the time it took for the various stages of loading the media asset.