Automattic / Automattic/jetpack

Tiled Gallery Optimization: Use Lower Resolution Version of the Images in the Editor

Open
#39,052 0 comments 0 reactions 0 assignees View on GitHub
[Block] Tiled Gallery [Feature] Tiled Gallery [Focus] Performance [Plugin] Jetpack Enhancement Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### What

Changing how the images are loaded in Gutenberg would improve performance when editing pages with Tiled Galleries that have a large number of images

### How

Having many images added in a tiled galley makes it very difficult to edit on Gutenberg as it takes a long time to load, particularly if those images are large in size.

Noting that this is a Block used most of the time on image-oriented sites, it happens that it becomes unusable after some number of large images are added.

Checking the HTML source in the editor shows that it's loading full-size images.
It's not that much of an issue in the front end if lazy loading is enabled. But that doesn't help on the backend.

Limiting the size of the images loaded by the block would help.

Contributor guide

Open the contributing guide

Research direction

Start by locating the Jetpack Tiled Gallery block implementation used in the Gutenberg editor and inspect the image URLs in the editor HTML. The work is done when large galleries load lower-resolution image versions in the editor without changing the intended gallery display.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.