Com a tag picture
é possível especificar imagens
diferentes dependendo do tamanho
da tela do dispositivo em que o
navegador está sendo utilizado.
A tag picture
possui a tag source.
Nessas tags você especifica uma
imagem através do atributo
srcset, e define a
resolução mínima em que ela deve ser
utilizada através do atributo
media.
A primeira imagem da tag
source lida pelo
navegador que cumprir os requisitos
do atributo media
é a que será utilizada. Portanto é
importante que as tags
source sejam
organizadas com o atributo
media em ordem de
resolução mínima decrescente.
É importante utilizar a tag
img dentro da tag
picture depois de
todas as tags sources,
caso nenhum dos requisitos dos
atributos media
sejam cumpridos ou caso o navegador
seja antigo e não suporte a tag
picture.
Existem dois motivos pelos quais
a tag picture se faz necessária:
Economia de Dados:
Não é necessário carregar uma imagem
de alta resolução em uma tela pequena.
Portanto, utilize a tag
picture para evitar
desperdícios de dados e permitir que a
página carregue mais rapidamente nos
navegadores de aparelhos móveis, que
muitas vezes utilizam dos recursos
limitados dos dados móveis para
carregar a página.
Suporte de Formato:
Muitas vezes o navegador pode não
suportar determinado formato de
imagem. Para contornar esse problema,
utilize a mesma imagem em diferentes
formatos com a tag
source. A primeira
imagem que for interpretada
corretamente pelo navegador é a que será
exibida na página. Nesse caso, o uso do
atributo media é
desnecessário.
