# The Contrast Swap Technique: Improved Image Performance with CSS Filters

DevFeed: [The Contrast Swap Technique: Improved Image Performance with CSS Filters](<https://devfeed.tech/articles/the-contrast-swap-technique-improved-image-performance-with-css-filters-28787.md>)

Original publisher: [Read original article](<https://una.im/contrast-swap-technique/>)

Published: 2017-11-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Website](<https://devfeed.tech/topics/website.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [effects](<https://devfeed.tech/tags/effects.md>), [filter](<https://devfeed.tech/tags/filter.md>), [image](<https://devfeed.tech/tags/image.md>), [images](<https://devfeed.tech/tags/images.md>), [performance](<https://devfeed.tech/tags/performance.md>), [techniques](<https://devfeed.tech/tags/techniques.md>), [web-performance](<https://devfeed.tech/tags/web-performance.md>)

## AI overview

This article presents the Contrast Swap Technique, using CSS filters and blend modes to style images in the browser and explore their potential for web performance.

## Source excerpt

With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn't all that filter effects are good for. You can use filters for web performance, too.