Jetpack Boost: Image Performance Guide
Ensure that the images used on your site’s pages and posts are the right size with Jetpack Boost’s Image Performance Guide.
Use the Image Performance Guide
The Image Performance Guide calculates recommended dimensions for images on your site. Resizing oversized images can reduce their file size and help pages load faster.
To use the Image Performance Guide:
- Go to Jetpack → Boost in WP Admin.
- Under Optimize your Speed expand the Images section.
- Turn on the “Enable image guide” toggle.
- While logged in, visit your site. The Image Performance Guide displays an indicator on each image.
- Hover over an indicator to view details about the image, including:
- Image name: Select the image name to open the image in a new tab.
- Image file dimensions: The actual dimensions of the image file.
- Expected dimensions: The recommended dimensions for the image on the current device.
- Size on screen: The dimensions at which the image is displayed.
- Image size: The size of the image file.
- Potential savings: How much the file size could be reduced by resizing the image to match the expected dimensions.
Test the Image Performance Guide 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.
Different devices have different pixel densities. Pixel density is a measure of the number of pixels that 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 in or out on your web page can also affect your browser’s pixel density, which in turn affects the results from the Image Performance Guide. We recommend using the feature at the standard zoom level for your browser.
The Image Performance Guide uses small indicators to show relevant information without being intrusive. For smaller images, the overlay bubble will appear as a small dot instead.
Pause the Image Performance Guide
When the Image Performance Guide is enabled, you can pause or resume it from the WordPress Admin bar.
Select Image Guide: Active in the Admin bar to pause the guide. You can use the same control to activate it again.
The Boost Image Guide does not operate 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.
How to optimize the images on your site
By optimizing the size of your images, you can improve the overall performance of your site, which can help site pages load more efficiently.
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 our Site Accelerator guide. For more granular control over image quality and enhanced image optimization, consider upgrading Jetpack Boost or subscribing to Jetpack Complete.
Below are a few options for optimizing the images on your site.
Before uploading them to the Media Library
There are a few different ways to optimize your images before uploading them to your Media Library:
- 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.
Activate the Jetpack Site Accelerator
The core Jetpack plugin includes our Site Accelerator; a free service which optimizes your images and serves them from a global network of servers (often called a CDN, or Content Delivery Network), enabling images to load from servers closer to the users accessing them when they browse your site. Site Accelerator also 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.
Resize images from within your Media Library
You can resize images directly in your Media Library. Editing images and scaling them to an appropriate size in your Media Library is a non-destructive operation. In other words, it creates a new version of your image at the size you specify, leaving your original image unchanged.
Privacy Information
The Image Performance Guide is deactivated by default. You can activate it from Jetpack → Boost in WP Admin, under Images, using the Enable image guide toggle.
| 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. |
