Imagem do elemento em HTML
Falaremos sobre imagem de imagens Html neste post com exemplos . Desejando que isso apoie as demandas do aprendizado.
O elemento <picture> em HTML é usado para fornecer várias versões de uma imagem que podem ser exibidas com base no tamanho ou resolução da tela do usuário. Ele permite que os desenvolvedores da Web criem imagens responsivas e otimizadas que carregam rapidamente e ficam ótimas em qualquer dispositivo.
O elemento <picture> funciona especificando várias fontes para uma imagem, cada uma com sua própria consulta de mídia que define as condições sob as quais a imagem deve ser exibida. O navegador seleciona a melhor fonte com base no tamanho e resolução da tela do dispositivo, carregando a imagem apropriada e otimizando-a para o dispositivo.
O elemento <picture> também inclui um elemento fallback <img> , que é exibido se nenhuma das fontes especificadas for suportada pelo navegador. Isso garante que a imagem esteja sempre visível, mesmo que o navegador não suporte o elemento <picture> ou qualquer uma das fontes especificadas.
O elemento HTML <picture> nos permite mostrar várias imagens para várias telas ou dispositivos.
Principais recursos da tag HTML <picture>
Aqui estão alguns dos principais recursos da tag HTML <picture> :
- A tag <picture> permite que você especifique várias fontes para uma imagem usando a tag <source>. Cada fonte pode ter sua própria consulta de mídia que define as condições sob as quais a imagem deve ser exibida.
- Você pode especificar diferentes formatos da mesma imagem (por exemplo, JPEG, WebP) na tag <source>. O navegador selecionará o melhor formato com base no suporte do dispositivo.
- A tag <picture> inclui uma tag fallback <img>, que é exibida se nenhuma das fontes especificadas for suportada pelo navegador.
- A tag <picture> permite fornecer imagens otimizadas para diferentes tamanhos e resoluções de tela, tornando seu site mais responsivo.
- A tag <picture> inclui o atributo alt, que fornece uma descrição de texto da imagem para usuários com deficiência visual ou usando tecnologia assistiva.
- A tag <picture> pode melhorar o SEO do seu site, fornecendo imagens otimizadas que carregam rapidamente e são dimensionadas corretamente para o dispositivo do usuário.
Incluir fotos
O elemento Html pictures <picture> tem dois propósitos importantes:
1. Largura de banda
Se sua tela ou dispositivo for pequeno, não é necessário recuperar um arquivo de imagem grande.
O navegador utilizará a primeira tag <source> com os valores de atributos apropriados, ignorando quaisquer componentes subsequentes.
2. Suporte de formato
É possível que vários navegadores ou dispositivos não habilitem todos os formatos de imagem.
Utilizando a tag Html pictures <picture> , você pode fazer upload de imagens em qualquer formato, e o navegador empregará o primeiro tipo que reconhecer e desconsiderará os outros.
O navegador utilizará o primeiro formato de imagem compatível:
Example:
IMPORTANTE: O navegador usará o primeiro <source>elemento com valores de atributo correspondentes e ignorará os <source>elementos seguintes.
Imagens HTML Elemento <picture>
Com o elemento HTML <picture> , os desenvolvedores de sites têm liberdade adicional ao descrever recursos de imagem.
Os elementos <source> separáveis estão contidos na tag Html pictures <picture> , cada um dos quais usa o atributo src set para se conectar a uma imagem específica. Ao fazer isso, o navegador poderá selecionar a imagem que melhor se adapta à visualização ativa e/ou dispositivo.
O atributo media de cada elemento <source> indica quando a imagem é a mais apropriada.
Exibir várias imagens para vários tamanhos de tela:
Example:
IMPORTANTE: Você deve sempre colocar um elemento <img> como o último filho de uma tag <picture> . Quando um navegador não endossa a tag <picture> ou se nenhum dos elementos <source> corresponder, o elemento <img> é usado.
Atributos de marca de imagem HTML
Aqui estão alguns atributos importantes da tag HTML <picture> :
- srcset: O atributo srcset é usado para especificar uma lista de fontes de imagem e suas larguras ou densidades de pixel correspondentes. Este atributo ajuda o navegador a escolher a melhor fonte de imagem com base no tamanho e resolução da tela do dispositivo.
- tamanhos: O atributo de tamanhos é usado para especificar os tamanhos da imagem em um design responsivo. Esse atributo ajuda o navegador a determinar a fonte correta para download com base no espaço disponível no layout.
- media: O atributo media é usado para especificar a consulta de mídia que determina quando usar a fonte correspondente no atributo srcset. Esse atributo permite que o desenvolvedor forneça diferentes fontes de imagem para diferentes tamanhos ou resoluções de dispositivos.
- type: O atributo type é usado para especificar o tipo de arquivo da imagem. Esse atributo ajuda o navegador a determinar qual formato baixar.
- alt: O atributo alt é usado para fornecer uma descrição de texto da imagem para usuários com deficiência visual ou usando tecnologia assistiva. Esse atributo é importante para fins de acessibilidade e SEO.
- class e id: os atributos class e id são usados para aplicar estilos CSS ou funcionalidade JavaScript ao elemento <picture> .
Etiquetas de Imagem HTML
| Tag | Visão geral |
|---|---|
| <img> | Especifica uma imagem. |
| <mapa> | Fornece um mapa de imagens. |
| <área> | Descreve uma região clicável em um mapa de imagem. |
| <imagem> | Cria um contêiner para vários recursos de imagem. |
Benefícios da tag HTML <picture>
Aqui estão alguns benefícios de usar a tag HTML <picture> :
- Ao fornecer várias versões de uma imagem, cada uma otimizada para diferentes tamanhos e resoluções de tela, a tag <picture> pode ajudar a reduzir o tempo de carregamento da página e melhorar a experiência geral do usuário.
- A tag <picture> permite que desenvolvedores web criem imagens responsivas que se ajustam ao tamanho e resolução da tela do usuário, melhorando a legibilidade e usabilidade do site em diferentes dispositivos.
- O atributo alt incluído na tag <picture> fornece uma descrição textual da imagem para usuários com deficiência visual ou usuários de tecnologia assistiva, melhorando a acessibilidade do site.
- A tag <picture> pode melhorar o SEO do site, fornecendo imagens otimizadas com tamanho correto e carregamento rápido, o que pode ajudar a melhorar a classificação do site nos mecanismos de pesquisa.
- A tag <picture> é suportada por todos os navegadores modernos, portanto pode ser usada sem se preocupar com problemas de compatibilidade entre navegadores.
