Wired West

Liberdade na Era da Computação
Contato FAQ Doação

Tutorial de HTML

Picture

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 as tags source. Nessas tags você especifica imagens 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:

1. 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.
2. 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.

< Imagens Picture Favicon >

O conteúdo original (artigos e tutoriais) deste website está disponível em CC0 1.0 (Domínio Público), salvo indicação do contrário. Termos adicionais podem estar aplicados (conteúdo de terceiros), conforme mencionado nos comentários do código-fonte.