--- title: "Stop using PNG and JPEG on the web!" url: "https://www.bekk.christmas/post/2022/17/stop-using-png-and-jpeg-on-the-web" authors: ["Mats Byrkjeland"] published: "2022-12-17" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["Bærekraft"] --- # 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. ## In short WebP is a modern image format that can replace JPEG, PNG, and GIF on the web with smaller file sizes and comparable quality. It supports transparency and animations, and major browsers support it, making it a practical choice for faster, more efficient websites. - **For:** Web developers optimizing website performance - **Good to know beforehand:** Basic web development knowledge _AI-generated_ ###### 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](https://developers.google.com/speed/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](https://caniuse.com/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 [ element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture). 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](https://developers.google.com/speed/webp/download) or find online converters. For Node.js, the [Sharp](https://sharp.pixelplumbing.com/) library is awesome. Have fun increasing the performance and sustainability of your websites with WebP. Make sure to check your [PageSpeed Insights](https://pagespeed.web.dev/) score before and after! ## Relevant resources recommended by the author - [Accelerate your site's load times with geometric primitives](https://www.bekk.christmas/post/2022/2/accelerate-your-sites-load-times-with-geometric-primitives)