• Resolved edjarrett

    (@edjarrett)


    Is there a trick to serving WebP images to AMP pages? I can’t seem to get the right combination to make that work.

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author WP Media

    (@wp_media)

    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

    Thread Starter edjarrett

    (@edjarrett)

    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?

    Plugin Author WP Media

    (@wp_media)

    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

    Thread Starter edjarrett

    (@edjarrett)

    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?

    Plugin Author WP Media

    (@wp_media)

    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.

    Thread Starter edjarrett

    (@edjarrett)

    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
    Plugin Author WP Media

    (@wp_media)

    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://wordpress.org/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

    Thread Starter edjarrett

    (@edjarrett)

    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.

    Thread Starter edjarrett

    (@edjarrett)

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

    Thread Starter edjarrett

    (@edjarrett)

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

    Plugin Author WP Media

    (@wp_media)

    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

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘WebP with AMP’ is closed to new replies.