Blog

In fact, there are so many acronyms that keeping track of them can be complicated – never mind figuring out which is the best image format to use on your website. This guide will explore the advantages of JPEG vs PNG vs GIF. Good article, but I do think it skips over the most important part, which is savings vs quality. The example of the small thumbnail is very beneficial to webp, indeed the size is smaller and you can’t really see any difference. This is probably your best bet for the broadest possible compatibility because it will work in every single browser, not just those that support the element.

For ecommerce, speed is even more important, with conversion dropping by 0.3% for every second of added load time. The HTTP archive’s studies show the average weight of a desktop webpage has ballooned from 523 kilobytes in 2011 to 2196 kilobytes in 2021. A bigger website means longer loading times, and web users as a whole tend to be impatient. You may have heard about design mistakes killing your SEO and conversion rates. While there are some aspects that CSS or JavaScript are responsible for, like blocking rendering, the images nowadays are a huge part of any website’s weight.

Right-click on the WEBP image and select the new option Save Image As PNG. That’s it, now you can save the image in PNG format. Open the webpage containing the image you want to save using a browser that doesn’t support WebP. The browser will show the JPEG or PNG version of the image, and you can save it as usual. Alternatively, if you’re looking for a manual approach, use Photon API. It converts your JPEG and PNG images into whichever file format you want – including WebP.

What is the future for WebP?

If you open YouTube in Google Chrome, all of those thumbnails are going to be WebP thumbnails. If you were to open the Facebook app on your android phone, all of the images that you see would be WebP. It’s definitely being utilized by various companies https://xcritical.com/ around the world to increase performance. The only reason that it hasn’t completely overtaken other image formats is due to compatibility — more on that later. One of the downsides of WebP is that the format is not supported by every browser.

• Once you’ve activated the plugin, you can use the General Settings box to choose your compression level.
• By default most of the options that you need are already set up for you.
• A final obstacle lies in the compatibility of shifting using WebP with content management systems like WordPress.
• However, around 5% of people use a web browser that doesn’t support WebP.
• This is important when working with high-resolution images that must be displayed at high fidelity.
• It is your choice to use an older unsupported version of Photoshop.

Firstly, know that Chrome is the most popular browser with a 64% market share. So it’s highly likely that most of your site visitors will be able to view any WebP images on your site. WebP’s lossless compression uses already seen image fragments to reconstruct new pixels and can use a local palette if no match is found. WebP is already considered a widely adopted standard.

Goodbye templates and code — design your store visually. Get the best, coolest, and latest in design and no-code delivered to your inbox each week. WebP is just one of the tools you can add to your website building expertise. Building for the web is ultimately about crafting an excellent user experience.

Ditte Hammarström has a long background as Art Director, both in her homeland of Sweden as well as internationally. She loves user-driven design and feels good when helping entrepreneurs to succeed online. Ditte is one of the founders of the Snowfire design community where marketers, designers and developers can work together in growing their business on the Snowfire platform.

The WebP Lossy Configuration DialogueThe settings dialogue for lossy WebP gives more flexibility for configuring the output. You can adjust the image quality by using a slider from 0 to 100 , set the strength of the filtering profile to get lower file sizes and adjust noise filtering and sharpness. WebP images are a great option to have because they can be subjected to either lossy or lossless compression. In both cases, they provide superior compression but without the proportionate loss in quality when compared to PNG and JPG files.

Using WebP images can make your site faster

PNG-24 is more like a JPEG, but at a significantly larger file size. But the image quality of PNG-24 is excellent, even when zoomed in, which makes it ideal for ecommerce photos as well as screenshots or images with text. The lossless compression of PNG image files is possible. They preserve the sharpness of complex graphics like maps, iconography, and floorplans. Also, PNG files keep their transparency, which is important when putting things on top of each other. With the free WebP Express plugin, you can serve auto-generated WebP images to browsers that support WebP while still serving JPEGs/PNGs to Safari users.

I develop my side projects on a Macbook Pro at home, and I use a Windows machine at work, so I have a good balance between the two environments on a daily basis. But one place where this practice seems to be ignored are situations where an image has to expand indefinitely to cover some area, like a large hero. In fact, swapping out CSS backgrounds with webp vs png responsive object-fit elements on my client’s site was what made the single biggest impact in terms of overall page size. This would have been the case even without WebP being involved in that chunk, though WebP inched it along that much further. The markup is a bit annoying and a polyfill had to be rewritten and tested, but the payoff was worth it.

How to Set Up Autoptimize for Your WordPress Site

This option works on any images on your site, including those in the media library, galleries, and themes. A semi-compatible successor to JPEG, JPEG XL seems most likely to eventually fill the role of the universal online image format. JPEG XL provides improved quality for the same file size compared to HEIC and AVIF, among other benefits.

You can use Smush to compress PNG and JPG files or to convert these into WebP files. Imagify is a free image optimization plugin, and one we recommend for converting your images to WebP. Squoosh is a Google app that’s simple and visual to work with. Upload your image and view the compression in real-time. There are lots of different formats to choose from, including WebP ;). WebP images are smaller than their JPEG and PNG counterparts—usually on the magnitude of a 25–35% reduction in filesize.

Kinsta Review: A Game Changing Option for WordPress Website Hosting

With Chrome on board, we could see supported browsers jump to something like 70% of all browsers which means AVIF would be a pragmatic thing to support in web projects. I think AVIF is a really exciting development and compared to WebP it seems like a true next-generation codec with about 30% better compression ratio compared to libjpeg. Only concern I have is the excessive blurring of low detail areas. It remains to be seen if this can be improved when more advanced tooling becomes available. This is especially noticeable with the red window shutters in this image. The Imagemin WebP plugin can be used by itself or with your favorite build tool (Webpack/Gulp/Grunt/etc.).

Use coupon code csstripc to save 38% off it, or any other Manning book. You just learned how to progressively use WebP images. Those with JavaScript turned off will get PNG or JPEG images.

Online websites

As part of its feature list, ShortPixel can also help you automatically convert images to WebP and serve those images to browsers that support it. However, around 5% of people use a web browser that doesn’t support WebP. If you convert WebP images and use them directly in your content, those visitors wouldn’t be able to see your images, which would ruin their browsing experience. We were quite excited to discover that there is a Photoshop plugin for the WebP support. This makes it easy to dial in quality settings for WebP images.

This is right on the absolute tipping point of artifacts. Note that the type of images were photographs of people using the product. Still we’re using this pretty low quality level even on large masthead images without complaints. If you look at the JPEG quality level vs file size charts, 60% is quite the optimum.

JPG vs PNG vs WEBP: Which Image Format is Best for WordPress

Higher image quality—with WebP there is no need to sacrifice image quality for faster loading. Build a responsive website that works well across mobile and other devices. Make sure your images are sized to load well on mobile devices, especially since mobile browsers are more likely to be working with slower connection speeds. Choose hosting for your website that’s not only fast, but reliable.

JPEG stands for Joint Photographic Experts Group and was designed to be used for photos. As the standard file format for most consumer digital cameras and cell phones, you’ll pretty much find it everywhere. You can compromise by displaying fewer images or showing them all at a smaller size. Less media storage—WebP’s enhanced compression also means less storage space.

WebP lossy images files are 25% to 34% smaller than JPEG images at an equivalent structural similarity index. At our company, we always experiment with techniques that improve website performance. So, we ran a few A/B tests to understand WebP’s impact on image quality and how best to implement it in our clients’ projects. On most sites, either JPEGs or PNGs make an excellent choice for the bulk of your images (although it’s best to stick with one over the other for consistency’s sake). As for GIFs, you’ll want to reserve those for situations when you need to display animations.

You want to know something that will blow your mind? The animated GIFs on Twitter aren’t even GIFs anymore! Social networks such as Medium, Tumblr and Facebook don’t allow SVGs either. You can get around this limitation by serving up the PNG or JPEG equivalent for visitors who use a browser without support for WebP. Wouldn’t it be great if you could combine the best of PNGs and JPEGs?