Issue Overview

Theme authors need the ability to control the sizes attribute of images added based on their alignment attributes to ensure the browser knows the displayed width of all images and uses the appropriate image from the srcset list. Traditionally this was done using wp_calculate_image_sizes but within this context there is no way to know what displayed width any particular image in a view has. All we can know is what template is being used.

What's needed is a method to supply sizes attributes to individual images based on their alignment (left / right / center / wide / full).

Steps to Reproduce (for bugs)

1. Add image to post.
2. Filter sizes attribute using wp_calculate_image_sizes
3. Same sizes attribute is applied to all images, regardless of alignment.

Expected Behavior

Given a post with three images:

• one center aligned (full-width to the regular content width, which we know)
• one wide aligned which will take up some CSS-defined width in addition to the regular content width (usually 50% of the remaining width on either side of the content)
• one full aligned which will take up some CSS-defined with in addition to the regular content width (usually 100% of the remaining width of the content)

In this scenario, provided the max content width of the theme is 720px, the markup for the three images could be something like:

<figure class="wp-block-image">
  <img src="..." srcset="..."
    sizes="(min-width: 720px) 720px, 100vw">
</figure>
<figure class="wp-block-image alignwide">
  <img src="..." srcset="..."
    sizes="(min-width: 720) calc(50% + 720px), 100vw">
</figure>
<figure class="wp-block-image alignfull">
  <img src="..." srcset="..."
    sizes="100vw">
</figure>

I say "could be" because the exact configuration here will change depending on the theme and any theme may have multiple different configurations depending on what template and other conditions are currently in play.

Current Behavior

At present there is no way of allowing this fine level of control via wp_calculate_image_sizes. While we can control the sizes attribute based on template and other configurations, the same sizes attribute will be applied to all images regardless of alignment. This is because we have no way of knowing the alignment attribute of individual images when wp_calculate_image_sizes runs.

In the current scenario, because the developer doesn't know what images are being displayed alignwide or alignfull, they have to assume all images are displayed full:

<figure class="wp-block-image">
  <img src="..." srcset="..."
    sizes="100vw">
</figure>
<figure class="wp-block-image alignwide">
  <img src="..." srcset="..."
    sizes="100vw">
</figure>
<figure class="wp-block-image alignfull">
  <img src="..." srcset="..."
    sizes="100vw">
</figure>

This invalidates the purpose of responsive images and stands in the way of performance optimization.

Possible Solution

A function / filter / something else is needed to be able to serve sizes attributes to individual images in a view depending on their current alignment. Since alignment is controlled using a class, it seems logical to provide a way of uncovering the current applied class to an displayed image so theme developers can build conditional statements around them.

Related Issues and/or PRs

It has been suggested that #869 is related, but from my reading it appears to tackle a different issue.