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:

  1. Install Piez from the Chrome Web Store.
    Piez is added to the Google Chrome toolbar.

    unprocessed imageunprocessed image

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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

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

    A side-by-side comparison appears.

    comparisoncomparison

    Clicking the original or transformed image (or video) opens it in a separate browser tab for closer inspection.

  2. 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.
    unprocessed imageunprocessed image

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


Did this page help you?