Speaker Deck

Progressive image rendering

by José M. Pérez

Published November 30, 2016 in Programming

These are the slides of a presentation I gave at CSSConf Australia 2016 (http://2016.cssconf.com.au/). The presentation is available on https://jmperezperez.com/cssconfau16 with full animations and videos. The video of the talk is available on https://www.youtube.com/watch?v=skzcEKewOwc#t=06h29m38s

This talk addresses the culprit in page size, images. I feel that we like discussing JS and CSS and its payload, but we tend to forget about images, which represent 2/3 of the bytes of a page.

The most performant request is the one that is never done, and this beats any possible image optimization. There are some common scenarios in which we can avoid using images, being adopting a minimalism/flat design or hiding certain images on smaller screens.

Of course, we will need to use some images eventually. For these cases I explain how the picture element might help and some of its limitations I have found when working with real websites. One of them is lazy loading of images, which can bring great savings in terms of data traffic, but it is also easy to implement wrongly.

Lastly I show some techniques to "fill" the space for an image while it is loaded, going from just showing an empty area to doing a progressive loading from a blurry image.

The talk contains some videos and animations, so I recommend checking it out directly on https://jmperezperez.com/cssconfau16.