1

For some reason that I cannot fathom, my Chrome installation does not show me webp images from my website. I can see webp images on other sites (I think - how can you tell if you are being served a fallback image instead?), just not my own.

Anyhoo, I have the following code in my .htaccess file to serve webp images to browsers that support it (assuming a webp version of the image exists):

<IfModule mod_rewrite.c>
    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]
</IfModule>

<IfModule mod_headers.c>
    # If REDIRECT_webp env var exists, append Accept to the Vary header
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

# Serve Images with correct Mime Type
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule> 

How do I exclude the WordPress backend from this (eg, urls beginning with https://example.com/wp-admin) because I think it is interfering with my ability to edit images in the WP Media Library.

  • Whereabouts are these directives in relation to your existing WordPress (front-controller) directives? – DocRoot Jun 18 '18 at 13:18
  • "how can you tell if you are being served a fallback image instead?" - Check the HTTP response. (In Chrome, check the Object Inspector > Network Traffic) – DocRoot Jun 18 '18 at 13:20
  • That rewrite rule serves .webp content at .jpg or .png URLs. I'd think you'd want to redirect to a .webp URL instead, maybe with a "see other" status. – Stephen Ostermiller Jun 18 '18 at 13:38
  • "my Chrome installation does not show me webp images" - So, what do you see? There is actually an error in your current directives that (if executed) would result in all .jpg and .png images being rewritten to .webp, regardless of whether the .webp image existed or not (the last condition is being OR'd, not AND'd). However, it would be more efficient to avoid the filesystem check if you can. – DocRoot Jun 18 '18 at 13:56
  • @StephenOstermiller Although a redirect would potentially slow the site down if you had many of these images. – DocRoot Jun 18 '18 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.