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!
Solucionado
Olá.
No vídeo, a partir de 1 minuto, a Dani fala em resolução máxima mas não é possível ver esta resolução porque o rosto dela está em cima da configuração. Que resolução é essa? E, por favor, só tomem mais cuidado com esta situação. Ou poderia ser colocada na transcrição ou feita uma edição no vídeo informando isso.
Obrigado.
Olá, Alexsander. Como vai?
Muito obrigado pelo seu feedback! Essa percepção é super importante para podermos aprimorar cada vez mais a qualidade visual das nossas aulas e garantir que nenhum detalhe do código ou da configuração fique oculto para você. Vou encaminhar a sua sugestão diretamente para a equipe de edição e conteúdo para que possamos ajustar a transcrição ou aplicar uma nota informativa no vídeo.
Respondendo diretamente à sua dúvida sobre o conteúdo desse trecho:
No contexto de imagens responsivas no HTML, quando trabalhamos com telas de alta densidade de pixels (como as telas Retina da Apple ou displays 4K/DPI elevados de celulares e tablets modernos), um pixel físico do dispositivo não corresponde necessariamente a apenas um pixel da imagem.
Para evitar que a imagem fique borrada ou serrilhada nesses aparelhos, a instrutora Dani estava configurando o dobro da resolução padrão do layout utilizando o descritor de densidade de tela (2x) ou calculando o dobro da largura em pixels nativos (w).
A configuração exata que costuma ser utilizada nessa atividade para cobrir o "dobro da resolução" padrão do tablet e do desktop segue a seguinte lógica técnica no atributo srcset:
No código, a estrutura que fica oculta ou que serve de base para essa técnica é aplicada dessa forma dentro da tag picture ou no atributo srcset da tag img:
<img src="imagem-padrao.jpg"
srcset="imagem-padrao.jpg 1x, imagem-dobro-resolucao.jpg 2x"
alt="Descrição da imagem">
Ou utilizando larguras em pixels (w), que deixa o navegador calcular a melhor opção de forma dinâmica:
<source media="(min-width: 768px)" srcset="foto-tablet.jpg 1x, foto-tablet-2x.jpg 2x">
Nas dimensões específicas do curso, se a largura base recomendada para o corte do dispositivo era de 768px (resolução base de tablet), o "dobro da resolução" para aquela imagem que ela estava configurando corresponde a um arquivo exportado com 1536px de largura total.
Agradeço novamente o aviso e o cuidado com o nosso material. Se precisar de ajuda para estruturar o código do seu desafio com essas imagens, conte comigo!
Espero que possa ter lhe ajudado!
bom dia Evando... obrigado pela pronta resposta.
Estou realmente gostando muito da abordagem e profissionalismo da Dani durante o curso - que venham outros cursos dela - , mas ficou somente esta questão.
Mas gostei destas informações que vc passou junto com o retorno.
Grande abraço e fiquem com Deus!