Note: Because of how the Twenty Nineteen theme defines widths, what image source is selected is influenced by both viewport width and screen resolution. In other words, a viewport width of 800px on a 2x monitor will be interpreted as 1600px. To run tests on 2x monitors, use the Firefox developer tools in mobile display mode where you can choose the display density manually.
In this post, the sizes attribute for each of the images has been manually altered to provide the browser with correct information about the displayed width of each image.
- 5.0-RC1-43946
- Twenty Nineteen as shipped
- All images uploaded and added to an image block with no configurations beyond alignments (ie no changes to the “Image size” option
The sizes attribute on each image is set as follows:
Regular aligned image:sizes="(min-width: 768px) calc(8 * (100vw / 12) - 28px), (min-width: 1168) calc(6 * 100vw/12) - 28px), calc(100% - (2 * 1rem))"
Wide aligned image:sizes="(min-width: 768px) 80%, calc(100% - (2 * 1rem))"
Full aligned image:sizes="100vw"
How this test works
After uploading the original images to the server, the generated images were downloaded, width information was added to a rectangle in the top corner, and the new versions were uploaded through FTP to replace the originals.
As the width of the viewport increases, the browser automatically pulls the appropriate sized source file from the srcset list for each image. This is controlled by the sizes attribute. The sizes attribute should describe the displayed width of the image at all viewport width to ensure the browser pulls the most appropriate source for any displayed width. In other words, if an image is displayed at 800px wide, the browser should pull the image source file with a width >=800px or as close as possible. In the case of WordPress, this would be the 1024px wide generated image if available.
How to conduct your own test
- Open an incognito window and activate the developer tools panel to block browser caching.
- Reduce the viewport width or use developer tools to create a small viewport width.
- Load the page.
- Note the “width” text displayed in the image. This will tell you which source file you are looking at.
- Increase the width of your viewport.
- Note the “width” text on the image changing as new image files are selected by the browser for wider viewports.
If responsive images work properly, the width of the source image used at any display width should match the actual displayed width of the image as close as possible. A mismatch means either a) the sizes attribute is incorrect, or b) the list of source files in the srcset attribute is insufficient.
Image with no alignment
This image block has no alignment. Original image dimensions: 4048×2704.
Wide alignment image
This image block is set to “wide” alignment. Original image dimensions: 4048×2349.
Full alignment image
This image block is set to “full” alignment. Original image dimensions: 4032×2425.
