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.

Apache 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
Imagify rewrite rules for Apache

Nginx Rewrite Rules
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;
  }
}
Imagify rewrite rules for Nginx
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.