Jetpack Boost: Image Performance Guide

The image performance guide is a tool that can help you ensure that the images used on your site’s pages and posts are the right size.

Using the Image Performance Guide

1. On your WP Admin dashboard, navigate to Jetpack → Boost, scroll down the page and toggle the Image Guide feature.

2. Check the images on your site. While logged in, visit your site, and you will see a bubble with a number on every image. When hovering over the bubble, a card with the details about the image will be displayed as follows:
   • The image name. If you click on it, the image will be opened in a new tab.
   • Image File Dimensions. This shows the actual size of the image.
   • Expected Dimensions. This is the suggested ideal size of the image in order for it to be loaded on the page as quickly as possible.
   • Size on screen. This shows the size of the image displayed on the screen when visiting the page.
   • Image Size. This shows the actual file size for the image.
   • Potential savings: This shows how much the file size could be reduced by resizing the image to match the Expected Dimensions exactly.

Overview

Testing with different devices and settings

The Image Performance Guide shows you information about your images as they appear on the current device. We recommend testing your site from a few different device types to ensure that they are served efficiently no matter how users visit your site.

For example, different devices have a different pixel density. Pixel density is a measure of how many pixels appear within a given area of the screen. It can affect the number of pixels used on the screen to render an image at a particular size. As the Image Performance Guide shows you how well your images suit the current device, it is worth testing it from multiple devices – such as computers and phones to get a more complete picture of how well optimized your images are on different screens.

Zooming your web page in or out can also affect your browser’s pixel density, affecting the results from the Image Performance Guide. We recommend using the feature at the standard zoom level for your browser.

FAQ

How can Image Guide Help?

What can I learn from the Image Performance Guide feature to help improve my site’s performance?

The Image Performance Guide will calculate the recommended dimensions for images on your site. By resizing your images to these dimensions, you can reduce the file size and reduce the amount of time that the page takes to load.

Can Jetpack Boost optimize my images for me?

While Jetpack Boost can’t optimize the images hosted on your own server, you can enable the Jetpack Image CDN under Jetpack > Boost to serve optimized images from Jetpack’s servers instead. To learn more about the Image CDN, check out this guide. For more granular control over image quality and enhanced image optimization, consider upgrading Jetpack Boost or subscribing to Jetpack Complete.

What does optimizing my site’s images do?

By optimizing the size of your site images, you can improve the performance of your site, which can help site pages load more efficiently.

What can I do to optimize my images?

Before uploading them to the Media Library

Before uploading your images to the media library, we recommend taking the following actions:

• Resize: Make sure that the image size you’re uploading is sufficient for the way you’ll be using it. For example, if you’re going to be using an image at a max size of 800px by 800px, upload the image at that size.
• File Type: This really depends on the purpose of the image:
  • JPG: If you want an image that loads quickly, doesn’t have a transparent background, and the image doesn’t need to have a great deal of detail, using a JPG is recommended. This is good for things like photos that will be used in a gallery, or other applications where a super high quality image isn’t needed.
  • PNG: If you want an image that has a transparent background, and needs to be super high quality, using a PNG is recommended. This is good for things like logos, or other images that a user may look at in high detail, such as product images.

Using Site Accelerator

The main Jetpack plugin includes Site Accelerator; a free service which optimizes your images and serves them from a global network of servers, allowing users to load them from a location closer to them. Site Accelerator automatically resizes your images to fit in many situations.

We recommend using Site Accelerator to improve the performance of your images, particularly in cases where the Image Guide indicates they are over-sized.

Using the Media Library

You can resize images directly in your Media Library to give them a more appropriate size. Editing images and scaling them to an appropriate size is a non-destructive operation – that is, it creates a new version of your image at the size you specify, leaving your original image unchanged.

Can I use the Image Guide feature with page builders?

Some page builders use iframes to render content, which results in the Image Guide displaying details in the admin area. To provide a lean experience, we disabled Image Guide when page builders are used.

Privacy Information

The Image Performance Guide is deactivated by default. You can activate it from your WP Admin dashboard → Jetpack → Boost.

Data Used
Site Owners / Users This feature examines the images in use across your site, and how and where they are rendered.	Site Visitors None.
Activity Tracked
Site Owners / Users We track statistics on the over-sized images identified by the Image Guide, to help us improve the service and target improvements effectively. Specifically, we track the size of over-sized images, and the approximate location within the page they appear (e.g.: within post content, or theme files)	Site Visitors None.
Data Synced (Read More)
Site Owners / Users None.	Site Visitors None.