Image Compare Block

Display and compare the differences between two images with the Image Compare block’s slider.

Add the Image Compare block

The Image Compare block is available on all Jetpack-connected sites. It is a part of the Jetpack Blocks suite and is activated by default. The Image Compare block does not require a paid upgrade to use. See our Jetpack Blocks article to learn about the available blocks and how to activate them.

Jetpack Blocks require the Block Editor (also referred to as the Gutenberg editor). If you’ve installed the Classic Editor plugin, you have a few options:

Deactivate the Classic Editor: Go to Plugins → Installed Plugins in your WP Admin and deactivate the Classic Editor plugin.
Enable both editors: If you prefer flexibility, navigate to Settings → Writing in your WP Admin (not the menu under Jetpack settings). Set Allow users to switch editors to Yes. You will only see these options if you have the Classic Editor plugin installed and active.

Some custom themes or plugins may prevent you from using the Block Editor. In that case, please contact the support team for the plugin or theme for further assistance.

For more details, see Using Blocks and the Classic Editor.

You can add the Image Compare block by searching and/or selecting it from the Jetpack section of the block selector. You can recognize it by its green icon representing two attached images. See Jetpack Blocks for detailed instructions on adding blocks.

Follow these steps to add images to the Image Compare block:

The block works best with two images of the same width and height, so try to find similar sizes.
After adding the block, you can add images to your gallery like a regular image block.
You can upload images from your computer, select them from your Media Library, or add them from an external source.
Once you’ve added images, you can use the block toolbar and the sidebar to add your customizations.
If needed, add a caption to the block after uploading your images.

Please note that if you accidentally upload the wrong images or wish to change their order, you will need to delete the block and start over.

Block Settings

Every block has specific options in the editor sidebar and options found in the block toolbar. If you do not see the sidebar, click the Settings icon (it looks like a menu) next to the Publish button.

The Image Compare block has just a couple of options to set up, the most important of which is the images’ slider orientation.

Orientation Settings

Using the orientation settings, you can switch the orientation of the images from side by side to above and below. This will also change the way the slider moves between images.

You can switch the orientation as many times you want, just make sure to save the changes before testing the new orientation.

Advanced

Add a CSS class to your block, write custom CSS, and style the block as you see fit.

Known Issues

The Image Compare block uses Jetpack’s Site Accelerator to serve and optimize images for improved performance. Using multiple optimization or caching services alongside Site Accelerator can sometimes cause conflicts, especially with how images are displayed by the block.

Common issues include missing images or a non-functional slider. These are often caused by plugins that modify image URLs, automatically convert image formats, or apply lazy loading and CDN rewriting in ways that may interfere with Jetpack.

If you’re seeing consistent display issues with the Image Compare block:

Try temporarily disabling any image optimization plugin (for example, EWWW Image Optimizer) to test compatibility.
If the block works after deactivation, review that plugin’s settings when re-enabled. Try disabling features like lazy loading or CDN handling.
Test the block.

As a best practice, avoid enabling multiple optimization or caching layers that overlap with Jetpack’s Site Accelerator.

Still need help?

Please contact support. We’re happy to advise.

Privacy Information

The Image Feature block is activated by default. It cannot be deactivated. The Image Compare block is always available in the block selector.

Data Used
Site Owners / Users None.	Site Visitors None.
Activity Tracked
Site Owners / Users If disconnecting from Google Photos, we track that Google Photos is being disconnected.	Site Visitors None.
Data Synced (Read More)
Site Owners / Users We sync options that identify whether or not the feature is activated and how its available settings are configured.	Site Visitors None.