Não sei se talvez seja a trilha que eu me encontro, mas fiquei bem confuso com a aplicação do srcset e suas variações de w para px. Se tiverem algum material de apoio para ilustrar isso agardeço.
Não sei se talvez seja a trilha que eu me encontro, mas fiquei bem confuso com a aplicação do srcset e suas variações de w para px. Se tiverem algum material de apoio para ilustrar isso agardeço.
Oii, Marconi!
Agradeço por compartilhar sua dúvida com a comunidade Alura.
Essa questão do srcset realmente pode parecer confusa no início, principalmente quando envolvemos os conceitos de responsividade e as unidades como w e px.
O atributo srcset é utilizado para oferecer múltiplas versões da mesma imagem, permitindo que o navegador escolha automaticamente a mais adequada com base na largura da tela e na densidade de pixels do dispositivo. Quando usamos a unidade w (de width), estamos informando ao navegador a largura real da imagem em pixels. Isso ajuda o navegador a tomar uma decisão melhor, dependendo do espaço disponível e da resolução.
Por exemplo:
<img
src="imagem-pequena.jpg"
srcset="imagem-pequena.jpg 480w, imagem-media.jpg 800w, imagem-grande.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
alt="Exemplo de imagem responsiva">
Nesse exemplo:
Isso garante que imagens menores sejam carregadas em telas menores, otimizando o desempenho da página.
Uma dica importante é sempre testar seu layout em diferentes tamanhos de tela, seja no navegador com o modo de responsividade ativado ou em dispositivos reais.
E também esse artigo completo da Alura que vai direto ao ponto:
Espero ter ajudado a clarear um pouco mais esse recurso do HTML.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!