Validate optimization using Piez

Image and Video Manager automatically and intelligently optimizes images and videos through a combination of quality, format, and size transformations, but this activity happens in the background. To gain insight into exactly what is happening to your files, use Piez.

Piez is a Google Chrome extension that reports key optimization details for webpages already using Image and Video Manager. These details include the number of images and videos optimized on a webpage, the total bytes saved, and the percentage reduction in bytes.

If you want to delve deeper, Piez also provides optimization details for each individual image or video, and a side-by-side comparison of derivative images to the originals.

How to:

Install Piez from the Chrome Web Store.
Piez is added to the Google Chrome toolbar.
Open Chrome Developer Tools (Chrome menu >More Tools > Developer Tools) and click the Network tab. Select Disable cache.
This is required for Piez to work correctly. Browser caching is disabled only while Developer Tools is open.
To start using Piez, click the Piez tab. If the Piez tab is not visible, use the "more" icon to see more options. Select Piez from the menu that appears.
With Piez open, navigate to the webpage for which you wish to see the Piez report. If you are already on the correct webpage, you will need to refresh your browser.
To learn how many bytes have been saved by the image transformations, video transformations, or in total for the webpage, review the summary information at the top of the report.

Note that this information pertains to the current webpage only, not the entire website.
To see optimization details for individual images and videos, review the "Image Optimization Details" and "Video Optimization Details" sections of the report.

By default, Piez displays the "Image Manager (Simple)" report which includes URL, Transformed Image Type, Original Size, Transformed Size, and % Bytes Change

To see additional information, click the Piez icon in the toolbar, and select "Image Manager (Advanced)", then refresh your browser. This advanced report also includes Original Width, Pixel Density, File Chosen, and Encoding Quality.

👍

Use the scroll bars to see all columns in the report.

Item	Description
URL	The full image URL
Transformed Image Type	The file type (the encoding used) to optimize the image or video
Original Size	The size of the original file
Transformed Size	The size of the optimized file
% Bytes Change	The change in file size expressed as a percentage
Original Width	The original pixel width of the image
Pixel Density	The pixel density of the transformed image
File Chosen	The file variant that was chosen for the specific device
Encoding Quality	The encoding quality that was applied

To compare the quality of an optimized image or video to the original, click its URL.

A side-by-side comparison appears.

Clicking the original or transformed image (or video) opens it in a separate browser tab for closer inspection.
To validate Image and Video Manager behaviour on other devices, use Chrome's built-in Device Mode functionality. Click Toggle device toolbar in the top left corner of the Developer Tools toolbar, then select the device you wish to emulate from the dropdown list that appears.

Refresh your browser to see optimization details for the selected device.