Incorrect resolutions served for images set as background

mxbclang commented 3 years ago

Bug Description

Since v1.9.0, the incorrect image resolution is being served for images that are set as background on stories, as reported by a support user. Even when a high-res image is uploaded, the image that is served is for fit=450.

Looks like this goes back to https://github.com/google/web-stories-wp/pull/8099.

Expected Behaviour

Images should display at the correct resolution.

Steps to Reproduce

Create a new story
Set an image as a background image
View in browser

Screenshots

Affected story: https://selectgame.gamehall.com.br/web-stories/anuncio-de-company-of-heroes-3/

Uploaded image: https://i1.wp.com/selectgame.gamehall.com.br/wp-content/uploads/2021/07/Company-of-Heroes-3-PC-Screenshot-03.jpg

Served image (on slides 2 and 3): https://i1.wp.com/selectgame.gamehall.com.br/wp-content/uploads/2021/07/Company-of-Heroes-3-PC-Screenshot-03.jpg?fit=450%2C253&ssl=1

Additional Context

Plugin Version: 1.9.0
WordPress Version: All
Operating System: All
Browser: All

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

swissspidy commented 3 years ago

@choumx This seems like a reincarnation of the blurry images issue. Background images are a bit different in final output, so it's possible that the current solution doesn't work well for them. Mind taking a look?

dreamofabear commented 3 years ago

Ah it's because the current sizes generation doesn't account for image zoom factor. Should be a straightforward fix.

Ideally these zoomed images would be cropped instead, which would make image loading faster (avoid downloading parts of the image that won't be seen by users). Something that we can consider for the future.

csossi commented 3 years ago

Verified in QA

Before:

After:

GoogleForCreators / web-stories-wp