WebP with AMP

Hi @edjarrett

This is Ioanna from Imagify and I’ll gladly assist you here!

Unfortunately, there are some limitations in WebP display when using AMP. We often see those using the “Use <picture> tags” option have issues where WebP images will not display in AMP.

A solution is to choose the “Use rewrite rules” option unless you are using a Cloudflare/ CDN. Also, I see that you are running on NGINX server so I would like to mention that these rules it’s necessary to add them manually to nginx.config file. You can see more information on the following page https://imagify.io/documentation/my-images-are-broken/
If you are not sure how to add these you might need to contact your host for assistance.

Please let me know how it goes.

Best regards,
Ioanna

Thanks Ioanna. I do have the ‘Use rewrite rules’ option set. And they are added into my .htaccess file (I am using Apache as far as I can tell). And I dropped by CDN a few days ago. But still I am not seeing WebP images in my AMP pages.

Same problem. I am using AMPforWP and I plan to continue using CDN.

Can something be done about this?

Hi

@edjarrett
I have checked through Wappalyzer that your Web Server is NGINX https://prnt.sc/11bt1uf can you please clarify that?

@joyloan
Unfortunately, the solution is to choose the rewrite rules way to display your WebP versions. Can you please tell me what is your website URL?

Best regards

Color me confused. I am on Cloudways and my site URL is https://aclayjar.net

Cloudways apparently has both Apache and Nginx. I have a .htaccess file that has been modified appropriately. But I cannot find a nginx.config file to modify. Any idea where it might be located?

Hi everyone,

@edjarrett it looks like NGINX is used as reverse proxy on your server, so the Apache is the main server and it will work with .htaccess rules added by Imagify (on standard pages).

However, I can see some of images are served as WebP and some not, both on classic page and on AMP version.

For example, your background image is delivered as WebP (even on AMP). And images like this one is delivered in original format although WebP version exists.

Can you make sure all caches are cleared and then to check if it changes the situation (firstly on main page and then on AMP version)?

Thanks!

@wp_media it is joyloan.in. But this problem seems to be because of AMPforWP. Image optimization plugins are generating WebP. But they are not delivered may be due to themes used in the AMP plugin.

Because of low speed of my server I can not disable cloudflare.

So, I am sending my request to AMPforWP team to improve their themes so Webp can be delivered.

My background image was uploaded as a webp, there is no corresponding jpg image for it.

The only cache I am currently using is Varnish and I have purged it.

Testing on this page, https://aclayjar.net/2021/04/supremacy-of-the-son/, the featured image does have a webp version in the uploads folder. But in both the regular and the amp version of the page it is displayed to me as a jpg.

Imagify is set to generate WebP images ad display them using rewrite rules but not using picture tags.

My .htaccess file starts with:

# 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

Hi all,

@edjarrett
You will have to check if mod_rewrite is active on the server and this is something you will have to check with the host. Or to make sure by asking them if NGINX is only reverse proxy.

Also, you could try to use the following plugin to display your WebP https://www.ads-software.com/plugins/webp-express/ and see if it will work with rewrite rules method.

@joyloan Thank you for letting us know. We will test this further as well.

Best regards

I have gone through the grueling process of checking with Cloudways and they affirm that mod-rewrite is enabled and that nginx is not used for this.

I have installed webp-express. And it seems to fix the webp for standard pages, but not for AMP.

Correction. I had webp-express misconfigured to use the picture tag. It works with AMP now.

Hello @edjarrett,

Glad to hear that the issue is resolved with the WebP Express plugin, and thank you for confirming that with us!

Best regards