Validate optimization using Piez
Image & 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 & 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.
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.
|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 & 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.
Updated over 1 year ago