Single sites: Add responsive image support to site headers

[ryelle]

I was navigating around the site on staging and found the single pages were pretty slow to load.

Can we update them? The related sites contribute to the slowness.

Page: https://wordpress.org/showcase-v2/opus-one/

#175 (comment)

[ryelle]

@StevenDufresne I've added responsive image hints to the site header & homepage hero, but on most desktop screen sizes you'll still get the biggest image, so I think your other issue for optimizing those would be best.

The Related Sites were already using the responsive image hints, so no change needed there. Is your screen DPR >2? Those images are a max of 533px wide, but it looks like it's loading the 1400 width — for me, with a 2x screen, I get the 1100 wide images, which are at least in the 340-500 kB range. They also shouldn't be loaded until you scroll down to them (lazy loading).

[ryelle]

Forgot to add— I'm leaving this issue open because I don't feel like the fix in 0fdc2ad really addressed the problem, so if there are other ideas this could be the place to brainstorm. But maybe the simplest answer is just to figure out image optimization #219.