Imagens responsivas e direção de arte

As imagens responsivas geralmente são implementadas usando o atributo srcset. O atributo srcset é uma lista separada por vírgulas de nomes de arquivos de imagens e os respectivos descritores de largura ou densidade. Para evitar mudanças de layout, defina os atributos width e height nas tags <img> e <source> que usam srcset.

Para imagens responsivas que usam descritores de densidade:

  • Todas as imagens listadas em src e srcset precisam ter a mesma proporção.
  • Defina os atributos width e height para que correspondam às dimensões da imagem 1x.
  • O atributo src precisa se referir à imagem 1x.

Para imagens responsivas que usam descritores de largura:

  • Todas as imagens listadas em src e srcset precisam ter a mesma proporção.
  • Defina os atributos width e height para que correspondam às dimensões da imagem substituta.
  • Ajuste o estilo da imagem conforme necessário:na ausência de estilos CSS, definir width e height em uma imagem responsiva que usa descritores de largura fará com que a imagem sempre seja renderizada no mesmo tamanho, mesmo que as imagens listadas em srcset tenham dimensões variadas. Esse comportamento pode não ser o desejado. Adicionar width: 100%; height: auto; ou width: 100vw; height: auto; ao estilo da imagem pode dar a aparência que você quer.

Para tags <picture>:

  • Defina os atributos width e height para todas as tags <source>:os valores apropriados para width e height dependem de como a tag <source> usa srcset. Consulte as informações acima para saber como trabalhar com o srcset.
  • Ajustar o estilo da imagem:se você precisar ajustar o estilo da imagem, lembre-se de que adicionar estilo a uma tag <source> não terá efeito. Uma tag <source> é um elemento vazio. Em vez disso, será necessário definir o estilo da tag <img> correspondente.
  • Defina os atributos width e height na tag <img>:esses valores precisam corresponder ao tamanho intrínseco da imagem substituta.

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>