Otimize imagens do site com dimensões adequadas, compressão, formatos e carregamento planejado, preservando qualidade visual e acessibilidade.
Uma foto de grande resolução pode ser adequada para impressão e excessiva para um card no celular. Quando o site envia arquivos maiores que o necessário, a pessoa espera por informação que poderia chegar com menos transferência. O desafio é reduzir esse trabalho sem prejudicar o que a imagem precisa mostrar.
A otimização começa pela função de cada imagem e pela forma como ela aparece na página. Não existe um tamanho de arquivo único para qualquer fotografia, ilustração ou gráfico. Este roteiro ajuda a revisar o processo, escolher prioridades e conversar com quem desenvolve o site sem tratar uma pontuação de ferramenta como objetivo isolado.
Escolha páginas representativas: home, serviço, artigo e formulário, por exemplo. Observe quais imagens aparecem primeiro, quais estão abaixo da área inicial e quais ajudam na decisão. Uma fotografia decorativa repetida pode ter prioridade menor que a imagem principal de um produto. Registre endereço do arquivo, dimensões, peso e local de uso para identificar reaproveitamentos inadequados.
Abra essas páginas no celular e em uma conexão limitada. A percepção de demora pode vir da imagem, do servidor, de scripts ou de várias causas combinadas. Use as ferramentas do navegador para conferir as solicitações, sem concluir apenas pelo peso total da página. O inventário transforma uma recomendação vaga de “comprimir tudo” em uma fila de alterações com propósito claro.
Se uma imagem ocupa um pequeno espaço, enviar o original da câmera pode desperdiçar transferência. Gere versões de tamanhos diferentes e permita que o navegador escolha uma fonte adequada ao espaço e à densidade de tela. A documentação de imagens responsivas do web.dev explica recursos como srcset e sizes, que precisam corresponder ao layout real.
Dimensionar exige preservar nitidez suficiente para a função da imagem. Uma captura de tela com texto pequeno pode precisar de outro recorte ou de explicação em HTML, em vez de um arquivo gigantesco. Defina também largura e altura ou proporção adequada para reservar espaço durante o carregamento. O visitante não deveria perder o ponto de leitura porque a fotografia empurrou o conteúdo quando apareceu.
Teste alternativas como WebP ou AVIF quando forem compatíveis com a entrega, considerando também o conteúdo e o processo utilizado no site. Não conclua que um formato será sempre o menor em qualquer imagem. Fotografia, transparência, diagrama e logotipo têm necessidades distintas. Arquivos vetoriais podem ser adequados a alguns elementos, desde que sejam seguros e bem produzidos.
Compare o resultado no tamanho em que será visto. Procure borrões em rostos, artefatos em bordas e perda de legibilidade. Guarde os originais fora do fluxo público para poder gerar novas versões, evitando recomprimir repetidamente um arquivo já degradado. A aprovação deve considerar peso e utilidade da imagem juntos; uma redução que apaga informação necessária não é uma boa otimização.
Imagens fora da área inicial podem ser candidatas ao carregamento adiado. Já uma imagem importante visível logo na abertura precisa ser avaliada de outra forma. O web.dev orienta a não aplicar carregamento preguiçoso indiscriminadamente às imagens que aparecem imediatamente. Quem implementa deve verificar quais recursos são críticos para cada modelo de página.
Confirme a experiência depois da mudança, incluindo rolagem rápida, navegação por teclado e telas de diferentes tamanhos. A imagem precisa aparecer quando a pessoa chega ao conteúdo, sem criar espaços confusos ou atrasar a informação principal. Verifique se uma biblioteca antiga está duplicando o comportamento do navegador. A simplificação da implementação pode ser tão útil quanto trocar o formato de um arquivo.
Escreva texto alternativo conforme a função da imagem no contexto. Uma imagem informativa precisa de alternativa que comunique sua finalidade; uma imagem apenas decorativa pode exigir tratamento diferente. Evite usar o campo como depósito de palavras-chave. Se o conteúdo contém instruções, valores ou informações essenciais, disponibilize essa informação de maneira acessível na página.
Depois de otimizar, compare medições em condições semelhantes e confira a aparência real. Dados de laboratório ajudam a diagnosticar, enquanto dados de uso real, quando disponíveis, mostram outra perspectiva. Registre um padrão de publicação com recorte, dimensões, geração de versões e revisão visual. Sem esse cuidado, o próximo envio de um original enorme pode desfazer o ganho conseguido nas páginas atuais.
Exemplo hipotético
Um escritório fictício usa a mesma fotografia original na abertura de um artigo e em todos os cards do blog. A revisão identifica que os cards transferem uma versão desnecessariamente grande. O responsável cria variantes adequadas aos espaços e mantém um arquivo mais detalhado para a abertura quando isso faz sentido.
A equipe confere recorte, texto alternativo e estabilidade do layout. Em seguida, testa uma lista de artigos com rolagem no celular para verificar o carregamento das capas. O cenário mostra uma prioridade concreta de manutenção; não apresenta uma redução percentual de peso nem um resultado atribuído a um trabalho real da Exponency.
Deslize o infográfico para ver todos os detalhes ou abra a versão em texto abaixo.
Não. Dimensões excessivas, prioridade de carregamento e quantidade de imagens continuam relevantes. Compare formatos em imagens representativas e confira a qualidade no contexto. A conversão pode ajudar, mas não substitui o desenho da entrega responsiva.
Não. Imagens importantes para a abertura da página podem ser prejudicadas por essa configuração. Analise quais recursos aparecem inicialmente em cada layout e valide a mudança. Uma regra global aplicada sem revisão pode atrasar justamente o conteúdo que a pessoa espera ver.
Sua função principal é oferecer uma alternativa para o conteúdo da imagem em situações como o uso de leitores de tela. Ele faz parte da qualidade da experiência, mas não reduz o tamanho do arquivo. Revise acessibilidade e desempenho como necessidades complementares.
As referências apoiam conceitos e detalhes técnicos. O roteiro de aplicação e os exemplos são uma síntese editorial; consulte o contexto e os limites de cada fonte.
Use a ferramenta sem sair da leitura. Suas respostas são processadas no navegador e não preenchem o formulário de contato.
LCP, INP e CLS apontam dimensões diferentes da experiência. Separe campo e laboratório, localize a tarefa afetada e investigue a causa antes de priorizar correções.
Leitura estimada: 5 minComece a revisão de acessibilidade pelas tarefas importantes. Teste teclado, leitura e formulários, registre barreiras e preserve a diferença entre triagem e avaliação completa.
Leitura estimada: 5 minSEO técnico começa pela base de acesso e conteúdo. Priorize impedimentos verificáveis e confirme correções sem prometer indexação ou posição.
Leitura estimada: 5 min
