Just when everyone thought WebP images were done, they came back in a big way. WebP images are smack in the middle of their comeback story, now that Firefox and Microsoft Edge have recently started supporting WebP images.
What is WebP? It’s is the best image format that no one has heard of, but that’s about to change.
In this post, I’m going to show you how to start using WebP images on your WordPress site. We’ll go over how to convert your images to WebP and how to serve them up for compatible browsers. I’ll also show you how Smush Pro can take care of this for you if you don’t want to get into your site code.
What are Next-Gen Images?
GIFs were invented in 1987. The first JPEG standard was issued in 1992 and PNG became a W3C Recommendation in October 1996.
I know the 90s doesn’t feel like that long ago, but it’s been almost 30 years and we’re still using the same image formats! Isn’t it time for an upgrade?
Enter the next generation of image formats. JPEG 2000, JPEG XR, and WebP are modern image formats with superior compression capabilities and with outstanding quality to please the web natives. This means they produce much smaller image files so you can greatly improve your page speed by using next-gen formats.
WebP is the leanest and typically achieves 30% more compression than JPEG and JPEG 2000, so that’s the format we’re going to focus on today.
What is WebP?
WebP is Google’s open source image format. They utilize the file extension .webp
There are several variations of WebP images, one uses lossy compression and is comparable to JPEG images, but with a 25-34% smaller file size. Lossy WebP images also support transparency, which is something JPEGs can’t do.
The other is the WebP lossless format, which is similar to the PNG image format, but with a 26% smaller file size.
WebP images are also versatile because they have the capabilities of GIFs, JPEGs, and PNGs in a single format. You’ll be able to optimize and simplify. If that doesn’t spark joy, nothing will.
WebP support the following:
- Animation
- Lossless compression
- Lossy compression
- Alpha channel transparency
This means you can convert PNGs, GIFs, and JPEGs into one convenient format to reap the performance benefits.
For a head-to-head comparison of different file formats, check out this post. Don’t forget to get the downloadable cheat sheet while you’re at it.
Free WebP
Now the bad news. Not all browsers support WebP images yet. But this is a comeback story remember? Mozilla jumped onboard December 2018, so just a few months ago, and gave WebP images some much-needed momentum. Now we’re mostly waiting on Safari, although Internet Explorer and Firefox for Android are also not supporting WebP yet.
Still, with a behemoth like Google committed to making the web faster and backing the project, it’s a pretty safe bet that WebP images are the future.
In fact, if you’ve used Google PageSpeed Insights recently, you may have noticed the “Serve images in next-gen formats” opportunity message. That’s Google’s way of nudging you to adopt WebP images. (If you get a “properly size images” message in Google PageSpeed Insights, try scaling your images.)
How to Add WebP Images to WordPress
If you want to be an early adopter and use WebP images in WordPress, you’ll also notice the WordPress media library does not allow you to upload WebP images for security reasons. Don’t let that scare you. This isn’t an SVG situation. WordPress.com does allow WebP images and you can enable this feature on your self-hosted WordPress site too.
There are multiple ways to get around these early adoption issues in WordPress so you can start using WebP images. To do so, we’re going to need a solution that will:
- Use a WebP converter to convert existing images in your media library to WebP as well as future uploads
- Be able to determine if the visitor’s browser supports WebP images
- Serve WebP images if they are supported or a legacy file format like PNG or JPEG if it isn’t
Spoiler alert, if you don’t want to go through all these steps and go through the trouble of modifying your site files and optimizing your images, Smush Pro is an all-in-one solution that can convert your images to WebP in WordPress and serve them up to compatible browsers with the flip of a couple switches. You can get a free trial so you can test the performance benefits, right here.
Converting Images to WebP for WordPress
While you could convert your images to next-gen formats before uploading to your WordPress Media Library, this isn’t practical if you have a lot of images.
If you do need to go that route (maybe you want to test the performance of different image types) you can use a WebP converter such as image.online-convert.com/convert-to-webp. You’ll simply upload your JPEG, PNG or GIF file, wait for it to create a WebP, and then download your new image.
Adobe Photoshop doesn’t export files in WebP by default, but you can add this functionality with a plugin. This isn’t the same thing as a WordPress plugin. This is a plugin that you download and add to the Adobe Photoshop folder on your computer.
You can also download and install WebPonize for Mac or Webpconv for Windows. Both can do JPEG to WebP or PNG to WebP conversions.
For WebP WordPress images you can use SFTP to upload WebP files directly to your uploads folder, thereby bypassing the media library.
For the sake of convenience, you can also allow WebP in the WordPress media library by modifying your site’s functions file.
Converting WebP images in bulk for WordPress
If you have a mature site with a lot of images to convert, you’re going to need a better tool so you can convert images to next-gen formats in bulk.
You can use a plugin such as Smush Pro to serve WebP versions of all your images with her CDN. Smush leaves your original images untouched and does the conversion before delivering the image. This means Smush Pro’s CDN doesn’t directly modify your images or harm them in any way. If you turn off the webp conversion option, the server will no longer convert your images to WebP and your site will go back to using the original file format it had when uploaded.
Smush Pro also gives you the option to convert images in other folders too so you can optimize your theme’s image backgrounds and icons, for example.
We’ll go over how to configure the Smush Pro CDN later in this post.
You can also use the command line. See this tutorial.
How to Serve Images in Next-Gen Formats
- Use JS to Detect Support for WebP
- Use Browser to accept headers
- Modify .htaccess file in WP
- Serve with HTML5
Some image optimization plugins only convert your images to the WebP format, but don’t take responsibility for serving the right image to your visitors. For that, you may have to utilize an additional plugin or take one of the steps below.
Smush Pro, takes care of both, converting to WebP format within WordPress and serving it to compatible browsers so you can skip all this nonsense.
1. Use JavaScript to detect support for WebP
You can do this by writing your own custom code that attempts to decode a WebP image. If the test is successful, you can then send additional WebP images. Here’s one way to do it.
You can also use a JavaScript library such as Modernizer that detects WebP support in much the same way.
Testing the browsers actual capabilities also saves you the additional work of having to rewrite your code once incompatible browsers start supporting WebP. So for example, once Safari supports WebP images and passes your WebP decoding test, Safari users will receive WebP images without you having to rewrite your code logic to include Safari.
2. Use browser accept headers
The visitor’s browser will send an “accept” request header, indicating what image formats it will accept from the web server (love, Firefox).
If you’ve ever placed a food order with a friend, you’ve done something similar when you tell them to bring you back some pasta, but nothing with shrimp because you’re allergic. In this analogy, your friend is the server and you are the browser who specifies what you will accept.
If the browser indicates that it will accept WebP images, the web server knows it can send WebPs safely.
This is the method the Smush Pro CDN uses to detect which browsers will accept WebP images.
3. Modify the Hypertext Access (.htaccess) file in WordPress
So your .htaccess file is located in your root directory and it’s a unique file for several reasons:
- It starts with a dot (.) meaning it’s a hidden file. You won’t see it if you haven’t made hidden files visible
- It doesn’t have a file extension
- If you make a mistake editing it, your server may severely malfunction, so only edit it if you know what you’re doing!
In WordPress, this file is commonly used to rewrite URLs. In this case, the URL of the image is changed and a .webp extension is added.
In Vincent Orback’s code on GitHub for example, the .htaccess file is modified. JPEG and PNG image URLs are modified if there is a WebP version within the same folder and if the browser supports WebP. The responsibility of serving the right image, in this case, falls on the Apache web server.
4. Serve multiple sizes and formats with HTML 5
One of the better ways to serve WebP images is by relying on the browser to choose the best image and using the HTML5 <picture> element to communicate the different images that are available for the browser to choose from. Not only can you use the <picture> element to offer different image formats, but also different sizes for mobile and retina devices. Check out this cute example.
While the HTML of an image will look something like this:
<img src="image.jpg" alt="my image" width="100" height="100" />
The <picture> element has a lot more going on:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="my image" width="100" height="100">
</picture>
See how the <img> is nested within the <picture> element? Browsers that don’t support WebP images will fall back to the image specified in the <img> element. In fact, the <img> is a requirement (or the image will fail to render) and must appear last.
How to Serve Next-Gen Images Using Smush Pro
If this is over your head, there is an easier way to do convert your images to WebP and serve them to compatible browsers using Smush Pro.
First, you’ll need to activate the Smush Pro CDN. In the Smush settings, go to the CDN section and push the Get Started button.
That’s it! If you’d like to try out Smush Pro risk-free, sign up for a free trial.
Get to Optimizing
Being a trailblazer isn’t without its challenges, that’s why we’ve made it easy to get started with WebP without all the drama. It’s only a matter of time before WebP images are the norm, so you might as well get started.
Bloated images are often responsible for dragging your page speed down. Your visitors expect big beautiful images that are clear on their massive Retina devices, and also want them to load instantly. WebP images can help you meet that high bar.
If you need help optimizing images, check out our other posts on choosing the right image format and scaling images. And definitely try out Smush Pro if you haven’t already. We’ve added a lot of new features, like support for WebP so you can stay on the cutting edge of image optimization.