Home » Htaccess » Serving WebP images for PNG and JPG files

by comment

Serving WebP images for PNG and JPG filesOne of the biggest speed bottlenecks of sites today are images, specifically unoptimized images or large scaled images. With Apaches Rewrite module we can convert all existing jpegs and png files (and most gifs) to webp, then transparently rewrite them so that a request for img.png from a browser that supports webp will receive img.webp.

Apache Htaccess for WebP

This is a little better than similar rules out there because it doesn't set a value for the webp env var, and stops RewriteEngine from continuing to loop. It also works with Google Page Speed Insights tool and is case-insensitive.

RewriteEngine On
RewriteBase /

# Does browser explicitly support webp?
RewriteCond %{HTTP_USER_AGENT} Chrome [OR]

# OR Is request from Page Speed
RewriteCond %{HTTP_USER_AGENT} "Google Page Speed Insights" [OR]

# OR does this browser explicitly support webp
RewriteCond %{HTTP_ACCEPT} image/webp [OR]

# AND does a webp image exists?
RewriteCond %{DOCUMENT_ROOT}/$1\.webp -f

# THEN send the webp image and set the env var webp
RewriteRule (.+)\.(?:jpe?g|png)$ $1.webp [NC,T=image/webp,E=webp,L]

# If REDIRECT_webp env var exists, append Accept to the Vary header
Header append Vary Accept env=REDIRECT_webp

WebP Browser Support

Check caniuse.. Note that as of Nov 2016, Both Safari and Firefox are experimenting with supporting WebP images.

webp browser-support

What is WebP

According to Google:

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

Lenna test image compressed using version 0.30 lossy WebP compression at quality 75 with accompanying RGB histograms. Note the breaks in the histogram of the compressed image compared to the source. As a derivative of the VP8 video format, it is a sister project to the WebM multimedia container format. WebP-related software is released under a BSD license.

The format was first announced in September 30, 2010 as a new open standard for lossily compressed true-color graphics on the web, producing smaller files of comparable image quality to the older JPEG scheme. On October 3, 2011 Google announced WebP support for animation, ICC profile, XMP metadata and tiling (compositing very large images from maximum 16384×16384 tiles). On November 18, 2011 Google began to experiment with lossless compression and support for transparency (alpha channel) in both lossless and lossy modes; support has been enabled by default in libwebp 0.2.0 (August 16, 2012). According to Google's measurements, a conversion from PNG to WebP results in a 45% reduction in file size when starting with PNGs found on the web, and a 28% reduction compared to PNGs that are recompressed with pngcrush and PNGOUT.

Client-Side Test for WebP Support

From Modernizer here is a simple test you can run via js, and if it succeeds you could set a cookie or localstorage to request the webp images directly and skip the rewriterule.

<h2><a id="Googles_webp_Client-Side_Tests" href="#Googles_webp_Client-Side_Tests">Googles webp Client-Side Tests</a></h2>
<p><a href="">Provided here</a>.</p>
// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    img.onerror = function () {
        callback(feature, false);
    img.src = "data:image/webp;base64," + kTestImages[feature];

Good Reading

WebP Resources

More WebP Reading


Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman

It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | |

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain