Pergunta do WordPress AMP: a imagem webp não está carregando

Um usuário perguntou ?

Oi, estou usando imagens da web com tag de imagem. Mas o plug-in AMP remove a tag de imagem. Seguindo o código html que estou usando no meu blog para inserir imagens da web com a opção de fallback jpg.

<picture>
<source image/webp">
<img src=" alt="RNA" class="wp-block-image">
</picture>

Estou usando AMP no modo de transição. Existe uma maneira de exibir imagens da Web na versão não AMP e na versão AMP?

(@pierlo)

1 ano, 1 mês atrás

Olá Naviene,

Não consigo replicar seu problema nessa página.

Além disso, parece que você criou 2 edições para relatar o mesmo problema. Feche um se for o caso.

(@naveendsouza)

1 ano, 1 mês atrás

Oi @pierlo, desativei o plugin AMP por um tempo. Agora eu ativei o plugin AMP. Por favor, verifique agora.

Desculpe por criar dois tópicos para fechar outro.

(@westonruter)

1 ano, 1 mês atrás

@naveendsouza Olá. Estamos procurando uma maneira de tentar converter automaticamente picture rótulos para amp-img em

No entanto, acabamos abandonando a tentativa pelos motivos mencionados naquela edição.

No entanto, você pode querer considerar esta abordagem fallback mim amp-img:

Mas isso não é muito bom para navegadores que não suportam WebP, como eu entendo, porque significa que eles teriam que baixar a imagem WebP primeiro e depois falhar ao carregá-la e depois voltar para o JPEG. A melhor abordagem seria apenas vincular à versão JPEG e, em seguida, ao servidor da Web para detectar se o navegador está iniciando o image/webp formato no Accept header e, em caso afirmativo, republicar automaticamente a versão WebP em vez do JPEG.

No entanto, como você não está usando o modo padrão, a versão AMP geralmente vem apenas pela pesquisa. Quando a versão AMP for veiculada por meio da Pesquisa do Google, ela passará pelo Google AMP Cache, que veiculará automaticamente a versão WebP conforme explicado em

Então, no final, acho que devo postar a versão JPEG nas páginas AMP regularmente img que mudará o plug-in AMP para ele amp-img.

(@naveendsouza)

1 ano, 1 mês atrás

Oi @westonruter Não sou bom em criar novo código html.

Então, no final, acho que devo veicular apenas a versão JPEG em páginas AMP em img regular, que converterá o plug-in AMP em amp-img.

Quão?

Encontrei duas soluções para exibir imagens da Web em AMP e não em AMP
1) Somente código HTML

daqui

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

Não acho que o primeiro artigo no código AMP acima seja útil porque, se a imagem não for encontrada, a página AMP exibirá “formulário de RNA completo” como uma imagem de artigo em vez de “RNA”.

2) Código HTML e arquivo .htaccess

daqui a) código HTML <img src=" alt="RNA" class="wp-block-image">

b) código .htaccess

<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

Por favor, deixe-me saber qual método é bom para fazer o menor pedido e economizar largura de banda.

(@westonruter)

1 ano, 1 mês atrás

Acho que o segundo método é melhor porque impedirá o download de navegadores WebP que não suportam algo que não suportam. No entanto, não estou familiarizado com o melhor código .htaccess a ser usado. A pesquisa no Google deve fornecer algumas soluções, como você já encontrou.