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.

• ← Newer
• Older →