AMP Como restringir a largura de imagens responsivas

AMP Como restringir a largura de imagens responsivas. No exemplo a seguir, temos uma imagem de flores (640 x 427 pixels) que será exibida em todos os tamanhos de tela. Por isso, especificaremos os atributos width e height e definiremos o layout como responsive.

<div class="resp-img">
  <amp-img alt="flowers"
    src="images/flowers.jpg"
    layout="responsive"
    width="640"
    height="427"></amp-img>
</div>

Para que a imagem não se expanda além do tamanho pretendido. Defina max-width no contêiner para 700 pixels com um CSS personalizado:

<style amp-custom>
.resp-img {
    max-width: 700px;
  }
</style>

As imagens compõem grande parte de uma página da Web, (aproximadamente 65% dos bytes da página). No mínimo, suas imagens devem ser visíveis em vários tamanhos e orientações de tela. Por exemplo, um usuário não precisará rolar a tela, fazer gesto de pinça ou usar o zoom para ver a imagem completa. Isso é fácil de fazer em páginas AMP com o atributo "layout=responsive". Consulte o artigo Incluir imagens em páginas AMP.

Ao fornecer várias resoluções de imagem, o navegador pode escolher a imagem mais adequada à resolução do dispositivo. Além disso, a imagem foi especificada para renderizar de acordo com o tamanho:

Para uma largura da janela de visualização de até 400 pixels, renderizar a imagem a 100% da dimensão correspondente. Para uma largura da janela de visualização de até 900 pixels, renderizar a imagem a 75% da dimensão correspondente. Para resoluções acima de 900 pixels, renderizar a imagem a 600 pixels de largura.

<amp-img alt="apple"
  src="images/apple.jpg"
  height="596"
  width="900"
  srcset="images/apple-900.jpg 900w,
            images/apple-800.jpg 800w,
            images/apple-700.jpg 700w,
            images/apple-600.jpg 600w,
            images/apple-500.jpg 500w,
            images/apple-400.jpg 400w"
  sizes="(max-width: 400px) 100vw, 
            (max-width: 900px) 75vw, 600px">
</amp-img>
Compartilhar: | | Whatsapp |
hits