Only include the original image in the Image component if the image does not have all the scales present. Fixed and update tests. by sneridagh · Pull Request #7655 · plone/volto

sneridagh · 2025-11-24T12:22:53Z

Follow up: #7486 (Seven PR):

Add a default scale size which is large enough to serve full-width images on a large high-DPI monitor -> Add 2k and 4k scale sizes plone.volto#205
Fix the image field serializer in plone.restapi to include the same scales as the code which creates image_scales for the catalog (so that we aren't generating scales larger than the original). -> Limit image scales to those smaller than the original plone.restapi#1992
Always set sizes appropriately when we use the Image component (so that we don't end up with the largest scale when a smaller one would be sufficient)

…oes not have all the scales present. Fixed and update tests.

davisagli

The presence of the original image didn't force the browser to choose it. But we set width and height to the original size and in most cases didn't set sizes, so the browser didn't have any way to know it could use a smaller scale.

I think setting sizes appropriately would allow the browser's scale selection to work better even if we did always include the original image. I have a slight preference for leaving the original image there, because if we remove it then it takes extra work to use it in the use cases where it's really what you need (i.e. full-width on a large monitor)

davisagli · 2025-11-24T22:59:04Z

                      alt=""
                      loading="lazy"
                      responsive={true}
+                      sizes="(max-width: 940px) 100vw, 940px"


Ideally we should use a smaller size when there are multiple columns.

I don't love hardcoding the default width, but I don't have a better suggestion. We can't use CSS properties because the whole point of sizes is to give the browser enough information to pick the right image before CSS has loaded.

Co-authored-by: Steve Piercy <web@stevepiercy.com>

sneridagh · 2025-11-25T08:42:06Z

@stevepiercy I accepted all the suggestions, but David is working in the backend side, and we might amend them a bit the next days. Thanks!

stevepiercy · 2025-11-25T08:45:12Z

@sneridagh @davisagli please ping me again for a review when it's done cooking.

stevepiercy · 2025-11-25T08:46:27Z

Can someone else fix the broken links? I'm swamped.

https://github.com/plone/volto/actions/runs/19663404467/job/56314471303?pr=7655

sneridagh · 2025-11-26T07:50:30Z

@stevepiercy it seems medium added some antibot measures... we cannot do anything about it. How do we proceed with this use cases?

stevepiercy · 2025-11-26T07:53:12Z

@sneridagh for Medium, ignore the entire domain with a regex in conf.py. There are existing examples. It also needs to be applied to the upstream plone/documentation conf.py.

For the others, fix the links that redirect.

…olto into donotaddoriginalimagetothesrcset * 'donotaddoriginalimagetothesrcset' of github.com:plone/volto: Apply suggestions from code review

sneridagh · 2025-11-26T09:03:55Z

@davisagli once plone/plone.volto#205 is merged and released, we can go for this one. We might want to amend the docs with the released p.volto version.

@stevepiercy I amended the docs to reflect the latest changes.

davisagli

@sneridagh I took another look at this. I still think it would be nice to make the following improvements:

Add a config setting for the widths, instead of hardcoding 940px. (Also ideally inject them from the config setting into the CSS properties to avoid duplication, but we can live without that.)
Give the teaser block contextual information about how many columns there are, so it can use smaller sizes when there are multiple columns.

But, I would be okay with merging this and adding those improvements incrementally.

erral · 2026-02-27T07:12:46Z

I would say that for the srcset attribute we need to always show the original image URL with its original width set. We have been seen this also in classic and have just prepared a PR in plone.namedfile.

Our usecase was the following:

The srcset attribute was showing only the URLs of scales that are smaller than the original url. In our example, the user uploaded a 500px image, so the srcset showed the 400px one as the first scale. The sizes attribute was setting a 500px wide space, so the browser was rendering the 400px scale, when the original image would fit perfectly.

davisagli · 2026-02-28T22:39:44Z

@erral This still includes the original image in the srcset unless it is enormous (width greater than the largest defined scale size, which is 4000 pixels in Plone 6.2)

read-the-docs-community · 2026-03-19T09:10:47Z

Documentation build overview

📚 volto | 🛠️ Build #32177158 | 📁 Comparing ddb87a8 against latest (17d171e)

🔍 Preview build

Show files changed (1 files in total): 📝 1 modified | ➕ 0 added | ➖ 0 deleted

File	Status
upgrade-guide/index.html	📝 modified

* main: (122 commits) Release 19.0.0-alpha.27 Release @plone/slate 19.0.0-alpha.12 Release @plone/razzle 1.0.0-alpha.1 We do not release @plone/client from here Handle create-user 500 responses where body contains 'message' instead of 'error' (#7946) Dropzone filewidget a11y (#7956) Update css-minimizer-webpack-plugin to v7 and keep razzleOptions.enableSourceMaps control (#7934) Refactor Password Reset: Convert Class-Based Component to Functional Component (#7697) fix: Fixed searchable types in Object Browser Widget, adding also sel… (#7942) Fix in-page drag-and-drop for the Listing block in Volto 18 and 19 (#7907) Improved docs of Plone REST API JavaScript Client (#5576) Fix Moderate Comments control panel visibility based on Discussion Support addon installation (#7878) fix: Add authorization error handling to control panels (#7807) Fix subordering order tab (#7937) (#7939) Fix converting value to html in HtmlSlateWidget (#7938) razzle.config.js: Fix defaultPlugins missing name property to enable addon SCSS plugin replacement (#7908) Update users controlpanel to work with new response format (#7895) Avoid storing blocksClipboard in localstorage until it has a value (#7925) Remove link to Jobfamilie MEDICE: site is no longer a Volto site (redirects to non-Volto destination) (#7929) Exclude `.storybook` from ESLint's default hidden directory ignore list via `.eslintignore` to allow linting of Storybook configuration files (#7898) ...

stevepiercy

What happened to the Upgrade Guide entry from 8fe53d2 ? It's also not on main in https://6.docs.plone.org/volto/upgrade-guide/index.html. Search for "humongous"

…tothesrcset

davisagli · 2026-04-09T00:09:22Z

@stevepiercy Good catch, the upgrade guide was accidentally lost in a bad merge. I re-added it in ddb87a8

sneridagh · 2026-04-09T07:00:18Z

Merged! Thanks to all involved!

…oes not have all the scales present. Fixed and update tests. (plone#7655) Co-authored-by: Steve Piercy <web@stevepiercy.com> Co-authored-by: David Glick <david@glicksoftware.com>

sneridagh added 2 commits November 24, 2025 13:21

Only include the original image in the Image component if the image d…

db5fd3a

…oes not have all the scales present. Fixed and update tests.

Documentation and changelog

7a5460d

sneridagh requested a review from davisagli November 24, 2025 12:37

Add sizes to Image and Teaser

1f22a5d

stevepiercy requested changes Nov 24, 2025

View reviewed changes

Comment thread docs/source/upgrade-guide/index.md Outdated

Comment thread docs/source/upgrade-guide/index.md Outdated

Comment thread docs/source/upgrade-guide/index.md Outdated

Comment thread docs/source/upgrade-guide/index.md Outdated

davisagli mentioned this pull request Nov 24, 2025

Add 2k and 4k scale sizes plone/plone.volto#205

Merged

davisagli reviewed Nov 24, 2025

View reviewed changes

Apply suggestions from code review

8fe53d2

Co-authored-by: Steve Piercy <web@stevepiercy.com>

sneridagh added 5 commits November 26, 2025 09:14

Fix linkcheck

9f6b2b3

Merge branch 'donotaddoriginalimagetothesrcset' of github.com:plone/v…

fcbc7a6

…olto into donotaddoriginalimagetothesrcset * 'donotaddoriginalimagetothesrcset' of github.com:plone/volto: Apply suggestions from code review

Use auto whenever possible, check all Image instances

b2f8cb4

Amended docs

66c0ddd

Merge branch 'main' into donotaddoriginalimagetothesrcset

a970e36

sneridagh mentioned this pull request Nov 26, 2025

Specify sizes where we use the Image component kitconcept/volto-light-theme#664

Open

sneridagh requested a review from davisagli November 26, 2025 16:06

wesleybl reviewed Nov 28, 2025

View reviewed changes

Comment thread packages/volto/src/components/manage/Blocks/Teaser/DefaultBody.jsx Outdated

davisagli reviewed Feb 27, 2026

View reviewed changes

davisagli mentioned this pull request Feb 27, 2026

Limit image scales to those smaller than the original plone/plone.restapi#1992

Open

sneridagh added this to Bucharest Sprint 2026 Feb 28, 2026

github-project-automation Bot moved this to Todo in Bucharest Sprint 2026 Feb 28, 2026

pnicolli moved this from Todo to In progress in Bucharest Sprint 2026 Mar 10, 2026

pnicolli requested changes Mar 19, 2026

View reviewed changes

Comment thread packages/volto/src/components/manage/Blocks/Teaser/DefaultBody.jsx Outdated

Use config-based teaser image sizes

624d484

pnicolli approved these changes Mar 19, 2026

View reviewed changes

sneridagh and others added 4 commits March 19, 2026 14:49

Merge branch 'main' into donotaddoriginalimagetothesrcset

3dee5eb

Fix unit tests

7918efc

Merge branch 'main' into donotaddoriginalimagetothesrcset

5d46858

davisagli approved these changes Mar 19, 2026

View reviewed changes

sneridagh mentioned this pull request Mar 20, 2026

Improvements for image sizes #8031

Merged

pnicolli requested a review from stevepiercy March 20, 2026 08:36

Improvements for image sizes (#8031)

96ba8d7

stevepiercy requested changes Mar 24, 2026

View reviewed changes

Comment thread packages/volto/news/7655.bugfix Outdated

davisagli added 2 commits April 8, 2026 17:05

Merge remote-tracking branch 'origin/main' into donotaddoriginalimage…

f0733cb

…tothesrcset

Re-add upgrade guide that was lost in a bad merge

ddb87a8

stevepiercy approved these changes Apr 9, 2026

View reviewed changes

sneridagh merged commit dd87903 into main Apr 9, 2026
81 of 83 checks passed

sneridagh deleted the donotaddoriginalimagetothesrcset branch April 9, 2026 06:59

github-project-automation Bot moved this from In progress to Done in Bucharest Sprint 2026 Apr 9, 2026

Uh oh!

Conversation

sneridagh commented Nov 24, 2025 • edited by davisagli Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

davisagli left a comment

Choose a reason for hiding this comment

Uh oh!

davisagli Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

sneridagh commented Nov 25, 2025

Uh oh!

stevepiercy commented Nov 25, 2025

Uh oh!

stevepiercy commented Nov 25, 2025

Uh oh!

sneridagh commented Nov 26, 2025

Uh oh!

stevepiercy commented Nov 26, 2025

Uh oh!

sneridagh commented Nov 26, 2025

Uh oh!

Uh oh!

davisagli left a comment

Choose a reason for hiding this comment

Uh oh!

erral commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davisagli commented Feb 28, 2026

Uh oh!

Uh oh!

read-the-docs-community Bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Documentation build overview

Uh oh!

stevepiercy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

davisagli commented Apr 9, 2026

Uh oh!

Uh oh!

sneridagh commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

sneridagh commented Nov 24, 2025 •

edited by davisagli

Loading

erral commented Feb 27, 2026 •

edited

Loading

read-the-docs-community Bot commented Mar 19, 2026 •

edited

Loading