Automattic / Automattic/jetpack

Enhancement: Image Compare Block: Missing responsive images

Open
#28,864 0 comments 0 reactions 0 assignees View on GitHub
[Block] Image Compare [Focus] Performance [Plugin] Jetpack [Pri] Normal Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 14h
Merged PRs (30d)
790

Description

### Impacted plugin

Jetpack

### What

Image Compare Block: Missing responsive images

### How

The image comparison block outputs images without `srcset` attributes. This can be a performance problem when uploading large images.

Here's an example HTML markup that's produced by the block

```














```

For example, if I uploaded a 5000px wide image in this theme, it would always load that image, even though it only needs to be 650px wide.

Contributor guide

Open the contributing guide

Research direction

Start by locating the Jetpack Image Compare block's rendering entry point and inspect how the two image URLs become the shown HTML. Confirm the change by checking that generated image markup includes responsive sources and that a large upload no longer always loads its full-size version.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend, performance, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.