Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
April 8, 2020 12:47
June 7, 2021 11:14
June 7, 2021 11:15
September 14, 2020 15:40

WebP images with htaccess

This snippet detects if the browser supports WebP images and then serves a .webp image instead of jpg/png if a .webp file is available at the same location as the supplied jpg/png/gif. Read more about the webp format and other ways to serve it here:


Place the following in your .htaccess file and jpg/png/gif images will be replaced with WebP images if found in the same folder.

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser supports WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]

<IfModule mod_headers.c>
  # Vary: Accept for all the requests to jpeg, png and gif
  Header append Vary Accept env=REQUEST_image

<IfModule mod_mime.c>
  AddType image/webp .webp

Preferred solution

Controlling your files using htaccess sure is fun, but a more responsible way is to use the <picture>-element instead of this solution. It has great support in all major browsers and has a built-in fallback for those without it.

  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="">