Como usar responsive images com srcset Print

Como usar imagens responsivas com srcset para deixar seu site mais rápido e bonito

Olá, viajante da web! Se você já se perguntou por que algumas imagens demoram muito para carregar em celulares ou parecem pixeladas em telas grandes, hoje vamos resolver isso com uma técnica simples, poderosa e super recomendada: imagens responsivas usando srcset.

Imagine ter uma imagem que se ajusta perfeitamente ao dispositivo do seu visitante — rápida em celulares, nítida em monitores de alta resolução. Isso é possível, e a GeHost te ajuda a fazer isso com um toque de magia no código.

O que é srcset?

É uma característica do HTML que permite definir múltiplas versões de uma mesma imagem, cada uma otimizada para diferentes tamanhos de tela. O navegador escolhe automaticamente a melhor imagem para o dispositivo do usuário.

Dica do Sensei: Usar srcset é como ter um guarda-roupa com roupas de todos os tamanhos — o cliente só veste a que combina. Nada de sobrecarga, nada de imagem pequena em tela grande!

Passo a passo: como usar srcset no seu site

É simples! Vamos usar apenas código HTML — nada de instalar plugins ou mexer em configurações complexas.

1. Prepare suas imagens em diferentes tamanhos. Por exemplo:

   • Imagem pequena: 400px (para celulares)
   • Imagem média: 800px (para tablets)
   • Imagem grande: 1600px (para monitores)

   Salve-as com nomes claros, como foto-pequena.jpg, foto-media.jpg e foto-grande.jpg.

2. Abra o arquivo HTML onde você quer exibir a imagem. Isso pode ser uma página do seu site, um post no blog ou um formulário.

   Se você não sabe onde está esse arquivo, o Gerenciador de Arquivos do cPanel é o seu aliado. Vamos lá:

   

   Entre na pasta public_html — é onde estão todos os arquivos do seu site.

3. Edite o código HTML da página onde a imagem aparece. Você pode usar o editor de arquivos do cPanel ou qualquer editor de texto (como o VS Code).

   Substitua o código antigo da imagem assim:

   <img src="foto-grande.jpg" alt="Descrição da imagem" />

   Pela versão com srcset:

   <img 
     src="foto-pequena.jpg" 
     srcset="foto-pequena.jpg 400w, 
             foto-media.jpg 800w, 
             foto-grande.jpg 1600w" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="Paisagem do parque ao entardecer" 
   />

   Pronto! Agora o navegador sabe que existem várias versões e escolhe a mais adequada.

4. Salve o arquivo e atualize seu site no navegador. Teste em diferentes dispositivos ou use o modo de desenvolvedor do Chrome (Ctrl+Shift+I) para simular celulares e tablets.

   Veja como o navegador carrega apenas a imagem certa — sem sobrecarga!

Por que isso melhora o desempenho?

Imagine um visitante no celular. Se ele carregasse uma imagem de 1600px, gastaria mais dados, mais tempo e mais bateria. Com srcset, ele recebe apenas a imagem de 400px — rápida, leve e perfeita para o seu celular.

Além disso, o CDN da GeHost já está preparado para entregar essas imagens de forma inteligente, garantindo que seu site seja rápido em qualquer lugar do mundo.

Dica do Sensei: Use sizes para dizer ao navegador como a imagem será exibida — isso ajuda na escolha certa da imagem. Por exemplo: "em telas pequenas, ocupe 100% da largura; em telas grandes, 50%".

Conclusão: seu site com olhos no futuro

Usar srcset é uma das formas mais eficazes de melhorar o desempenho do seu site, sem precisar de tecnologias complexas. É uma prática recomendada por especialistas do Google e do W3C.

Com a GeHost, você tem tudo o que precisa: um CDN rápido, um cPanel simples e uma equipe que acredita que o sucesso do seu site começa com um bom carregamento.

Seu site está pronto para o futuro. E você, já está pronto para brilhar?

Com carinho, seu Sensei da GeHost 🌟