webp image not loading

Hi Naveen,

I’m not able to replicate your issue on that page.

Also, it seems you have created 2 issues to report the same problem. Please close one of them if that is the case.

Hi @pierlo I disabled AMP plugin for some time. Now I activated AMP plugin. Please check now.

Sorry for creating two topics another one will be closed.

@naveendsouza Hi. We looked a way to try to automatically convert picture tags to amp-img in https://github.com/ampproject/amp-wp/issues/1316

However, we ended up abandoning the effort for reasons referenced in that issue.

Nevertheless, you may consider this approach to using a fallback in an amp-img: https://amp.dev/documentation/components/amp-img/#example:-specifying-a-fallback-image

But this is not great as for browsers that don’t support WebP, as I understand, as it means they would have to download the WebP image first and then fail to render it, then to fall back to the JPEG. What would be a better approach would be to just link to the JPEG version, and then have the web server detect if the browser is sending the image/webp format in the Accept header, and if so, automatically serve back the WebP version instead of the JPEG.

Nevertheless, since you are not using Standard mode, the AMP version will usually only be encountered via Search. When the AMP version is served via Google Search it will go through the Google AMP Cache which will automatically serve a WebP version as explained on https://developers.google.com/amp/cache/overview#cache-optimizations-and-modifications

So in the end, I think you should just serve the JPEG version on AMP pages in a regular img which the AMP plugin will convert to amp-img.

Hi @westonruter I am not good at creating new html code.

So in the end, I think you should just serve the JPEG version on AMP pages in a regular img which the AMP plugin will convert to amp-img.

How?

I found two solutions for displaying webp images in AMP & non-AMP
1) Just HTML code
from here https://amp.dev/documentation/components/amp-img/#example:-specifying-a-fallback-image

<picture>
<source srcset="/wp-content/uploads/2019/11/rna.webp" type="image/webp">
<img src="/wp-content/uploads/2019/11/rna.jpg" alt="RNA" class="wp-block-image">
</picture>
<amp-img alt="RNA"
width="768"
height="432"
layout="responsive"
src="https://allfullform.com/wp-content/uploads/2019/11/rna.webp">
<amp-img alt="RNA full form"
    fallback
    width="1920"
    height="1080"
    src="https://allfullform.com/wp-content/uploads/2019/11/rna.jpg"></amp-img>
</amp-img>

I think in above AMP code first alt is of no use because if image not found then even AMP page is showing “RNA full form” as image alt instead of “RNA”.

2) HTML code & .htaccess file
from here https://www.ads-software.com/support/topic/is-it-possible-to-upload-webp-images-directly/
a) HTML code <img src="/wp-content/uploads/2019/11/rna.jpg" alt="RNA" class="wp-block-image">
b) .htaccess code

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Please suggest me which method is good for minimum request and to save bandwidth.

I believe the second method is preferable because it will avoid non-supporting WebP browsers from downloading something they don’t support. I am not familiar with the best .htaccess code to use, however. Googling should provide you with some solutions, as you have found already.