Article idea: Optimizing imagery by using png for alpha data and jpg for colour #245

Closed
jakearchibald opened this Issue Dec 11, 2012 · 4 comments

4 participants

@jakearchibald

"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!

@ebidel
HTML5Rocks member

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.

@paullewis
HTML5Rocks member

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.

@PaulKinlan
HTML5Rocks member

Is this something we want to encourage on the web or just an interesting hack?

@jakearchibald

We can close this. Christian Heilmann got there first (and I optimised it) http://christianheilmann.com/2013/06/15/image-masking-with-html5-canvas/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment