We’ll cover the following:<\/p>\n
- \n
- What are Next-Gen Images?<\/a><\/li>\n
- What is WebP?<\/a><\/li>\n
- Free WebP<\/a><\/li>\n
- How to Add WebP Images to WordPress<\/a><\/li>\n
- Converting Images to WebP for WordPress<\/a><\/li>\n
- Converting WebP Images in Bulk for WordPress<\/a><\/li>\n
- How to Serve Images in Next-Gen Formats<\/a><\/li>\n
- How to Serve Next-Gen Images Using Smush Pro<\/a><\/li>\n<\/ul>\n
What are Next-Gen Images?<\/h2>\n
GIFs were invented in 1987. The first JPEG standard was issued in 1992 and PNG became a\u00a0W3C\u00a0Recommendation in October 1996.<\/p>\n
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?<\/p>\n
Enter the next generation of image formats<\/a>. 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.<\/p>\n
WebP is the leanest<\/a> and typically achieves 30% more compression than JPEG and JPEG 2000, so that’s the format we’re going to focus on today.<\/p>\n
What is WebP?<\/h2>\n
WebP is Google’s open source image format. They utilize the file extension .webp<\/p>\n
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<\/a>. Lossy WebP images also support transparency, which is something JPEGs can’t do.<\/p>\n
The other is the WebP lossless format, which is similar to the PNG image format, but with a 26% smaller file size<\/a>.<\/p>\n
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<\/em> simplify. If that doesn’t spark joy, nothing will.<\/p>\n
\n![\"diagram](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/02\/Infographic.png\")
Here’s a quick functionality recap<\/figcaption><\/figure>\n<\/div>\n WebP support the following:<\/p>\n
- \n
- Animation<\/li>\n
- Lossless compression<\/li>\n
- Lossy compression<\/li>\n
- Alpha channel transparency<\/li>\n<\/ul>\n
This means you can convert PNGs, GIFs, and JPEGs into one convenient format to reap the performance benefits.<\/p>\n
For a head-to-head comparison of different file formats, check out this post<\/a>. Don’t forget to get the downloadable cheat sheet<\/a> while you’re at it.<\/p>\n
Free WebP<\/h2>\n
Now the bad news. Not all browsers support WebP images yet<\/a>. But this is a comeback story remember?\u00a0Mozilla jumped onboard December 2018<\/a>, 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.<\/p>\n
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.<\/p>\n
\n![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/Google-Pagespeed-Insights-Nex-gen.png\")
Real subtle<\/figcaption><\/figure>\n<\/div>\n In fact, if you’ve used Google PageSpeed Insights<\/a> recently, you may have noticed the “Serve images in next-gen formats<\/a>” 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<\/a>.)<\/p>\n
How to Add WebP Images to WordPress<\/h2>\n
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<\/a>.\u00a0WordPress.com does allow WebP images<\/a> and you can enable this feature on your self-hosted WordPress site too.<\/p>\n
\n![\"Failed](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/failed-to-upload-webp.png\")
Sorry, not sorry<\/figcaption><\/figure>\n<\/div>\n 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:<\/p>\n
- \n
- Use a WebP converter to convert existing images in your media library to WebP as well as future uploads<\/li>\n
- Be able to determine if the visitor’s browser supports WebP images<\/li>\n
- Serve WebP images if they are supported or a legacy file format like PNG or JPEG if it isn’t<\/li>\n<\/ol>\n
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<\/a> that can convert your images to WebP in WordPress and serve them up to compatible browsers with the flip of a couple switches.<\/p>\n
Converting Images to WebP for WordPress<\/h2>\n
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.<\/p>\n
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<\/a>. You’ll simply upload your JPEG, PNG or GIF file, wait for it to create a WebP, and then download your new image.<\/p>\n
\n![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/online-convert-webp.png\")
One down, one thousand to go<\/figcaption><\/figure>\n<\/div>\n In version 23.2, Adobe Photoshop introduced native support for WebP<\/a> , meaning you can now open, create, edit, and save WebP files without a third-party plugin, extension, or preference setting.<\/p>\n
You can also download and install WebPonize for Mac<\/a>\u00a0or WebP Converter<\/a> (Windows, MacOs, Linux). Both can do JPEG to WebP or PNG to WebP conversions.<\/p>\n
For WebP WordPress images you can use SFTP to upload WebP files<\/a> directly to your uploads folder, thereby bypassing the media library.<\/p>\n
For the sake of convenience, you can also allow WebP in the WordPress media library<\/a> by modifying your site’s functions file.<\/p>\n
Converting WebP Images in Bulk for WordPress<\/h2>\n
If you have an established site with lots of images to convert, you’re going to need a better tool so you can convert images to next-gen formats in bulk.<\/p>\n
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\u2019t 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.<\/p>\n
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.<\/p>\n
We’ll go over how to configure the Smush Pro CDN later in this post<\/a>.<\/p>\n
You can also use the command line. See this tutorial<\/a>.<\/p>\n
How to Serve Images in Next-Gen Formats<\/h2>\n
- \n
- Use JS to Detect Support for WebP<\/a><\/li>\n
- Use Browser to accept headers<\/a><\/li>\n
- Modify .htaccess file in WP<\/a><\/li>\n
- Serve with HTML5<\/a><\/li>\n<\/ol>\n
Some image optimization<\/a> 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.<\/p>\n
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.<\/p>\n
1. Use JavaScript to detect support for WebP<\/h3>\n
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<\/a>.<\/p>\n
You can also use a JavaScript library such as Modernizer<\/a> that detects WebP support<\/a> in much the same way.<\/p>\n
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.<\/p>\n
2. Use browser accept headers<\/h3>\n
The visitor’s browser will send an “accept” request header, indicating what image formats it will accept from the web server (love, Firefox<\/a>).<\/p>\n
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.<\/p>\n
If the browser indicates that it will accept WebP images, the web server knows it can send WebPs safely.<\/p>\n
This is the method the Smush Pro CDN uses to detect which browsers will accept WebP images.<\/p>\n
3. Modify the Hypertext Access (.htaccess) file in WordPress<\/h3>\n
So your .htaccess file is located in your root directory and it’s a unique file for several reasons:<\/p>\n
- \n
- It starts with a dot (.) meaning it’s a hidden file. You won’t see it if you haven’t made hidden files visible<\/li>\n
- It doesn’t have a file extension<\/li>\n
- If you make a mistake editing it, your server may severely malfunction, so only edit it if you know what you’re doing!<\/li>\n<\/ol>\n
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.<\/p>\n
\n![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/htaccess.png\")
This is what a .htaccess file in WordPress usually looks like<\/figcaption><\/figure>\n<\/div>\n In Vincent Orback’s code on GitHub<\/a> 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.<\/p>\n
4. Serve multiple sizes and formats with HTML 5<\/h3>\n
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><\/code> element to communicate the different images that are available for the browser to choose from<\/a>. Not only can you use the<picture><\/code> element to offer different image formats, but also different sizes for mobile and retina devices. Check out this cute example<\/a>.<\/p>\nWhile the HTML of an image will look something like this:<\/p>\n
<img src=\"image.jpg\" alt=\"my image\" width=\"100\" height=\"100\" \/><\/code><\/p>\nThe
<picture><\/code> element has a lot more going on:<\/p>\n<picture><\/code>
\n\u00a0 <source srcset=\"image.webp\" type=\"image\/webp\"><\/code>
\n\u00a0 <source srcset=\"image.jpg\" type=\"image\/jpeg\"> <\/code>
\n<img src<\/strong>=\"image.jpg\" alt=\"my image\" width=\"100\" height=\"100\"><\/code>
\n<\/picture><\/code><\/p>\nSee how the
<img><\/code> is nested within the<picture><\/code> element? Browsers that don’t support WebP images will fall back to the image specified in the<img><\/code> element. In fact, the<img><\/code> is a requirement (or the image will fail to render) and must appear last.<\/p>\nHow to Serve Next-Gen Images Using Smush Pro<\/h2>\n
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.<\/p>\n
gjBv2YfTwCU<\/span><\/span><\/p>\n
First, you’ll need to activate the Smush Pro CDN. In the Smush settings, go to the CDN section and push the Get Started<\/em> button.<\/p>\n
\n\n\n![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/Smush-Pro-CDN-1.png\")
The Smush CDN is included with Smush Pro<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n After activating the CDN, scroll down to WebP conversion in the CDN settings and enable.<\/div>\n\n\n![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2019\/03\/Enable-WebP-Conversion.png\")
Well that was easy<\/figcaption><\/figure>\n<\/div>\n<\/div>\n That’s it! If you’d like to try out Smush Pro, sign up for a risk-free membership<\/a>.<\/p>\n
Get to Optimizing<\/h2>\n
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.\u00a0It’s only a matter of time before WebP images are the norm, so you might as well get started.<\/p>\n
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.<\/p>\n
If you need help optimizing images, check out our other posts on choosing the right image format<\/a> and scaling images<\/a>. And definitely try out Smush Pro<\/a> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Next-gen image formats like WebP are the future and the present. Learn how to make the leap from older formats like JPEG and PNG. 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 […]<\/p>\n","protected":false},"author":699634,"featured_media":175605,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[1277,4645,16],"tutorials_categories":[],"class_list":["post-175602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-cdn","tag-galleries","tag-images"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/175602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/699634"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=175602"}],"version-history":[{"count":37,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/175602\/revisions"}],"predecessor-version":[{"id":185881,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/175602\/revisions\/185881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/175605"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=175602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=175602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=175602"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=175602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Use Browser to accept headers<\/a><\/li>\n
- Use JS to Detect Support for WebP<\/a><\/li>\n
- What is WebP?<\/a><\/li>\n