How to use WebP on Photoshop and WordPress
April 1, 2018 6:18 am 2 CommentsWebP is a still image format developed by Google. The webp image format helps to reduce image size and speed up loading time of websites using lossless and lossy compression technology. The most popular operating systems such as Windows, Mac and photo editing software like Photoshop do not yet support the webp file format natively.
Compared to JPEG, WebP file size is about 25% – 34% smaller. In an web environment where every faction of second counts, this results in substantial bandwidth saving over time.
https://developers.google.com/speed/webp/docs/webp_study
Yet due to political & business reasons, WebP has not been adopted by other browsers such as IE, Firefox, or Safari.
https://caniuse.com/#feat=webp
While browser specific image replacement technique has been around for few years, I’ve found the practice cumbersome within WordPress without a WordPress plugin.
To use WebP in a theme I develop, this is the method I use.
Display image
<picture> <source srcset='your/path/image.webp' type='image/webp' /> <img src='your/path/image.jpg' alt="footer-logo" /> </picture>
Display image as background image
I include Modernizr (which I include it anyway for other features)and use its detection feature.
.no-webp .site-header{ background-image:url('img.jpg'); } .webp .site-header{ background-image:url('img.webp'); }
If you don’t like using Modernizr, you can include WebPJS as alternative.
Unfortunately, using WebP within a post/page is actually bit trickier.
Uploading WebP files
Firstly, WordPress media library does not accept webp format. Using upload_mimes filter, you can tell the medial library to accept webp formta.
<?php add_filter( 'upload_mimes', 'hackya_myme_types', 1, 1 ); function hackya_myme_types( $mime_types ) { $mime_types['webp'] = 'image/webp'; // Adding .webp extension return $mime_types; }
Not a coder? Not a problem.
For non-coder/developer, by far, the easiest way is to install Jetpack and use the Poton image service it provides.
But what if you don’t want to use Jetpack? I for one don’t use it because it bogs the site down.
You can use Optimus Image Optimizer plugin. This plugin requires you to actually purchase the premium version if you want to covert images to WebP. Well, that’s a bummer.
I’ve learned that EWWW Image Optimzier does this for free. FTW!! Just like Optimu Image Optimzer, this one also works with the WebP option in the Cache Enabler plugin from KeyCDN.
Photoshop
Eventually, there comes a time where you will have to alter/edit the webp image itself.
As far as I am aware, this is the only plugin that is available for free.
https://github.com/fnordware/AdobeWebM
Finally, you need Rewrite Rules to deliver WebP images.
I currently use this on CS6 & it works fine.
Download Webp plugin for Windows
Extract the msi & you will find a file named ‘WebP’ in the folder. Copy it and paste it your Adobe Photoshop Plugins directory (C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins).
Now launch Photoshop and open Webp format image. It should work.
Rewrite Rules for WebP
If you are not using CDN to push the webp images, rewrite rules are needed to deliver WebP images by changing the MIME type of an image.
RewriteRules for Nginx (nginx.conf)
location ~ ^(/path/to/your/images.+)\.(jpe?g|png)$ { if ( $http_accept ~* webp ) { set $webp "A"; } if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) { set $file_without_ext $1; } if ( -f $file_without_ext.webp ) { set $webp "${webp}E"; } if ( $webp = AE ) { add_header Vary Accept; rewrite ^(.+)\.(png|jpe?g)$ $1.webp break; } }
In case you are unfortunate enough to be stuck in Apache server, here is the .htaccess config.
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp
The image/webp web; entry in the Nginx system files mime.types is very important in this context—that’s how Nginx sends the correct MIME type to the browser.
Tags: nginx, rewrite rule, webp, wordpressCategorized in: Technology, Web Development
This post was written by hackya
2 Comments
Thanks for sharing your research and solutions! What you describe is more effort than I can afford to spend right now but am saving your article for later.
Thank you!