My images are broken

TL;DRIn Imagify settings, switch WebP display from “Use <picture> tags” to “Use rewrite rules”.  

Starting from v1.9 of Imagify, there is possibility to convert your images to WebP format.

There are two different ways to display WebP images on your site:

  • Using <picture> tags
  • Using rewrite rules

As stated in Imagify Settings:

The first option replaces the <img> tags by <picture> tags. This is the preferred solution but some themes may break, so make sure to verify that all seems fine.

Using  <picture> tags can be risky in some cases, so if you find any issues, make sure to switch preferred way of conversion to rewrite rules.

The second option adds rewrite rules to your site’s configuration file (.htaccess) and does not alter your pages code. 

Using rewrite rules is safe and will not make issues (if it does, don’t hesitate to contact us for help via our Support channel). This does not work with CDN though.

Apache vs Nginx

Depending on the server you use, there are some differences in implementing WebP via rewrite rules.

On Apache, Imagify is able to automatically add the code to .htaccess file, so there is no further action required. The code will look like this:

# BEGIN Imagify: rewrite rules for webp
<IfModule mod_setenvif.c>
    # Vary: Accept for all the requests to jpeg, png, and gif.
    SetEnvIf Request_URI "\.(jpg|jpeg|jpe|png|gif)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

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

    # Check if WebP replacement image exists.
    RewriteCond %{REQUEST_FILENAME}.webp -f

    # Serve WebP image instead.
    RewriteRule (.+)\.(jpg|jpeg|jpe|png|gif)$ $1.$2.webp [T=image/webp,NC]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REQUEST_image
</IfModule>
# END Imagify: rewrite rules for webp

# BEGIN Imagify: webp file type
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>
# END Imagify: webp file type
Imagify rewrite rules for Apache

On Nginx, however, Imagify is not able to automatically add these rules, so it’s necessary to add them manually to nginx.config file. Code to apply is:

location ~* ^(/.+)\.(jpg|jpeg|jpe|png|gif)$ {
    add_header Vary Accept;

    if ($http_accept ~* "webp"){
        set $imwebp A;
    }
    if (-f $request_filename.webp) {
        set $imwebp  "${imwebp}B";
    }
    if ($imwebp = AB) {
        rewrite ^(.*) $1.webp;
    }
}
Nginx rules for WebP rewrite
Was this guide helpful? :) Great! Glat we could help! Thank's for your feedback
Great! Glat we could help!

Your feedback has been sent to our team We value every bit of feedback we receive as it helps us to improve our products and services. Thank you for your time.