A tag no HTML5 é usada para incorporar imagens em uma página da web, e dois atributos cruciais para esse propósito são o src e o srcset. Vamos explorar cada um deles:
- src (Source):
O atributo src é fundamental e obrigatório na tag . Ele especifica o caminho do arquivo da imagem que será exibida na página. Pode ser um caminho relativo ou absoluto, apontando para o arquivo de imagem desejado. Exemplo:
html
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">
- srcset:
O atributo srcset é uma adição poderosa introduzida no HTML5 para lidar com a exibição de imagens responsivas. Ele permite que você forneça várias versões da mesma imagem, cada uma otimizada para diferentes dispositivos ou resoluções de tela. Cada versão é especificada como uma URL seguida por um tamanho de exibição separado por uma vírgula. O navegador escolherá automaticamente a imagem que melhor se adapte à resolução e ao tamanho do dispositivo do usuário. Exemplo:
html
<img
srcset="imagem-pequena.jpg 500w,
imagem-media.jpg 1000w,
imagem-grande.jpg 2000w"
sizes="(max-width: 500px) 90vw, (max-width: 1200px) 80vw, 100vw"
src="imagem-media.jpg"
alt="Descrição da imagem"
>
No exemplo acima, três versões da imagem são fornecidas com diferentes larguras (w). O navegador escolherá automaticamente a melhor versão com base na largura da tela do usuário. O atributo sizes define como a largura da imagem será calculada em relação à largura da janela de exibição. Ambos os atributos, src e srcset, são ferramentas valiosas para garantir uma experiência de usuário otimizada, fornecendo imagens de qualidade e tamanho apropriados, dependendo das características do dispositivo utilizado para acessar a página da web.
