Make WordPress Core

Opened 2 years ago

Last modified 7 weeks ago

#41884 new defect (bug)

Twenty Seventeen: responsive (gallery) images are too large

Reported by: nosilver4u Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version: 4.8.1
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:


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)

41884.diff (1.0 KB) - added by AkSDvP 7 weeks ago.
Ticket: 41884 - Restrict resizing of thumbnail images in admin section.

Download all attachments as: .zip

Change History (3)

#1 @azaozz
4 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.3

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 be 100vw, i.e. all images should be as wide as the window...

This can easily be fixed by adding ! is_admin() at the beginning in twentyseventeen_post_thumbnail_sizes_attr() but thinking it is pretty unusual to set all responsive images *everywhere* to be 100vw except when some templates are used. If this is intended only for post thumbnails, it should be restricted only to them :)

7 weeks ago

Ticket: 41884 - Restrict resizing of thumbnail images in admin section.

#2 @AkSDvP
7 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed
Note: See TracTickets for help on using tickets.