Improving the calculation of image sizes attributes

Overview

Originally introduced in WordPress 4.4, at the time WordPress had almost no way of knowing the intended layout of an image and therefore only came with a reasonable default value, intended to be modified by theme developers.

Since that time, enhancements to WordPress have been made, including the implementation of a declarative way for themes to control layout and alignments with theme.json, which provides the ability to more accurately predict the layout width of images before CSS is applied.

Paired with the addition of ”auto sizes” for lazy-loaded images to the HTML specification, we can now improve the sizes attribute authored by WordPress to provide much more accurate layout information.

Project Overview

Goals

• Incorporate current content layout information, like layout.contentSize and layout.wideSize properties from theme.json in the default sizes attribute for images to improve accuracy.
• Extend support for layout settings for defining alignment sizes to classic themes so that the optimizations can be made available to themes that do not support theme.json.
• When layout information from the above is not available, attempt to use the available global Content Width value to constrain image sizes values.
• Make the sizes attribute aware of an image’s layout in relation to any ancestor blocks, like columns, group block alignment, etc.
• Implement the auto-sizes spec for any images that are being lazy-loaded.

Nice to have

• Account for available spacing information like padding, margin, and block gaps when calculating the sizes attribute.

Non-goals

• The sizes attribute needs to be 100% accurate at all viewport sizes for a theme.
• Implementing client side linting tools like respimagelint to determine display.
• Requiring the use front end metrics collected by an API like Optimization Detective.
• Modifying the available image URLs included in the srcset attribute to provide more granular sources for clients to request at different viewport widths.

Roadmap

This project is broken into the following two epics, with milestones for each epic describing major objectives that could be published as part of a plugin release version. This roadmap will be updated over time.

Improving the sizes calculation

This epic is broken into logical milestones to validate the use of theme.json data in the API before proposing needed enhancements to that API, and then rolling out enhancements to classic themes in order to support the largest number of sites.

• #1186
• Initial feature release issues:
  • #1187
  • #1251
  • #1289
  • https://github.com/WordPress/performance/issues/1330
  • https://github.com/WordPress/performance/pull/1339
  • https://github.com/WordPress/performance/pull/1329
• Follow-up issues:
  • #1389
  • #1511
  • #1240
  • #1381
  • Define an API to extend support for setting alignment values in classic themes.
  • Add support for core/post-featured-image block.

Implement auto-sizes for lazy loaded images

This epic outlines the phases of development planned to implement the auto-sizes spec in WordPress.

• Create initial plugin that implements auto-sizes for lazy loaded images (see: https://github.com/WordPress/performance/issues/791).
• Update the implementation based on changes to the spec as it is being implemented by browsers (related issue) not applicable.