Imagens responsivas e direção de arte

As imagens responsivas costumam ser implementadas com 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.

Descritores de densidade

Para criar 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.

Descritores de largura

Para criar imagens responsivas que usam descritores de largura:

  • Todas as imagens listadas em src e srcset precisam ter a mesma proporção.
  • Os atributos width e height precisam corresponder às dimensões da imagem substituta.
  • Ajuste o estilo da imagem conforme necessário. Sem o CSS, se você definir um width e height em uma imagem responsiva com descritores de largura, a imagem sempre será renderizada nesse tamanho definido. Isso acontece mesmo quando as imagens listadas em srcset têm dimensões variáveis. Esse pode não ser o comportamento desejado. Adicione width: 100%; height: auto; ou width: 100vw; height: auto; ao estilo da imagem para dar o visual que você quiser.

Elementos da imagem

Para criar elementos <picture> responsivos:

  • Defina os atributos width e height para todas as tags <source>. Os valores adequados para esse atributo dependem de como a tag <source> usa srcset.
  • Ajuste a imagem definindo o estilo da tag <img> correspondente. A tag <source> é um elemento vazio e, portanto, o estilo não tem efeito.
  • Defina os atributos width e height na tag <img>. Esses valores precisam corresponder ao tamanho intrínseco da imagem substituta.

Exemplos

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>