Opened 7 years ago
Last modified 4 weeks ago
#41884 new defect (bug)
Twenty Seventeen: responsive (gallery) images are too large
Reported by: | nosilver4u | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 4.8.1 |
Component: | Bundled Theme | Keywords: | has-patch needs-testing dev-feedback |
Focuses: | Cc: |
Description
It seems the sizes attribute used for gallery images on the Twenty Seventeen theme is a bit off. When viewed on the front page or an archive page, instead of the selected thumbnail images (150px), the browser is choosing the medium size at 600w, which I believe is based on the "default" of 580px.
Even worse, when viewing a single post with a gallery, the "size" attribute is 100vw, which means a 1080p screen forces the browser to load the largest image available (1024w in my case).
I switched over to the Twenty Sixteen theme and it does not seem to have this same problem.
I also tested this on another site, and initially it was only showing thumbs (as expected). I compared the media settings, and realized the two sites were different.
So there is one other thing that must be true to cause this behavior. Under the Media settings, if you have the thumbnail cropping turned off, this is the trigger.
So essentially, when the thumbs are 150x113 instead of 150x150, the Twenty Seventeen theme adds all (or most of) the available sizes to the srcset list because it fails to find an exact match to display in the gallery.
You can see it in action here: https://test.shanebishop.net/2017/06/23/hello-world/
Attachments (1)
Change History (6)
#3
@
5 years ago
- Milestone changed from 5.3 to Future Release
This ticket hasn't seen any movement this cycle. With 5.3 RC1 approaching, this is being moved to Future Release. If a committer feels strongly about this one being in 5.3 and has the time to see it through, it can be moved back up.
Just noticed the same thing happening on the Media screen in wp-admin, list view. The browser downloads the "large" size for all thumbnails despite that they are 60x60px. Caused by the
sizes
attribute being overwritten here: https://core.trac.wordpress.org/browser/tags/5.2.1/src/wp-content/themes/twentyseventeen/functions.php#L562 to always be100vw
, i.e. all images should be as wide as the window...This can easily be fixed by adding
! is_admin()
at the beginning intwentyseventeen_post_thumbnail_sizes_attr()
but thinking it is pretty unusual to set all responsive images *everywhere* to be100vw
except when some templates are used. If this is intended only for post thumbnails, it should be restricted only to them :)