Cyber Monday

ATÉ 40% OFF

TÁ ACABANDO!

0 dias

0 horas

0 min

0 seg

Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

em questão de imagens no GIMP

Quando eu estou fazendo um site com responsividade, é necessário redimensionar a imagem no GIMP para cada tela responsiva e salvar na pasta imagens, ou apenas uso o código para aumentar seu tamanho de forma relativa sem alterar a imagem padrão no GIMP.

1 resposta
solução!

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

Imagem da comunidade