How to use WebP on Photoshop and WordPress

WebP 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.

Categorized in: Technology, Web Development

This post was written by hackya