My images are broken

TL;DRIn Imagify settings, switch WebP display setting from “Use <picture> tags” to “Use rewrite rules” as long as your website doesn’t use a CDN or Cloudflare.

Starting in v1.9 of Imagify, we introduced the possibility to convert your images to WebP format.

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

  • Use <picture> Tags Option
  • Use Rewrite Rules Option

Use <picture> Tags Option

This option replaces the <img> tags with <picture> tags. This is the default solution, but it’s possible some themes may break, so make sure to verify that all seems fine. If you do find any issues, you may need to switch to the rewrite rules option.

Use Rewrite Rules Option

This option adds rewrite rules to your site’s configuration file (.htaccess) and does not alter your page’s code. Using rewrite rules will not cause the image display issues (if it does, don’t hesitate to contact us for help via our Support channel), but this option cannot be used if your site uses a CDN or Cloudflare.

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

Rewrite Rules added

On Apache, Imagify is able to automatically add the code to .htaccess file, so there is no further action required. However on Nginx, Imagify is not able to automatically add these rules, so it’s necessary to add them manually to the file conf/imagify.conf. Code to apply is:

# BEGIN Imagify: rewrite rules for webp

# Vary: Accept for all the requests to jpeg, png, and gif.

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

set $canavif 1;

if ($http_accept !~* "avif"){
set $canavif 0;
}

if (!-f $request_filename.avif) {
set $canavif 0;

}
if ($canavif = 1){
rewrite ^(.*) $1.avif;
break;
}

set $canwebp 1;

if ($http_accept !~* "webp"){
set $canwebp 0;
}

if (!-f $request_filename.webp) {
set $canwebp 0;

}
if ($canwebp = 1){
rewrite ^(.*) $1.webp;
break;
}
}

# END Imagify: rewrite rules for webp
Imagify rewrite rules
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.