Why WebP Is The Rockstar of Image Formats for Web Designers

As we’ve covered on this blog before, when it comes to page weight, size matters. After all, the smaller the file size of a web page, the faster it’s going to load. If you have images in a non-WebP format, you will need an image converter. There are plenty to choose from, and most succeed at the basic task of converting a file to WebP. The oldest converter, and one that is still very useful for batch processing or fine-tuning, is Google’s WebP converter cwebp. Though so many tools support WebP, JPEG is still the most popular image format on the web.

Transparency is essential when you need to show any image above a certain element or graphic. Please do support lazyloading for webp images as well. Just because Apple doesn’t support WebP doesn’t mean you shouldn’t use the format. It’s possible to deliver WebP files to visitors who use supported browsers while displaying JPEGs and PNGs as a fallback to Safari users. The increased loading speed from using smaller image files positively affects site ranking in search engines like Google.

PNG supports transparency, which is a critical element of web design. Transparency lets you structure images so that they don’t conflict with each other while retaining a consistent design framework on your website. WebP is making headway in the image format space this year. The image format — which is developed by Google — uses both lossy and lossless compression by utilizing technology that Google purchased from On2 Technologies. At first glance, there is little quality loss when an image is converted to WebP format.

What is WebP? Google’s Web Image Format Explained

Bandwidth is the rate at which the server can transfer data to end-users within a specific time. WebP can free up bandwidth, allowing websites to offer more content. This is especially important for websites with many images, like food, travel, or photography blogs. If you use a Mac, you can download and install the WebpConverter app via the Mac App Store to batch convert WEBP images to the JPG or PNG formats. IrfanView is an incredibly lightweight and fast graphics viewer that allows you to batch convert images. It supports the WEBP format so long as you also install the IrfanView All Plugins pack.

So, in many cases, the advantage is far smaller than 30%, which leaves me to wonder…why bother? Those commands are subject to the usual r/w/x permission restrictions imposed by the file system, but that’s about it. I haven’t updated anything with that plugin in over two years so I think this is a good time to revisit it. No, @supports only checks if the CSS engine supports a given property/value pair . Jeremy Wagner is the author of Web Performance in Action, an upcoming title from Manning Publications.

Results for 500px images

It automatically inserts all images on a site with WebP and jpg/png fallback. Google’s web performance team promises WebP lossless images 26% smaller than https://xcritical.com/ PNGs and WebP lossy images 25-34% smaller than JPEG images. So I did some comparison tests to see the differences in size that could be achieved with WebP.

You will be prompted to create an account , after which, you will be sent an API key. Still, you’re going to need a way to deal with browsers that haven’t yet caught on to this development. There are several ways to get around this as you will see shortly.

How to Use WebP Images on WordPress

However, a minority of browsers, notably Safari on older macOS versions, still don’t offer WebP support. Hence, you cannot serve WebP images to all visitors yet. With lossy compression, WebP uses something called “predictive coding” to lower the file size. Predictive coding uses the values of neighboring pixels in an image to predict values and then only encodes the difference. WebP is an image format that was created in 2010 and is currently being developed by Google.

WebP is natively supported in Chrome, Opera, Opera Mini, the Android browser and Chrome for Android. Firefox, Internet Explorer and Safari don’t have native support, although Firefox has quite a history with WebP. Luckily, there are a few workarounds for the lack of browser support. We’ll talk about what makes each of these image types unique in a moment.

I also tested the new AVIF format, based on the open AV1 video codec. AVIF support is already in Firefox behind a flag and should be coming soon to Chrome if this ticket is to be believed. As ideal as it may be, it is still not supported by many image editors and online submission forms. I personally have to deal with WEBP images often in my work, and so I have found many ways to save WEBP images to JPG or PNG with each having its own advantage. In this post, I am going to share my findings with you.

The Optimal File Size is the Smallest Possible

When it comes to other software, not all of them support the WebP format. Some image viewers and image editing tools can’t open WebP files. For example, Adobe Photoshop doesn’t support it by default. To edit a WebP file on Adobe Photoshop, you need to install the WebPShop plugin first. Bandwidth is the rate at which your server can transfer data to your end-users within a specific time.

The main advantage of JPG over WebP is that it is supported by all browsers. Primarily designed for the Internet and is less useful for viewing images offline. Define your own content structure, and design with real data. Use Webflow’s visual development platform to build completely custom, production-ready websites — or high-fidelity prototypes — without writing a line of code. Transparency is especially useful when designing websites. It allows you to create uneven borders on a shape and see the background behind the shape, for example, with the Webflow logo below.

When choosing an image format, keep the audience and application in mind. ECommerce websites typically employ JPG photos in the smallest sizes since they need to load quickly. On a professional photographer’s portfolio website, larger, high-quality photographs work best. Save your photographs as “.JPG” when they are filled with gradients, colors, textures, and shadows. The JPG format makes sure there is no time lag, and if you have an online shop, the pages that are full of products load quickly.

Is WebP really better than JPEG?

The average webpage is presently near 2MB so you want to stay under that limit to have a relatively fast site. This means you have to look at the total of all the assets on your site, not just images. So webp vs png in this guide, we explain everything you need to know, what it is, how to use it and why you should care. We’ll explain the WebP pros and cons and then show you how to convert your other image formats.

• I also tested the images in “Web quality” target of 85 so WebP may perform differently in very high or very low-quality settings.
• This format suits images that have a lot of pixels, like text-heavy infographics.
• Save your photographs as “.JPG” when they are filled with gradients, colors, textures, and shadows.
• The lossless compression of PNG image files is possible.
• This doesn’t mean that you have to choose between a faster website or serving unappealing content to readers who use unsupported browsers.
• Generally, if you are using a CDN, it will cache your website’s content and serve it to users faster and more efficiently.

WebP offers a better all-around package than JPEG as an image format. The only downside to WebP in this battle is that not all browsers can load WebP so some will load that JPEG file instead. Lossy compression creates images that are approximately the same which reduces the file size post-compression.

The image below shows which browsers support and which do not support WebP. As can be seen in the image, there are also browsers who partially support the new format. With that said, throughout the years more and more browsers are supporting WebP, this is also why the format has gained more popularity. Now, 94.08% of the total users on the internet can see WebP images. When using WebP images, it’s important to know which browsers your users mainly use. WebP images are a by Google created image format especially meant for web use.

Why All of You Need to Know About the WEBP Image Format?

Lossy compression reduces file size, but at the expense of possibly reducing image quality. WebP is a compact, modern image format that you can use to serve high-quality images that are a smaller file size than traditional formats like JPEG and PNG. With smaller images, your site loads faster and ranks better on SEO without compromising your site’s image quality. WebP essentially combines the features of all other image formats together in a surprisingly seamless way. WebP offers file sizes that are around 30% smaller than JPEG without a quality gap.

Transforming the design process at

It is your choice to use an older unsupported version of Photoshop. The fault is not the software… its your choice to use older versions, if you want WebP support upgrade. That stellar performance, combined with the vote of confidence from Google, really paves the way for WebP becoming the new default web file format. Once you know the purpose of the image, choosing between PNG and JPG formats becomes easy.

Additional image file capabilities , unnecessary detail and too many colors all add bloat to your images. Sometimes, these are necessary and other times they’re not. If your image doesn’t have transparency, for example, then you’re really not giving anything up if you choose an image type that doesn’t support transparency. JPG is a picture format that uses lossy compression to store images. Most of the time, lossy compression results in large file size reductions and insignificant changes to image quality. JPG is, therefore, perfect for photos and particular pictures for website upload.

If you choose JPEG, use the Quality slider to determine the level of compression that goes into the conversion. Alternatively, you can save any JPG or PNG image in the WEBP format by selecting the Save as WEBP option. How to enable WordPress WebP images in ImagifyAs with ShortPixel, if you’re hosting at Kinsta, you’d need to create an Nginx rule for WebP cache buckets . So if you need to optimize lots of large images, ShortPixel’s approach might be cheaper. But if you need to optimize lots of small images, Imagify’s approach might be more affordable.