Thoughts on the Contrast Swap Technique for Improving Performance

In her post three days ago on CSS Tricks, Una Kravets described a clever technique she discovered for significantly reducing image sizes on the web with little loss of quality. Essentially the idea is this: 

  1. Reduce the contrast of the image in Photoshop
  2. Re-apply contrast using CSS filter()

With this process, Kravets managed to get between 23% to 28% reduction in image size, which can add up to a lot of KB if you have many images on the page. I think this technique is a great discovery and a boost for image-heavy sites that don’t need to worry much about good IE support… but. But, I can’t help but think it does smell a bit hacky.

This kind of contrast trickery shouldn’t be done in CSS, it should be in the image format. And to be clear, I don’t mean to criticize Una’s discovery. If it’s possible to reduce contrast and then re-apply it on the fly with little perceptible loss in quality, surely those instructions could be passed along in the image files themselves and not have to rely on a separate stylesheet which may or may not load? I guess we’d need a new image format for that…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: