For all images in our code, we need to make an inventory of how much space the image takes up on the page, and which dimensions are currently used for it.

That will allow us to

• see which images are currently problematically large (or sometimes too small)
• see whether we need to add new sizes
• consolidate certain display sizes so that we need less variations

I started this sheet with the Articles block as an example: https://docs.google.com/spreadsheets/d/1qdD73k9QwB-A7cw_Acr-zmDrW0giBeMkMNoT8RUNwIQ/edit#gid=0

Recommended reads regarding srcset, sizes, and their implementation in WordPress and Gutenberg:

• https://straightvisions.com/en/news/gutenberg-and-responsive-image-sizes/
• https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/
• https://github.com/WordPress/gutenberg/issues/6177 Status of responsive images in Gutenberg (tldr it's not there yet)
• https://medium.com/@duongphan/controlling-responsive-images-in-wordpress-breaking-down-the-code-7d36dd273787 This explains how the sizes in WordPress are intended to be used: by default WordPress will output only 1 size when calling the wp_calculcate_image_sizes function. It is up to themes to implement the wp_calculate_image_sizes filter and provide the right sizes for that theme, something which we currently don't do.