Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

Elemento HTML <imagem>


O elemento HTML <picture>permite exibir imagens diferentes para diferentes dispositivos ou tamanhos de tela.



O elemento HTML <picture>

O elemento HTML <picture>oferece aos desenvolvedores da Web mais flexibilidade na especificação de recursos de imagem.

O <picture>elemento contém um ou mais <source>elementos, cada um referindo-se a diferentes imagens por meio do srcset atributo. Desta forma, o navegador pode escolher a imagem que melhor se adapta à visualização e/ou dispositivo atual.

Cada <source>elemento possui um mediaatributo que define quando a imagem é a mais adequada.

Exemplo

Mostrar imagens diferentes para diferentes tamanhos de tela:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

Observação: sempre especifique um <img>elemento como o último elemento filho do <picture>elemento. O <img>elemento é usado por navegadores que não suportam o <picture>elemento ou se nenhuma das <source>tags corresponder.


Quando usar o elemento de imagem

Existem dois propósitos principais para o <picture>elemento:

1. Largura de banda

Se você tiver uma tela ou dispositivo pequeno, não é necessário carregar um arquivo de imagem grande. O navegador usará o primeiro <source> elemento com valores de atributo correspondentes e ignorará qualquer um dos elementos a seguir.

2. Suporte ao formato

Alguns navegadores ou dispositivos podem não suportar todos os formatos de imagem. Ao usar o <picture>elemento, você pode adicionar imagens de todos os formatos, e o navegador usará o primeiro formato que reconhecer e ignorará qualquer um dos seguintes elementos.

Exemplo

O navegador usará o primeiro formato de imagem que reconhecer:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

Observação: o navegador usará o primeiro <source>elemento com valores de atributo correspondentes e ignorará os <source>elementos a seguir.


Tags de imagem HTML

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .