Using Google's new WebP image format can be a good way to significantly speed up download speeds and reduce the overall page size. As of now (June 2016) the adoption of WebP is limited and only really supported by Google's own browsers and Opera Mini. Regardless serving WebP files to clients that support it can still yield considerable benefits for those users and future proofs your website for when other browsers pick up support.

After reading this article for the Optimus Wordpress plugin I was a little disappointed that I couldn't find an alternative for Jekyll sites such as mine.

So I wrote one.

Download now

Installation

The plugin can be downloaded directly from the release page on GitHub. The release Zip file contains all necessary files to run, including the WebP redistributable files.

As of writing the release includes the v0.5.0 version of the WebP utilities and only for Windows. Other versions and releases can be downloaded directly from their Google page.

To install simply unpack and copy all the files in the release under your _plugins folder under your Jekyll site.

Run jekyll serve again and you should see the generator run during site generation:

Configuration file: D:/git/jenkyll-sites/blog.sverrirs.com/_config.yml Source: D:/git/jenkyll-sites/blog.sverrirs.com Destination: D:/git/jenkyll-sites/blog.sverrirs.com/_site Incremental build: disabled. Enable with --incremental Generating... WebP Generator Starting Processing D:/git/jenkyll-sites/blog.sverrirs.com/img Generator Complete: 151 file ( s ) generated

By default the generator will search for a folder called /img under the site root and process all jpg, png and tiff image files found there.

Configuration

The plugin can be configured in the site's _config.yml file by including the webp configuration element

############################################################ # Site configuration for the WebP Generator Plugin # The values here represent the defaults if nothing is set webp : enabled : true # The quality of the webp conversion 0 to 100 (where 100 is least lossy) quality : 75 # List of directories containing images to optimize # Nested directories will not be checked img_dir : [ " /img" ] # add ".gif" to the format list to generate webp for animated gifs as well formats : [ " .jpeg" , " .jpg" , " .png" , " .tiff" ] # File extensions for animated gif files gifs : [ " .gif" ] # Set to true to always regenerate existing webp files regenerate : false # Path to the WebP utilities to use (relative or absolute) webp_path : " _plugins/webp/x64" # List of files or directories to exclude # e.g. custom or hand generated webp conversion files exclude : [] # List of files or directories to explicitly include # e.g. single files outside of the main image directories include : [] ############################################################

Webserver Configuration

Now you need to configure your webserver to serve your new .webp files to clients that support the format.

I am running an Apache server and below is my .htaccess configuration section to redirect users to webp images whenever possible

#################### # Attempt to redirect images to WebP if one exists # and the client supports the file format #################### # check if browser accepts webp RewriteCond %{HTTP_ACCEPT} image/webp # check if file is jpg or png RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$ # check if corresponding webp file exists image.png -> image.webp RewriteCond %1\.webp -f # serve up webp instead RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] AddType image/webp .webp

Depending on other configurations in your .htaccess file you might have to update your ExpiresByType , ExpiresDefault and Header set Cache-Control directives to include the webp format as well.

And that's it, you should now be serving WebP image files to all browsers that support it.

Please enable JavaScript to view the comments powered by Disqus.