Opa, Matheus! Tudo bem?
A resposta mais direta é que para a responsividade, você usa o código (CSS), mas para a performance, você usa o GIMP (ou ferramentas de otimização).
Permita eu ser mais claro, vamos por partes. Na maioria das vezes, você vai usar apenas o código (CSS) para fazer a imagem se adaptar.
Você pega uma imagem padrão (que tenha uma boa qualidade, por exemplo, 1920px de largura) e aplica o CSS para que ela seja "fluida":
img {
width: 100%;
max-width: 100%; /* Garante que a imagem nunca fique maior que o elemento pai */
height: auto; /* Mantém a proporção da imagem */
}
Isso resolve a parte visual da responsividade. A imagem vai encolher e crescer junto com a tela.
Já Para a Performance (o Carregamento)Uso mais avançado
Aqui entra o ponto principal que a aula mencionou: peso do arquivo.
Imagine que sua imagem padrão de 1920px tem 2MB. Usando o CSS acima, um celular (com tela de 360px) vai carregar os mesmos 2MB desnecessariamente, só para exibir uma imagem minúscula. Isso gasta dados e deixa o site lento.
É aqui que sua ideia de "redimensionar no GIMP" entra, mas de um jeito mais avançado:
- Técnica Profissional (Avançada): Você não cria só uma imagem. Você usa o GIMP para salvar várias versões (ex:
imagem-p.jpg para celular, imagem-m.jpg para tablet, imagem-g.jpg para desktop). - No HTML: Você usa atributos especiais (
srcset e sizes) na tag <img> para "avisar" o navegador sobre essas versões.
<img
srcset="imagem-p.jpg 480w,
imagem-m.jpg 800w,
imagem-g.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
src="imagem-g.jpg"
alt="Descrição">
Assim, o navegador do celular nem baixa a imagem grande; ele escolhe a imagem-p.jpg direto, economizando muito tempo de carregamento.
Mas, para o nível deste curso, o mais importante é focar no método 1 (CSS) para fazer o layout funcionar.
Apenas se preocupe em pegar sua imagem padrão, otimizá-la o máximo possível no GIMP (diminuindo a qualidade ou salvando em WebP, como a aula sugere) e garantir que ela não seja absurdamente pesada.
Mandou bem na pergunta!
Bons estudos!
Sucesso ✨