Direção de arte

Katie Hempenius

Atenção: uma ou mais demonstrações nesta página não funcionam mais, porque o Glitch encerrou a hospedagem.

Para acompanhar este codelab, abra este Glitch em uma segunda guia.

Teste esta demonstração

• Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
• Atualize o app usando tamanhos de navegador diferentes. Observe como as imagens são diferentes: elas não têm apenas tamanhos diferentes, mas também cortes e proporções distintos.

O que está acontecendo aqui?

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

Uma imagem responsiva carrega tamanhos diferentes da mesma imagem. A direção de arte vai além e carrega imagens completamente diferentes, dependendo da tela.

Use a direção de arte para melhorar a apresentação visual. Por exemplo, os diferentes cortes de imagem nesta demonstração garantem que o ponto de interesse (a flor) seja sempre mostrado em detalhes, independentemente da tela. Os benefícios da direção de arte são puramente estéticos. Ela não oferece nenhum benefício de desempenho em relação às imagens responsivas.

Ver o código

• Confira index.html para ver o código de direção de arte desta demonstração.

Como o código funciona

A direção de arte usa as tags <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 vai carregar a imagem especificada pelo <img>. .

: tenha cuidado ao ordenar as tags de origem. O navegador usa a primeira tag <source> com uma consulta de mídia correspondente, mesmo que as tags <source> seguintes também tenham consultas de mídia correspondentes. - O valor do atributo srcset é um caminho de arquivo de imagem. - Use imagens com o tamanho adequado. Só porque a direção de arte é usada para fins estéticos, não significa que ela não deva ter um bom desempenho.

img

A tag <img> faz com que esse código funcione 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 vai carregar a imagem especificada pela tag <img>.

: a tag <img> precisa ser sempre incluída e listada por último, depois de todas as tags <source>. - O recurso especificado pela tag <img> precisa ter um tamanho que funcione em todos os dispositivos para que possa ser usado como substituto.