Confira esta demonstração
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
. - Atualize o app usando diferentes tamanhos de navegador. Observe a diferença entre as imagens: não só têm tamanhos distintos, como também recortes e proporções.
O que está acontecendo aqui?
A Direção de arte mostra imagens diferentes em diferentes tamanhos de tela.
Uma imagem responsiva carrega tamanhos diferentes da mesma imagem. A direção de arte vai um passo 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, porque ela não oferece melhor desempenho em relação às imagens responsivas.
Ver o código
- Acesse
index.htmlpara conferir 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 "true". Se nenhuma das consultas de mídia corresponder, o
navegador voltará a carregar a imagem especificada pelo <img>.
mesma tag.
img
A tag <img> faz esse código funcionar em navegadores que não oferecem
suporte à tag <picture>.
Se um navegador não for compatível com a tag <picture>, ele vai carregar a imagem especificada pela tag <img>.