Tag HTML <imagem>
Hoje vamos cobrir a imagem da etiqueta . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.
A tag HTML <picture> é usada para fornecer várias versões de uma imagem, cada uma projetada para um dispositivo ou tamanho de exibição específico. O navegador pode então escolher a versão mais apropriada da imagem a ser exibida com base no dispositivo do usuário e no tamanho da tela.
É assim que você aplica a tag <picture> :
Example:
Usando <picture> para fornecer imagens diferentes com base na orientação da tela:
Example:
Usando <picture> para fornecer imagens diferentes com base no esquema de cores do navegador:
Example:
Uso de marca de imagem
A tag picture <picture> permite que os desenvolvedores da Web designem recursos de imagem com maior flexibilidade .
O elemento <picture> é frequentemente usado para direção de arte ao criar designs responsivos.
Várias imagens podem ser usadas para preencher a viewport do navegador com mais eficiência, em vez de uma única imagem que é ampliada e reduzida de acordo com a largura da viewport.
O elemento <picture> consiste em duas tags: uma combinação de tags <source> e uma tag <img>.
O navegador procura o primeiro elemento <source> que corresponda à largura atual da viewport com a consulta de mídia e, em seguida, renderiza a imagem (a imagem incluída no atributo srcset). Como alternativa, se nenhuma das tags de origem corresponder, há uma opção de fallback no elemento <img> .
Atributos de tags HTML <picture>
A tag HTML <picture> possui vários atributos que podem ser usados para especificar as diferentes versões de uma imagem e como elas devem ser exibidas. Aqui estão alguns dos atributos mais comuns usados com a tag <picture>:
- srcset : O atributo srcset é usado para especificar as diferentes versões da imagem, junto com seus respectivos tamanhos. Cada versão é separada por uma vírgula, com o tamanho especificado após o URL da imagem. Por exemplo: srcset=”small.jpg 320w, medium.jpg 640w, large.jpg 1024w”.
- tamanhos: O atributo tamanhos é usado para especificar os tamanhos da imagem a que se destinam as diferentes versões. Isso ajuda o navegador a selecionar a versão mais apropriada com base no dispositivo do usuário e no tamanho da tela. Por exemplo: tamanhos=”(largura máxima: 768px) 100vw, 50vw”.
- media: O atributo media é usado para especificar a consulta de mídia que o navegador deve usar para determinar se deve usar uma versão de imagem específica. Por exemplo: media=”(largura mínima: 768px)”.
- type: O atributo type é usado para especificar o tipo MIME da imagem. Isso pode ajudar o navegador a selecionar o formato de imagem mais apropriado para o dispositivo e o navegador do usuário. Por exemplo: type=”image/webp”.
- alt: O atributo alt é usado para fornecer um texto alternativo para a imagem, que é exibido se a imagem não puder ser carregada ou se o usuário estiver usando um leitor de tela.
Atributos
Global
Os Atributos Globais do HTML são suportados pela Tag Picture <picture> .
Evento
A Tag Picture <picture> do HTML também funciona com Atributos de evento .
Compatibilidade do navegador
Na tabela a seguir, os números indicam a versão do navegador compatível com o elemento da Tag Picture .
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <imagem> | 38,0 | 13,0 | 38,0 | 9.1 | 25,0 |
Vantagens da tag HTML <picture>
Há várias vantagens em usar a tag HTML <picture> :
- A tag <picture> permite que os desenvolvedores forneçam várias versões de uma imagem otimizadas para diferentes tamanhos de tela e dispositivos. Isso garante que a imagem seja exibida no tamanho apropriado para o dispositivo do usuário, o que pode melhorar a experiência do usuário.
- Ao fornecer várias versões de uma imagem e usar os atributos srcset e tamanhos, o navegador pode selecionar a versão mais apropriada da imagem para download, o que pode reduzir o tamanho da imagem baixada e melhorar o desempenho da página da web.
- A tag <picture> foi projetada para ser compatível com os novos formatos e tecnologias de imagem. Isso significa que os desenvolvedores podem usar a tag <picture> para fornecer imagens que funcionarão com novos dispositivos e tecnologias à medida que forem desenvolvidos.
- A tag <picture> fornece um atributo alt que pode ser usado para fornecer texto alternativo para a imagem. Isso é importante para usuários que não conseguem ver a imagem ou que estão usando um leitor de tela.
- A tag <picture> pode ajudar a melhorar a otimização do mecanismo de pesquisa (SEO) de uma página da Web, fornecendo imagens otimizadas para diferentes dispositivos e tamanhos de tela. Isso pode melhorar a velocidade de carregamento da página e a experiência do usuário, o que pode ajudar a melhorar a classificação da página nos mecanismos de pesquisa.
