You told us that…<\/p>\n
- \n
- If you’re happy without a CDN, you don’t want to have to use one just for WebP support.<\/li>\n
- You were also conscious that using Smush Pro’s CDN to serve images uses precious bandwidth – which might not be ideal for larger sites.<\/li>\n<\/ul>\n
So, like any good company who actually listens to their audience, we’ve obliged, and made our award-winning image optimization plugin – even better!<\/p>\n
Read on to find out the in’s and out’s of Smush Pro’s game-changing new feature.<\/p>\n
Here’s a quick overview if you want to skip to a particular section:<\/p>\n
- \n
- Activating Local WebP on WPMU DEV Hosted Sites<\/a><\/li>\n
- Enabling Local WebP Conversion on Third-Party Sites<\/a>\n
- \n
- Apache Server Configuration<\/a><\/li>\n
- NGINX Server Configuration<\/a><\/li>\n<\/ul>\n<\/li>\n
- How to Check Your Image Format<\/a><\/li>\n<\/ul>\n
Activating Local WebP on WPMU DEV Hosted Sites<\/h2>\n
First things first – the latest version of Smush Pro needs to be installed on your site.<\/p>\n
You can then head into the WebP settings.<\/p>\n
\n\n![\"Smush](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/localwebp-notice.png\")
Non-CDN WebP support is just a few clicks away!<\/figcaption><\/figure>\n<\/div>\n<\/div>\n If you host with us, you\u2019ll be lucky enough to be greeted by this message on the next page:<\/p>\n
\n\n![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/localwebp-setup-1050x451.png\")
If this is the case – you\u2019re all set!<\/figcaption><\/figure>\n<\/div>\n<\/div>\n Everything is automatically configured for you, and all that\u2019s left to do is run a Bulk Smush<\/a> so that your images are converted.<\/p>\n
From this page you can also see the supported media types, as well as delete all your WebP images.<\/p>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/localwebp-settings.png\")
It\u2019s quick and easy to delete your WebP files if you change your mind.<\/figcaption><\/figure>\n So let\u2019s get to the nitty gritty – what if your site is not hosted with WPMU DEV?<\/p>\n
You have two options.<\/p>\n
- \n
- Switch to one of our awesome (and affordable!) hosting plans<\/a>.<\/li>\n
- Follow our step-by-step configuration guide below.<\/li>\n<\/ol>\n
How To Enable WebP Conversion On Non WPMU DEV Hosted Sites<\/h2>\n
Smush will try to automatically detect the type of server your site uses.<\/p>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/server-type.png\")
Smush will try to detect whether your site is running on an Apache\/Litespeed or NGINX server.<\/figcaption><\/figure>\n If the detected type is incorrect, you can change it manually using the dropdown box.<\/p>\n
Apache Servers<\/h3>\n
If your server type is Apache<\/strong>, try the Automatic<\/strong> method first.<\/p>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/apply-rules.png\")
Click the Apply Rules<\/strong> button.<\/figcaption><\/figure>\n This will automatically add the needed server rules.<\/p>\n
If the Automatic method does not work, you can switch to the Manual option and add the displayed rules to your .htaccess<\/em> file yourself.<\/p>\n
Smush talks you through what you need to do.<\/p>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/local-webp-manual-rules.png\")
Follow these instructions within Smush to manually configure the settings.<\/figcaption><\/figure>\n If neither of these methods are successful, you’ll be provided with a list of troubleshooting tips – and of course our 24\/7 superhero support team is always on hand if you need extra help.<\/p>\n
NGINX Servers<\/h3>\n
If your server type is NGINX, the required rules must be added manually to your configuration file.<\/p>\n
Smush provides clear instructions on how to do this.<\/p>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/emable-conversion-nginx.png\")
Follow the steps within Smush to configure your NGINX server manually.<\/figcaption><\/figure>\n Just be aware that if your setup is running NGINX as a proxy for Apache, the Apache\/Litespeed rules may not work in .htaccess<\/em>, and you\u2019ll want to add the NGINX rules manually using this method.<\/p>\n
How to Check Your Image Format<\/h2>\n
Unlike the WebP Conversion option in the Smush Pro CDN, you won\u2019t see the “.webp” format appear in source code.<\/p>\n
Instead, if you want to verify that images are indeed served as WebP, you\u2019ll want to pop open your browser\u2019s developer tools and, under the Network<\/strong> tab, check the Response Headers<\/strong> for any image.<\/p>\n
If you see \u201ccontent-type: image\/webp\u201d there, that tells you that the browser is indeed serving up the WebP version of the image.<\/p>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/12\/webp-proof.png\")
You will be able to see whether images are served as WebP.<\/figcaption><\/figure>\n Are You Converted?<\/h2>\n
Hopefully, after reading this article, you\u2019re confident that not only is WebP the right image format for your sites – but Smush Pro is the right plugin for the job.<\/p>\n
Just remember that if you want to take full advantage of the full power of Smush<\/a>, you can always use Smush Pro\u2019s CDN too!<\/p>\n
Not a member yet? Then join WPMU DEV today<\/a> to experience all we have to offer including Smush Pro<\/a> and take the new local WebP feature for a no-risk test drive.<\/p>\n","protected":false},"excerpt":{"rendered":"
Until now, next-gen WebP images could only be served by activating Smush Pro’s CDN. But by popular demand, Smush Pro now also supports local WebP image conversion. Our CDN is awesome, it really is. However, we\u2019re all for giving people options. This is exactly why we\u2019ve now made it possible to convert your images to […]<\/p>\n","protected":false},"author":801248,"featured_media":194208,"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":[4,263,4161,11260],"tags":[],"tutorials_categories":[11228],"class_list":["post-194149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-tutorials","category-wpmudev","category-wpmu-dev-products","tutorials_categories-smush-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/194149","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\/801248"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=194149"}],"version-history":[{"count":24,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/194149\/revisions"}],"predecessor-version":[{"id":218394,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/194149\/revisions\/218394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/194208"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=194149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=194149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=194149"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=194149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Follow our step-by-step configuration guide below.<\/li>\n<\/ol>\n
- NGINX Server Configuration<\/a><\/li>\n<\/ul>\n<\/li>\n
- Enabling Local WebP Conversion on Third-Party Sites<\/a>\n
- Activating Local WebP on WPMU DEV Hosted Sites<\/a><\/li>\n