I spent an evening adding 'progressive' loading of the title images to my blog.
The title images for this blog are 3840 × 2160 and a hefty ~650K each. That's entirely intentional; as a photographer I wanted them to look as sharp as possible and take advantage of high pixel density screens.
The only downside of hi-res photos is that even with a good internet connection, you can still see the photo loading as the browser reads the JPEG. It's visually jarring and way too reminiscent of the web, circa 2000s.
A reasonable solution is to first download a smaller lower-resolution version, then load the full resolution image on top of that. So the user sees something relatively quickly, without the visual contrast of an image loading on a blank background. continue reading…