WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 9 months ago

#45985 new enhancement

Twenty Nineteen: Introduce better theme support for responsive images

Reported by: kjellr Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0.3
Component: Bundled Theme Keywords:
Focuses: performance Cc:
PR Number:

Description (last modified by kjellr)

As originally reported by @mor10, in the Twenty Nineteen GitHub repository:

https://github.com/WordPress/twentynineteen/issues/50


Currently, for images inserted within posts, the sizes attribute of the responsive images markup does not map to the actual displayed width of images.

According to my tests (using a 1920x1080px non-aligned image, inserted via Gutenberg (and set to Image Size: Full):

The sizes markup is output as:
(max-width: 1920px) 100vw, 1920px

  • At viewports <300px: A 300px image is loaded
  • At viewports >300px: A 768px image is loaded
  • At viewports >768px: A 1024px image is loaded
  • At viewports >1024px: A 1568px image is loaded
  • At viewports >1568px: The original 1980px image is loaded

Since this is not a full-width image, each of those image sizes is actually wider than necessary, resulting in a larger file size.

For a more specific example: at a screen width of 1024px, this non-aligned sample image is loaded in at 1568px wide. As per theme rules, it actually appears only 700px wide in the layout. On a non-retina screen, there's no need to load a 1568px image for a 700px space.

Twenty Nineteen should include some theme-specific markup to properly assign sizes values that map to theme styles. This was done in Twenty Seventeen for instance:

https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyseventeen/functions.php#L491-L517

At the time of writing, this issue is blocked by Gutenberg: We can currently issue a custom sizes attribute for non-aligned images like the example above, but it is not currently possible to have the theme customize the sizes attritbute for full/wide images. See the following GitHub issues for reference:

https://github.com/WordPress/gutenberg/issues/6131

https://github.com/WordPress/gutenberg/issues/6177

https://github.com/WordPress/gutenberg/pull/11973


I'm including patches ported over from two of @mor10's PRs on the original Twenty Nineteen repository:

Modifying the sizes attribute for non-aligned body images (This currently causes negative results for full and wide images)

https://github.com/WordPress/twentynineteen/pull/701

https://core.trac.wordpress.org/attachment/ticket/45985/45985-regular-images.patch

Adding custom sizes attributes, including wide and full variants (This is dependent on Gutenberg #11973 being merged):

https://github.com/WordPress/twentynineteen/pull/629

https://core.trac.wordpress.org/attachment/ticket/45985/45985-all-images.patch

Attachments (2)

45985-regular-images.patch (1.4 KB) - added by kjellr 9 months ago.
45985-all-images.patch (1.9 KB) - added by kjellr 9 months ago.

Download all attachments as: .zip

Change History (3)

#1 @kjellr
9 months ago

  • Description modified (diff)

There are many more details in the linked threads, but @mor10: feel free to add anything that I may have missed.

Thank you!

Note: See TracTickets for help on using tickets.