Imagens grandes e não otimizadas são a causa número um de páginas lentas, e páginas lentas perdem visitantes e posições no ranking. A boa notícia é que fazer imagens carregarem mais rápido é simples: escolha o formato certo, redimensione as imagens para o tamanho em que são exibidas, comprima-as e deixe o navegador e uma CDN cuidarem do resto. Este guia mostra todas as técnicas de otimização de imagens que melhoram o tempo de carregamento, com ferramentas gratuitas para fazer cada etapa no seu navegador.
As imagens costumam ser a parte mais pesada de uma página. Quando são grandes demais, a página demora mais para carregar, os visitantes desistem, e o Google, que usa a velocidade da página e os Core Web Vitals como fatores de classificação, percebe isso. Otimizar suas imagens é uma das ações de maior impacto que você pode tomar tanto para a experiência do usuário quanto para o SEO.
O maior erro é enviar uma imagem enorme e deixar o navegador reduzi-la na tela. Se o seu layout mostra uma imagem com 800 pixels de largura, servir um arquivo de 4000 pixels desperdiça a maior parte do download. Redimensione as imagens para as dimensões em que realmente aparecem antes de enviá-las.
Use nossa ferramenta gratuita Redimensionar Imagem para definir dimensões exatas em pixels no navegador, ou Redimensionar Imagens em Lote para fazer uma pasta inteira de uma vez, o que é perfeito para uma galeria ou portfólio com muitas imagens.
A compressão remove dados que o olho não percebe, reduzindo drasticamente o tamanho do arquivo com pouca ou nenhuma perda visível de qualidade. É a forma mais rápida de diminuir o peso das imagens.
Comprima uma única imagem com nossa ferramenta Comprimir Imagem, que pode até atingir um tamanho exato em KB, ou processe um lote com Comprimir Imagens em Lote. Tudo acontece no seu navegador, então seus arquivos nunca são enviados.
O formato que você escolhe afeta tanto a qualidade quanto o tamanho do arquivo:
Um celular não precisa da mesma imagem grande que um computador. Use o atributo srcset ou um recurso de imagens responsivas no seu CMS para que cada dispositivo baixe uma imagem no tamanho da sua tela. Só isso já pode reduzir bastante o tempo de carregamento no celular.
O carregamento lento adia as imagens fora da tela até o visitante rolar até elas, então a página fica utilizável muito mais rápido. Os navegadores modernos oferecem suporte nativo: basta adicionar loading="lazy" às suas tags de imagem, ou ativar no seu CMS.
O cache permite que visitantes recorrentes reutilizem imagens já armazenadas no navegador em vez de baixá-las de novo. Defina um prazo de validade para as imagens na configuração do seu servidor, por exemplo no arquivo .htaccess, para que os navegadores as mantenham por semanas ou meses.
Uma CDN armazena cópias das suas imagens em servidores pelo mundo todo e serve cada visitante a partir do mais próximo, reduzindo a distância que os dados percorrem. Provedores como a Cloudflare podem melhorar bastante a entrega de imagens, especialmente para um público global.
Páginas com muitas imagens, como um portfólio de fotografia ou uma galeria de produtos, exigem cuidado extra, porque o peso das imagens se acumula rápido. A combinação vencedora é:
Juntas, essas etapas podem transformar uma página lenta e cheia de imagens em uma que carrega quase instantaneamente.
Depois de otimizar, meça o resultado. Ferramentas gratuitas como o Google PageSpeed Insights e o GTmetrix avaliam a velocidade da sua página e apontam quais imagens ainda estão grandes demais, então você sabe exatamente o que corrigir em seguida.
Redimensione cada imagem para o tamanho em que é exibida, comprima-a, use um formato moderno como WebP, ative o carregamento lento e sirva as imagens por uma CDN. Redimensionar e comprimir, sozinhos, já costumam dar o maior ganho de velocidade.
As mais eficazes são redimensionar as imagens para o tamanho de exibição, comprimi-las, usar WebP, servir tamanhos responsivos para cada dispositivo, carregamento lento das imagens fora da tela, cache do navegador e uma CDN.
WebP é o melhor formato para velocidade na web moderna. Ele gera arquivos menores que JPG ou PNG na mesma qualidade e suporta transparência. Use JPG para fotos quando WebP não for uma opção.
O Google PageSpeed Insights aponta imagens grandes demais e sem compressão. Corrija redimensionando para o tamanho de exibição, comprimindo, convertendo para WebP e adicionando carregamento lento, depois teste de novo para confirmar que a pontuação melhorou.
Redimensione e comprima em lote todas as imagens, converta-as para WebP e use carregamento lento para que apenas as imagens visíveis carreguem primeiro. Para um portfólio com muitas imagens, esse é o caminho mais rápido para uma página que carrega depressa.
A compressão com perdas remove dados que o olho quase não percebe, então uma imagem bem comprimida fica praticamente idêntica pesando muito menos. A compressão sem perdas mantém cada pixel, mas reduz menos o arquivo.
Imagens mais rápidas significam visitantes mais satisfeitos, menores taxas de rejeição e melhor SEO. Comece pelas duas técnicas de maior impacto: redimensione as imagens para o tamanho de exibição e comprima-as. Nossas ferramentas gratuitas de redimensionar e comprimir, feitas para o navegador, tornam as duas rápidas, e nada que você envia sai do seu dispositivo.