Skip to content

Loop videos: Reduce size of poster image#14285

Merged
domlander merged 1 commit intomainfrom
doml/optimise-poster-image-loops
Jul 25, 2025
Merged

Loop videos: Reduce size of poster image#14285
domlander merged 1 commit intomainfrom
doml/optimise-poster-image-loops

Conversation

@domlander
Copy link
Contributor

@domlander domlander commented Jul 25, 2025

What does this change?

Runs the poster image through the image optimiser to reduce its size

Why?

So that we can serve a lighter page to our users.

Screenshots

The poster image in this example is reduced from 2,114kb to 96kb.

Before After
desktop desktop-before desktop-after

image={media.mainMedia.image ?? ''}
uniqueId={uniqueId}
atomId={media.mainMedia.atomId}
posterImage={media.mainMedia.image ?? ''}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed image to posterImage. This image is only ever used for a poster image.


return generateImageURL({
mainImage,
imageWidth: 940, // The widest a looping video can be: Flexible special, giga-boosted
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't ideal. We'd like to serve a smaller image on smaller screens. Unfortunately, multiple sources are not supported for the poster image of a video.

We could introduce some logic to optimise this, but would require a bit of thought to how it could be maintained if cards/containers change. One for a follow-up PR

@domlander domlander added run_chromatic Runs chromatic when label is applied fronts + curation labels Jul 25, 2025
@domlander domlander self-assigned this Jul 25, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jul 25, 2025
@domlander domlander marked this pull request as ready for review July 25, 2025 14:25
@github-actions
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@domlander domlander merged commit c4a0885 into main Jul 25, 2025
36 checks passed
@domlander domlander deleted the doml/optimise-poster-image-loops branch July 25, 2025 14:28
@prout-bot
Copy link

Seen on PROD (merged by @domlander 8 minutes and 56 seconds ago) Please check your changes!

@domlander domlander added maintenance Departmental tracking: maintenance work, not a fix or a feature dotcom-rendering and removed dotcom-rendering labels Oct 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dotcom-rendering fronts + curation maintenance Departmental tracking: maintenance work, not a fix or a feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants