Confira esta demonstração
- Para visualizar o site, pressione Ver app. Em seguida, pressione
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.
O que está acontecendo aqui?
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.htmlpara 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>.