Blog

Validating Image Manager with Piez

How-To: Validating Image Manager with Piez

September 12, 2018 · by Davey Shafik ·

Akamai Image Manager allows you to automatically compress and resize images to ensure that the best image is delivered to every individual device.

This means, for example, that if you’re viewing a site with a 4096x1024 JPEG from Safari on an iPhone X (which has a smaller resolution), you might instead be delivered a smaller version encoded using JPEG 2000 (JP2), or if you’re using Chrome on Desktop, you might get the same size, but in WebP format. This is all done automatically—and transparently—by Image Manager.

Additionally, Image Manager uses its exclusive perceptual-quality algorithm to ensure that you get the best compression possible without compromising on image fidelity. However, because all of this activity happens transparently in the background, it may lead to a question: how do you verify that Image Manager is working?

It’s Time for Piez

Piez (say: pies, like the tasty sweet and/or savory pastry food) is a Google Chrome extension that will, among other things, report on the status of images processed by Image Manager. Please note this reporting will only work on websites that are already using Image Manager.

Install Piez from the Chrome Web Store now

Piez adds a new toolbar item which allows you to change the type of report generated, or to completely disable Piez.

To see a Piez report, open up Chrome Developer Tools (Option/Alt+Cmd+I on macOS, F12 or Ctrl+Shift+I on Windows/Linux, or use the Chrome menu > More Tools > Developer Tools).

For Piez to work correctly, you will need to disable the browser cache by clicking on the “Network” tab, and selecting the “Disable cache” checkbox at the top. Note that this will only disable caching when Developer Tools is open.

Next, click the Piez tab. This will load an empty report, as the Developer Tools must be open when the page is loaded for Piez to generate a report, so you’ll need to visit (or refresh) the page you want to see a report for.

Note: if your page uses lazy loading, the report will be updated in real time as new images are loaded in. This means you may have to scroll the page to see more images in the report.

Reading the Report

Once the report has loaded you’re presented with lots of interesting information, starting with a summary at the top:

top summary

There are four pieces of data here:

  • Optimized Realtime: This is the number of images that did not have an applicable variant already cached for the device, causing real-time optimizations to be performed.
  • Optimized Offline: This is the number of images that had a variant already cached at the Edge. Image Manager will perform extra work offline (in the background) to find the optimal settings for each variant it generates and storing them for later use.
  • Total Saved Bytes: This is the number of bytes saved on the whole page.
  • % Bytes Change: This is the difference in bytes as a percentage.

This information alone would be enough to validate the benefits of Image Manager. However, the report also contains information on every image processed. In addition, it includes sections for non-Image Manager, real-time optimized, and offline-optimized images. Here’s an example of a report showing data about images that were optimized offline:

optmized offline details

By default, Piez shows the “Image Manager (Simple)” report. This report shows you:

  • URL: the full image URL
  • Transformed Image Type: the content type (and therefore the encoding used) for the transformed image
  • Original Size: the file size for the original image
  • Transformed Size: the optimized file size
  • % Bytes Change: the difference in bytes as a percentage

For more information you can change to the “Image Manager (Advanced)” report which additionally includes:

  • Original Width: the original pixel width of the image
  • Pixel Density: the pixel density of the transformed image
  • File Chosen: which variant is chosen for the specific device
  • Encoding Quality: which encoding quality is applied

In the “Optimized Offline Details” screenshot above, you can see that despite the images being JPEG and PNG format originally, they are automatically converted to WebP because we are in Chrome. That results in >80% byte savings.

Note: Image Manager will only deliver an image in a different format if it has compatible features (e.g., transparency, color depth) and if the conversion results in better compression with no additional loss in perceived quality.

Sometimes the original image is already well optimized and there are no byte savings; when this happens, Piez displays the Transformed Size and % Bytes Change in yellow:

byte change yellow

Seeing the Difference (or Not)

The last great feature of the Piez report for Image Manager is the ability to see before-and-after comparisons so you can evaluate the quality yourself.

To do this, click on an image URL in the list, and the Image Comparison section appears:

imagecomp2

Then, by clicking the image, you can toggle between the Transformed and Original images:

imagecomp2

Clicking on the “Transformed Image” or “Original Image” labels that then appear will open that image in a new browser tab for further inspection.

Validating Other Devices

While validation in desktop Chrome is useful, what if you want to verify the behavior on an iPhone? Or with a differently sized display? This too can be accomplished, using the built-in Device Mode feature of Chrome DevTools.

To use this feature, click on the Toggle device toolbar button in the Developer panel:

toolbar

This displays a toolbar at the top of the page and then resizes the page to fit inside a small window. By default the page is shown in “Responsive” mode, allowing you to resize the smaller window to observe how the page flows at different sizes. If you click on the “Responsive” drop-down, you can specify the device being emulated. This changes the User-Agent string sent to the server and causes Akamai Image Manager to identify the client as the device chosen:

responsive dropdown

If you choose, for example, iPhone X, then Image Manager may decide to instead send a JPEG2000 formatted image instead of a WebP. This can occasionally cause some issues: depending on your OS, the image type chosen may not be supported, causing the image to fail to render — but it will still show in the report.

Try It Out for Yourself

Install Piez from the Chrome Web Store now and check it out for yourself using our Image Manager page at developer.akamai.com/image-manager.

You can also watch our recent Image Manager webinar which walks you through a demo of how to use Piez as well as some impressive new features, such as our just-launched video capability (now in beta).

But wait, there’s more!

While Piez is great for reviewing Image Manager, it is also possible to see reports for Akamai’s HTTP/2 Push/Preconnect, Resource Optimizer, and Script Management (part of Akamai’s Adaptive Acceleration solution) by clicking on the Piez toolbar button and choosing the appropriate report type. Why not take some time and explore all of them? We think you’ll like what you find.

Davey Shafik is a developer evangelist at Akamai Technologies.