What is a WebP Image?

If you save images with your browser, you are likely coming across more and more pictures with the extension .webp instead of the more traditional .jpg, .png, or .gif formats you are used to. Well, what is WebP, and why should you use it?

WebP is a modern image format that provides superior compression and quality for web images. WebP can help you optimize your web performance and user experience. As the WEB part of the name implies, WebP is meant for web / internet-based content. Developed by Google, it is an image format based on the VP8 video codec - meaning it can have both image and video properties. WebP supports lossy and lossless compression, transparency, and animation. WebP images are smaller than equivalent JPEG or PNG images, which means faster loading times and less bandwidth usage. The ".webp" extension is used for files in this format.

WebP has several advantages over traditional image formats, such as:

- Better compression: WebP can compress images more efficiently than JPEG or PNG without sacrificing quality. Typically 25-34% smaller. This means you can use higher-resolution images with lower file sizes or lower-resolution images with higher quality. With the MajorGeeks logo, the reduction was more than 50% - not too shabby.

- Transparency support: WebP supports alpha channel, which allows you to create transparent images or add effects like shadows and gradients. JPEG does not support transparency, while PNG does but with larger file sizes. This allows you to display content or text to the image you previously would have had a hard time doing.

- Animation support: WebP can also create animated images, similar to GIFs, but with much smaller file sizes and better quality. WebP animations can have up to 256 frames, while GIFs are limited to 256 colors.

- Wide browser support: WebP is supported by most modern browsers, including Chrome, Firefox, Edge, Safari, Opera, and Android. You can also use fallback methods to display WebP images on older browsers that do not support it.

How to create a WebP image?

There are several ways to create and use WebP images on your website.

- You can use online tools like MajorGeeks WebP to PNG, Squoosh or Cloud Convert to convert your existing images to WebP. Desktop software likeVoVsoft WebP Converter(which is great for batch conversion of existing images. and Photoshop or GIMP with plugins if you want to make things a bit more fancy. You can also use command-line tools like cwebp to batch-convert your images.

They all do the same basic thing looking at the format you have given them and creating a new .webp image for you to add to your web document.

Now that you have a .webp file, how do you use it?

To display WebP images on your website, you can use the element, which allows you to specify multiple sources for different image formats and let the browser choose the best one. For example:

HTML
< picture>
< source type="image/webp" srcset="image.webp">
< source type="image/jpeg" srcset="image.jpg">
< img src="image.jpg" alt="Image">
< /picture>

If the browser supports it, this code will display the WebP image or fall back to the JPEG image otherwise. You can apply CSS to the image as you like. If you want to know more, Google is your friend. You can also use the .webp extension in your image URLs. Note: You may configure your server to serve the appropriate image format based on the Accept header of the browser request.

Can I Convert .webp to .jpg or .png?

Yes! WebP is excellent from a development standpoint, but Webp does not play nicely with saving to your PC, using document software, or sharing on a social network. From a user standpoint, it is annoying to want to save a quick image only to find out that the file is .webp.

The good news is converting from WebP to another format is easy -- as long as your software supports it. (My Photoshop CS5 does not. :( )

Here are the top ways.

1) Take a Screen Shot. You likely already know how to take a screenshot . If you see a site that uses WebP to display images and want to copy/save something, fire up your snipping tool WIN++S and copy out what you like. Problem solved.

2) Here's something I don't save often: MS Paint can be your friend here if you download a .webp file. Right-click on it and choose "Open With," then select "Paint" MS Paint supports .webp and can save to many other formats.

3)Save all the .webp you like the use a program like VOVSOFT WebP Converter,to convert them in batch.

4) Use the aforementioned Online tools like Cloud Convert. The drawn back may be size limitations and a good internet connection.

There you have it. Hopefully, you now better understand the new .webp format, why you see more of it, and how to manage/use it in development and your daily life.

Have better ideas? Drop them in the comments below!

comments powered by Disqus