Last week, Shopify made the low-key announcement that the platform now automatically serves WebP images. 

This is big news for developers. Although WebP has been knocking around since 2010, the latest 1.0.0 version has made huge headway this year, enabling developers to create smaller, richer images that speed up your site. 

So, is it time to ditch JPEGs and PNGs? We take a look at what this update means for your website.   

First off, what is WebP? 

WebP is a modern image format developed by Google, designed to provide better lossless and lossy compression for images on the web. 

Here’s a quick overview of what that means for your images: 

Lossy compression: Lossy compression, typically associated with JPEGs, reduces the size of an image by permanently eliminating certain data – which means the images load much faster post-compression. However, you also lose some of the image’s quality. And the more times the same image is compressed, the more unrecognisable it becomes. 

Lossless compression: Unlike lossy, lossless compression uses exact matching to place data points in their specific places, meaning it reduces an image’s size without sacrificing the quality. While lossless compression makes your images look better, it also results in much larger file sizes when compared to lossy compression, which can massively impact your site’s load time. Lossless image formats include WebP and PNG, as well as some newer JPEG formats like JPEG 2000.

Where do WebP images fit into this? WebP seamlessly combines the best features of all other image formats (JPEG, PNG and GIF). WebP images are around 30% smaller than JPEG files, without the dramatic gap in quality. Like PNGs, they also support transparency, along with the ability to be animated images like GIFs. In other words, WebP is nothing short of magic. 

But does that mean it’s time to ditch your standard image formats? Here’s a closer look at how WepP images compare to JPEGs and PNGs. 

WebP vs JPEG

If you use a content management system that supports WebP – like Shopify – then WebP is almost always the better choice. 

WebP offers 25-34% smaller file sizes than JPEGs, with an equal or even slightly better structural similarity (SSIM) quality index. One of the only downsides to using WebP images is that not all browsers support the format yet – meaning some will load a JPEG version of the image instead. However, for people using compatible browsers like Chrome, having WebP images will make your site noticeably faster. 

WebP vs PNG

Although larger than JPEG files, PNG is often chosen over JPEG because PNG supports transparency, allowing you to make one colour of the image transparent. You can also control the opacity of the image, giving designers the freedom to create a consistent design across your site. 

WebP also supports transparency, making it just as flexible as PNG. Aside from that, it also offers 26% smaller file sizes with the exact same quality, meaning WebP images load faster than PNG images. 

Similarly to JPEGs, there’s almost no downside to opting for WebP images over PNGs. It all depends if your CMS supports the format. 

Which brings us to compatibility. How compatible are WebP images currently? 

Compatibility 

For all the benefits of WebP images, they’re not yet universally compatible in the same way PNG and JPEGs are.

As of July 2019, if your site is powered by Shopify, your website now automatically supports WebP images. However, if you’re using a platform like Wordpress or Magento, you’ll need to install a plugin that lets you support WebP images. 

WebP is also only currently supported by certain browsers, including Chrome, Firefox, Edge and the Opera browser. Standard Shopify themes automatically fall back to a JPEG format in unsupported browsers, but if you’re using a custom Shopify theme or a different system altogether, you may need to set a fallback manually. 

The future of WebP images

Despite the fact that they’ve been around for almost a decade, there’s still some work to do before WebP formats are natively supported across the web. However, with their ability to perform like a JPEG, PNG and GIF at a much smaller file size, we’ll likely be seeing a lot more of WebP over the next couple of years. 

Images are one of the most common reasons for slow sites, so this is a huge step forward in making the internet a faster place to be. If you’re on Shopify, it’s worth considering adopting WebP images as a way of speeding up your website. 

To find out more about WebP images, Google has a whole host of support available. To learn more about using WebP on Shopify, check out their announcement post here.