O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding support for WebP images

Manipulating SVG images is an acquired art, and in some instances, it will clearly be overkill for what we need to achieve.

Instead, for those occasions where we need the detail in our images, we might normally use the JPEG format, or potentially PNG as an alternative. There's nothing wrong with either, but, it's old hat, and I do like to push the boundaries of what is possible! In addition, the JPEG image format is lossy and does not support alpha channels; PNG images are lossless, but suffer from larger file sizes for more complex images. If all we did was simply insert images onto a page, then PostCSS wouldn't be helpful here; instead, how about considering a different format altogether?

Enter Google's WebP. You'd ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required