Como usar srcset para servir imagens responsivas

Como usar srcset para servir imagens responsivas (e ganhar velocidade no seu site!)

Olá, querido(a) cliente da GeHost! 😊

Se você já se perguntou por que algumas imagens no seu site demoram para carregar em celulares ou parecem pixeladas em monitores grandes, é porque talvez elas não estejam sendo exibidas da forma mais inteligente.

Hoje, vamos aprender um truque simples, poderoso e super importante para deixar seu site mais rápido e bonito em qualquer dispositivo: o srcset.

Imagine que você tem uma foto de um produto. No celular, ela não precisa ser de 2000 pixels de largura — basta 600. No computador, pode ser maior. O srcset diz ao navegador: “Olha, aqui tem várias versões da imagem. Escolha a que melhor combina com o seu dispositivo”.

É como ter um guarda-roupa com roupas de todos os tamanhos… e o seu corpo escolher a que caber melhor! 👕✨

Passo a passo: como usar srcset no seu site

1. Prepare suas imagens em diferentes tamanhos

   Antes de tudo, você precisa ter a mesma imagem em tamanhos diferentes. Por exemplo:

   • 1000px (para telas médias, como tablets)
   • 1500px (para telas grandes, como monitores)
   • 2000px (para telas de alta resolução, como Retina)

   Guarde essas versões com nomes claros, como produto-1000.jpg, produto-1500.jpg, produto-2000.jpg.

2. Abra o arquivo HTML onde a imagem aparece

   Use o Gerenciador de Arquivos do cPanel para encontrar o arquivo que contém a imagem — geralmente em public_html ou em uma pasta como site ou loja.

   

   Selecione o arquivo HTML (como index.html ou produtos.html) e clique em Editar (ícone de lápis).

3. Substitua a tag <img> antiga pelo código com srcset

   Encontre a linha com a imagem, que provavelmente está assim:

   <img src="produto.jpg" alt="Produto novo" />

   Substitua por este código mais inteligente:

   <img src="produto-1000.jpg" srcset="produto-1000.jpg 1000w, produto-1500.jpg 1500w, produto-2000.jpg 2000w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="Produto novo" />

   Explicando:

   • src = imagem padrão (a que será usada se o navegador não suportar srcset).
   • srcset = lista de imagens com seu tamanho em w (width).
   • sizes = dicas para o navegador escolher o tamanho ideal com base na largura da tela.

4. Salve e teste!

   Após editar, clique em Salvar no Gerenciador de Arquivos.

   Abra seu site em diferentes dispositivos (celular, tablet, computador) ou use o modo de desenvolvedor do navegador (F12) para simular telas diferentes.

   Veja se a imagem carrega mais rápido e se está com a resolução certa!

Por que isso é incrível para o seu site?

• Menos dados transferidos → seu cliente não paga mais tráfego por imagens gigantes.
• Melhor desempenho → páginas carregam mais rápido, o que melhora SEO e experiência.
• Imagens mais nítidas → em cada dispositivo, a imagem é exibida no tamanho ideal.

Dica do Sensei: Nunca use a mesma imagem gigante para todos os dispositivos. É como colocar um carro em um beco — ocupa espaço, não serve bem. Use srcset e deixe o navegador escolher o melhor caminho. 🚗💨

Pronto! Você está no caminho do sucesso digital.

Com srcset, você não só deixa seu site mais rápido — você mostra que se importa com a experiência do seu visitante. E isso, meu amigo, é o coração de um bom site.

Se tiver dúvidas, é só chamar a nossa equipe. Estamos aqui pra te ajudar, sempre. 💚