Validate Image and Video Manager Optimization Using Piez

Use Akamai Piez to review how Akamai Image and Video Manager is optimizing the images and videos on your website.

Image and Video Manager automatically and intelligently optimizes images and videos through a combination of quality, format, and size transformations. Since this activity happens in the background, it can be helpful to gain insight into exactly what is happening with your files. That’s where Piez comes in.

Piez is a Google Chrome extension that reports key optimization details for web pages already using Image and Video Manager. These details include the number of images and videos optimized on a web page, the total bytes saved, and the percentage reduction in bytes. This information alone is often enough to validate that Image and Video Manager is working as it should, but if you want to dig deeper, Piez also provides optimization details for each individual image or video.

Piez also enables you to verify the quality of transformed image or video by providing a side-by-side comparison to the original.

How to

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

  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, click the more icon and select Piez from the menu that appears.

  4. With Piez open, navigate to the web page for which you wish to see the Piez report. If you are already on the correct web page, 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 web page, review the summary information at the top of the report.
    Note that this information pertains to the current web page 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 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

    For more information you can click the Piez icon in the toolbar, select “Image Manager (Advanced)”, and refresh your browser. This report includes the following additional information:

    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
    Tip: Tip: Use the scroll bars or resize the Developer Tools pane to see all columns in the report.
  7. 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.

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

    You will need to refresh your browser to see optimization details for the selected device.

Next steps

For more information about optimizing images and videos, see the Image and Video Manager online documentation.