The generated webp images are not visible in the front

Hi @srillet

?Sorry to hear about the issue! Indeed, it looks like there is a problem that I can not identify at the first sight.

Can you tell me what way of delivering WebP you use right now? I suspect you use rewrite rules method and something from the server is stopping it.

Is there a chance to change it to picture tag method (or the other one if I made a wrong assumption), clear the cache and try again?

If nothing helps, can you share the content of your nginx.conf file (the part related to Imagify) and confirm you have restarted NGINX after adding the content?

Best Regards

Marko

Hi, We actually want to use the rewrite method, for technical reasons in relation to our wordpress themes. I tried to clear the cache and remove all lazyloading present on the site.

We put the code that is in one of the docs of imagify :

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; } }

And have restarted the nginix. Where exactly should the code be placed in the file? Thanks for your help ??

Hi @srillet

Regarding the location that the code can be placed on file, it is not crucial, can be anywhere, just separated from other blocks.

Best Regards,

Ioanna

Hello,
We have made a few many tests to display webp images on our website but without success.

We tried to use the <picture> method but it doesn’t really work with our theme. So we went back to the rewrite method.
We don’t have a cache on the server and don’t use cdn.
The code is well added in the nginx.config and the server restarted.

We use for this version of our website the free version of cloudflare. Can this conflict with your plugins ? And prevent the display of webp ?

Thank you for your answers

Hi @srillet

Unfortunately, when using Cloudflare then rewrite rules will not work.

The only way to display your WebP images is through <picture> tags.

However, since you cannot use rewrite rules you can check one of the two following options in order to fix any display images issues when using picture tags:
– You can try to use the following HTML class that can be added to the specific images, that are not displaying correctly, to prevent WebP display via <picture> tag replacement (the optimized JPG/PNG versions will be displayed instead). If you can add this HTML class to all of the specific images you don’t want to display in WebP, then the rest of the images can still be displayed in WebP format.

imagify-no-webp

– Or you could try to delete the WebP version of those images through FTP. WebP images will be located in the same folder in which the original format version of the images is located. So if the original format image is located at wp-content/uploads/2020/02/image.jpg, then its WebP version will be at wp-content/uploads/2020/02/image.jpg.webp You can delete WebP versions of images by connecting directly to the files on your website’s server using an FTP program. Using an FTP program, you will be able to delete your WebP files individually or in larger groups at the same time.
Depending on which FTP program you are using, you can search for .webp or *.webp, which will return all WebP images and you can then quickly select them all and delete. But be careful, as this would also return images or files that just have .webp somewhere in their name or URL.
You can find further details on the following link https://imagify.io/documentation/delete-webp-images-website/

Let me know if you need any further assistance. I’ll be happy to help.

Best Regards,

Ioanna