Skip to main content
HashnodeAbbey Perini CodesAbbey Perini Codes

Command Palette

Search for a command to run...

What is WebP?

Published
•2 min read
What is WebP?
A
Abbey Perini
Abbey Perini is many things - a metro Atlanta native, person of many hobbies, full-stack web developer, accessibility advocate, international speaker, and technical writer with ✨over 500,000 views.✨ She's full-stack in the truest sense - give her a problem and she'll figure it out. She's happiest problem solving in the front-end, back-end, and all the APIs and microservices in between. Passionate about accessibility, she's worked in Vue, React, and even AngularJS (2013). She's spent her development career rectifying tech debt in existing codebases.
Part of seriesImages

I right click > save images off the web constantly, and I've started coming across .webp file types more and more. What is this Google-made open source image file format?

WebP

The stated goal for this file format is improving website speed, so WebP may become another tool in your responsive images toolbox. WP Rocket even has a glowing review of the format in their page speed and caching tutorials.

Based off of the VP8 video encoding format, the WebP format provides lossy and lossless compression for creating small images for the web. Both types of compression support transparency and provide smaller images than PNG or JPEG compression. Essentially this means you can get images that look the same with a file size 25% or more smaller than you would with JPEG or PNG.

You can download tools for viewing WebP files, encoding JPEG, PNG, and TIFF images into WebP images, and decoding WebP images into PNG. There's a gif2webp tool, which means this format supports animation, as well. I know from experience Preview on macOS will view these files and export into several formats. It looks like it's a bit trickier on Windows.

The format has been around for about a decade now, so browser support is pretty good, but not yet universal like JPEG and PNG. Considering older email clients still have trouble with PNG, WebP may not yet be the file format for your emails.

WebP is also limited to 8-bit color precision and the lossy compression algorithm sacrifices color information and fine detail. This means it's not great for high quality photographs and compressing a low quality JPEG with WebP encoding will compound upon your problems.

The other downside is many places where you can upload images do not support you uploading WebP, even if they're using it themselves when hosting the uploaded images. Hopefully this begins to change, garnering WebP more support and popularity.

Conclusion

Unless you're making a site like a photographer's portfolio, requiring high quality, vivid color, and fine detail in your images, WebP seems like a pretty useful image format to reach for when building a site. It provides all the benefits of a PNG and GIF with smaller file sizes. It makes sense that websites that host a lot of images are incorporating this file format more and more.

#web-development#performance#web-design

Comments

Join the discussion

No comments yet. Be the first to comment.

Images

Part 3 of 7

When I sat down to write about my Shiba Inu SVGs, out came a tutorial for SVGs in React, and an article demystifying sourcing images for your website. Additional image tutorials will be added here.

Up next

What is AVIF?

When I was researching WebP, AVIF came up a lot as a newer alternative. What are the benefits in using this file type? AVIF AVIF or AV1 Image File Format, was only finalized in 2019, so its middling browser support is actually pretty impressive. Crea...

More from this blog

A

Abbey Perini Codes

85 posts

Passionate about accessibility, Abbey's worked in Vue, React, and even AngularJS (2013). She's happiest problem solving in the front-end, back-end, and all the APIs and microservices in between.