The Contrast Swap Technique: Improved Image Performance with CSS Filters

See The Contrast Swap Technique: Improved Image Performance with CSS Filters on css-tricks.com

I was listening to The CSS Podcast on Filters (10/10 naming) where one of the hosts Una mentioned that you can make images smaller by desaturating a photo in Photoshop (that part’s important) and using a CSS filter to bring it back. It has the added benefit of preventing people from stealing images.

It has issues, such as some quality loss, especially for darker images. You can’t download the actual picture since CSS filters are non-destructive. That also means thatthey won’t show up properly in RSS readers or any other place where the image is viewed. Also, you’ll probably have an easier time just compressing a JPEG at lower quality since desaturation does that anyway. Also, it only works if you desaturate with Adobe Photoshop since they worked on the desaturation algorithm.