Stop using PNG and JPEG on the web!
PNG and JPEG are the most common image formats that exist. But they are old and not optimized for use on the web. It's 2022 and there are better alternatives! Ditch PNG and JPEG now and adopt WebP.
2 min read
·
By Mats Byrkjeland
·
December 17, 2022
Photo by Bailey Zindel on Unsplash, converted to WebP!
Boring Bytes
A picture says more than a thousand words. But a one megabyte picture does not necessarily say a thousand times more than a one kilobyte version of it. When we develop web pages we want our resources, the HTML, CSS, JS and images, to be as small as possible. The smaller the resources, the faster the web page will load for our users, giving them a better experience – especially on slower connections. Smaller payloads are also more environmentally friendly! Less power is needed to transfer bytes and fewer hard drives are needed to store them.
Images are usually the largest resources on a website. Traditionally, JPEG and PNG are the preferred formats. They have been around since forever (the 90's) and work everywhere. But now the time is ripe to bid them farewell and start adopting a more modern, space-efficient image format designed for the web: WebP.
Less is more
WebP is an open image format created by Google. It supports transparency and animations, and is therefore able to replace both JPEG, PNG and GIF files. WebP's compression algorithms are superior to the older formats, while delivering comparable quality. Expect to see drastic size reductions when converting your good ol' large JPEGs to WebP.
The WebP format was first announced in 2010, but the first stable version of its supporting library tool, libwebp, was released in 2018. All major browsers support WebP today and I dare say it's safe to fully adopt this format now. But if you really need to support older browsers, check out the <picture> element.
There are other formats out there too. AVIF is a really exciting one, but support is not great (yet). Same goes for JPEG XL. And if you are working with vector graphics, you should probably use SVG.
Convert and Deploy
If you want to convert your JPEGs, PNGs and GIFs to WebP, you could check out the official conversion tools or find online converters. For Node.js, the Sharp library is awesome.
Have fun increasing the performance and sustainability of your websites with WebP. Make sure to check your PageSpeed Insights score before and after!
Up next...
Loading…
