Direção de arte

Katie Hempenius
Katie Hempenius

  • Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia tela cheia
  • Atualize o app usando tamanhos de navegador diferentes. Perceba como as imagens são diferentes não só têm tamanhos diferentes, mas também recortes e recortes diferentes proporções.

Direção de arte mostra imagens diferentes em tamanhos de tela diferentes.

Uma imagem responsiva carrega diferentes tamanhos da mesma imagem. A direção de arte isso é um passo adiante e carrega imagens completamente diferentes, dependendo da exibição.

Use a direção de arte para melhorar a apresentação visual. Por exemplo, os diferentes recortes de imagem nesta demonstração garantem que o ponto de interesse (a flor) esteja sempre mostrados em detalhes, independentemente da tela. Os benefícios da direção de arte são puramente estéticas, o desempenho não é melhor em comparação com imagens responsivas.

Ver o código

  • Consulte index.html para conferir o código da direção de arte desta demonstração.

Como o código funciona

A direção de arte usa o <picture>, <source>, e <img>.

imagem

A tag <picture> fornece um wrapper para zero ou mais tags <source> e uma tag <image>.

source

A tag <source> especifica um recurso de mídia.

O navegador usa a primeira tag <source> com uma consulta de mídia que retorna verdadeiro. Se nenhuma das consultas de mídia corresponder, o navegador volta a carregar a imagem especificada pelo <img>. .

img

A tag <img> faz esse código funcionar em navegadores que não são compatíveis com a tag <picture>.

Se um navegador não for compatível com a tag <picture>, ele carregará a especificada pela tag <img>.