Elemento HTML: imagem | Envato Tuts+

Isso garante que seja carregada a imagem mais adequada para o dispositivo de cada usuário, otimizando o desempenho e a experiência do usuário.

Sintaxe

O elemento consiste em um ou mais elementos aninhados dentro dele, seguidos por um elemento para conteúdo substituto. Aqui está um exemplo básico da sintaxe:

1

2

   srcset="image-large.jpg" media="(min-width: 800px)">

3

   srcset="image-medium.jpg" media="(min-width: 400px)">

4

   src="image-small.jpg" alt="A responsive image">

5

Neste exemplo, são fornecidas três versões diferentes de uma imagem. O navegador escolherá o mais apropriado com base no tamanho da janela de visualização calculado em um tamanho de mídia com largura mínima.

Exemplos

Direção da arte

1

2

   srcset="portrait.jpg" media="(orientation: portrait)">

3

   srcset="landscape.jpg" media="(orientation: landscape)">

4

   src="default.jpg" alt="An image with art direction">

5

Aqui, as imagens são selecionadas com base na orientação do dispositivo, garantindo que a imagem correta seja exibida para visualizações retrato e paisagem. Um design pode assumir uma forma diferente dependendo da orientação do dispositivo para visualizar o conteúdo.

Confira a versão em tela cheia e redimensione o navegador para ver a seleção de imagens em ação.

Telas de alto DPI

1

2

   srcset="image.jpg" type="image/jpeg">

3

   srcset="[email protected] 2x" type="image/jpeg">

4

   src="image.jpg" alt="A high-DPI image">

5

Este exemplo é direcionado a telas de alto DPI (Retina), fornecendo uma imagem com resolução 2x com o @2x sufixo.

É importante notar que @2x sufixo no srcset atributo não aciona o reconhecimento de exibição de alto DPI (Retina) do navegador. O @2x A convenção é comumente usada na nomenclatura de arquivos para indicar versões de imagens com maior densidade de pixels ou resolução para o benefício de desenvolvedores e designers. Considere isso um padrão de design.

Atributos

O elemento suporta atributos globais.

Contente

O elemento aceita múltiplos elementos seguidos por um elemento para conteúdo substituto. Cada elemento deve ter um srcset atributo e o elemento deve ter um src e alt atributo.

Você sabia?

• O O elemento foi introduzido no HTML5 para atender à necessidade de imagens responsivas em web design.
• Os desenvolvedores da Web podem combinar com o e elementos para criar imagens adaptativas para sites modernos.

Saber mais