"Graphical impact" pages are using large photo imagery with an alpha channel, eg http://www.bbc.co.uk/news/entertainment-arts-20026367 which weighs in over 5mb. I've been experimenting with a simple technique to use two images that play to the codecs' strengths, png for alpha, jpeg for colour.
https://github.com/jakearchibald/scrolly-cliche/blob/master/www/js/applyAlpha.js - this results in a 90% reduction in file size compared to a single PNG. This would be the takeaway of the article, but it's also an opportunity to talk about other things, such as:
WebP - How this can achieve the above in a single file
Delayed image loading - Don't load the colour data in until needed
A little jank-busting
Spriting, optimising pngs & jpegs
I'd make a fun demo around it, in the form of a tongue-in-cheek parallax scrolling page. Will get to work if this sounds like a goer. Cheers!
Sounds like an interesting technique. I assume the file size reduction by using two highly optimized
images greatly outweighs the overhead of increasing the # of https requests?
+1 on highlighting webp and highlighting the mobile use case.
Coordinate with @paullewis on using parallax scrolling as the example. I know he's doing an article.
I was initially concerned about the increased req number but it's not 2n necessarily, since you can have multiple alpha masks in one image. Results look v promising. So a big +1 from me on this.
Is this something we want to encourage on the web or just an interesting hack?
We can close this. Christian Heilmann got there first (and I optimised it) http://christianheilmann.com/2013/06/15/image-masking-with-html5-canvas/