Optimise desktop image sizes

[mr-winter]

Images are way too big https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmadewithwagtail.org%2F&tab=desktop

[loicteixeira]

tl;dr; images can indeed be big, this can be limited but we should also consider a max-width for the container, or decide of a screen resolution after which we don't care if the images get stretched. Thoughts @thibaudcolas, @claireynz?

Homepage (example)

Breakpoints are as follow, the grid has: 1 column up to 650px, 2 columns up to 1023px and 3 columns after that.

With the margins, the max image width is 585px for 1 column; 420px for 2 columns, and more or less unlimited for 3 columns because it scales indefinitely (the container does not have a max size, only padding and each column takes 33%).

Currently, images are constraint to 680px wide. This could be set to 585px (max image width on mobile). For big screens, it means images will start to get stretched for resolutions over 2250px wide, but this could be mitigated by setting a max-width on the container?

Site page (example)

Breakpoints are as follow: image are full-width up to 650px and take up 66% of the screen (with the text on the right) after that.

On smaller screen, the max image width is 561px and again, more or less unlimited after that.

Currently, images are constraint to 1200px wide. If we were to set it to 561px (max image width on mobile), it means images will start to get stretched for resolutions over 1066px which is not great. If we wanted to follow the same point as for the homepage (i.e. 2250px), then the image would need to be 1225px, which is more or less what it is already. Maybe we should set a max-width on the container?