Teste esta demonstração
- Para visualizar o site, pressione View App. Em seguida, pressione
Fullscreen
. - Recarregue o app usando tamanhos diferentes de navegador. Observe como as imagens são diferentes: elas não têm apenas tamanhos, mas também cortes e proporções diferentes.
O que está acontecendo aqui?
A 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 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 recortes de imagem nesta demonstração garantem que o ponto de interesse (a flor) seja sempre mostrado em detalhes, independentemente da exibição. Os benefícios da direção de arte são estritamente estéticos. Ela não oferece nenhum benefício de 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 "verdadeiro". Se nenhuma das consultas de mídia corresponder, o
navegador vai voltar a carregar a imagem especificada pelo <img>.
.
img
A tag <img> faz com que esse código funcione em navegadores que não
oferecem suporte à tag <picture>.
Se um navegador não for compatível com a tag <picture>, ele carregará a
imagem especificada pela tag <img>.