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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!