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

jakearchibald opened this Issue Dec 11, 2012 · 4 comments

4 participants


"Graphical impact" pages are using large photo imagery with an alpha channel, eg 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. - 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!

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.

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.

HTML5Rocks member

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)

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