Quantcast
Channel: Planet Python
Viewing all articles
Browse latest Browse all 22462

Will McGugan: Progressive loading of high DPI photos

$
0
0

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.

JPEG images natively support something very similar; if you save your photo as a progressive JPEG, you will get a pixelated image that gradually gets more detailed as the browser reads the file. Personally, I don't like the visual effect of progressive JPEGs. They may be an improvement over displaying a line at a time, but the initial pixelation is not visually pleasing.

This blog implements an alternative method of progressive loading of photos. For each title photo there is a 1920 × 1080 version that is only around 70K or so. This smaller version of the photo is heavily blurred with a gaussian blur filter by Moya Tech Blog. The blurred image gives a good impression of what the full image will look like, without obvious pixelation (and conveniently blurred photos compress really well in comparison to the non-blurred original).

Here's an example of one of the blurred preview photos:

Blurred preview of a hi-res photo

This blurred photo is absolutely positioned directly behind the title image, so that when the hi-res version loads it covers the blurred image. There is also a CSS transition to smoothly fade in the hi-res version, further reducing any visual interruption.

All in all, it works quite well. Technically, it will increase page-load time since it serves an extra image, but from the visitor's point of view, the page will appear to load significantly quicker.

If you are reading this via a feed, you might want to go directly to my blog and click around the links at the top to see the effect in action.


Viewing all articles
Browse latest Browse all 22462

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>