Improving the calculation of image sizes attributes

[eclarke1]

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.

• Collect and measure impact of image sizes improvements #1186
• Initial feature release issues:
  • Initial implementation of improved image sizes algorithm #1187
  • Parse width presets for use in sizes values #1251
  • improved image sizes for left/right/center alignment #1289
  • Update plugin name for Initial work on Accurate Sizes in Auto Sizes Plugin #1330
  • Update the plugin description for Enhanced Responsive Images  #1339
  • Merge initial accurate sizes work into trunk #1329
• Follow-up issues:
  • Accurate sizes improvement didn't account for the disable filter for sizes #1389
  • Incorporate layout constraints from ancestor blocks into the sizes calculations #1511
  • Parse padding presets for use in sizes values #1240
  • Update wp_calculate_image_sizes to Reflect Changes in sizes attribute #1381
  • Define an API to extend support for setting alignment values in classic themes.

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: Module Proposal: auto-sizes for lazy-loaded images #791).
• Update the implementation based on changes to the spec as it is being implemented by browsers (related issue) not applicable.

[joemcgill]

I've updated the description on this issue to better outline the scope of this project and a high-level roadmap of tasks to be worked on related to this effort, which I plan to convert into standalone issues.

As we begin work on improving the default sizes calculation, I think it makes sense to include that work and the auto-sizes work in the same plugin, rather than having two different plugins that are so closely related.

[joemcgill]

Update

I've updated the description to start to better prioritize the existing issues for improving the sizes calculation into what I would consider required for an initial feature release, and those that could be shipped in follow up releases.

Currently, we have all work related to the improved sizes calculation epic staged in the https://github.com/WordPress/performance/tree/feature/more-accurate-sizes-attribute feature branch, which can be merged to trunk once all of the initial feature release issues (and any newly emerging issues) are addressed.

[mukeshpanchal27]

For classic themes

When we implement the accurate sizes for classic theme we can use POC - https://github.com/Automattic/jetpack/blob/99baf6dfba29881377085a9ed375f611bfe60ac1/projects/packages/image-cdn/src/class-image-cdn.php#L1039-L1061

add_filter( 'wp_calculate_image_sizes', 'filter_sizes', 1, 2 ); // Early so themes can still easily filter.
function filter_sizes( $sizes, $size ) {
	if ( wp_is_block_theme() ) {
		return $sizes;
	}

	if ( ! doing_filter( 'the_content' ) ) {
		return $sizes;
	}

	$content_width = ( isset( $GLOBALS['content_width'] ) && is_numeric( $GLOBALS['content_width'] ) )
		? $GLOBALS['content_width']
		: false;

	if ( ! $content_width ) {
		$content_width = 1000; // Jetpack use these number ,we can update it.
	}

	if ( ( is_array( $size ) && $size[0] < $content_width ) ) {
		return $sizes;
	}

	return sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $content_width );
}