Como otimizar imagens
para web e SEO

O formato que escolhe tem o maior impacto no tamanho do ficheiro e na qualidade. Os formatos modernos proporcionam ficheiros dramaticamente mais pequenos com a mesma qualidade visual em comparacao com padroes mais antigos. Eis o que usar e quando.

A abordagem ideal e servir multiplos formatos usando o elemento HTML <picture>. Ofereca AVIF primeiro, WebP como alternativa e JPEG como recurso final. O navegador escolhera automaticamente o melhor formato que suporta.

A compressao reduz o tamanho do ficheiro removendo dados que o olho humano nao consegue perceber facilmente. O segredo e encontrar o ponto ideal onde o tamanho do ficheiro diminui significativamente mas a qualidade permanece visualmente identica ao original.

Existem dois tipos de compressao. A compressao com perda (JPEG, WebP, AVIF) remove permanentemente dados para obter ficheiros mais pequenos - e o que quer para fotografias na web. A compressao sem perda (PNG, WebP lossless) preserva cada pixel mas alcanca reducoes menores - melhor para graficos e capturas de ecra.

Ferramentas como Squoosh, ImageOptim ou Sharp (Node.js) permitem-lhe pre-visualizar a diferenca de qualidade antes de confirmar. Compare sempre a versao comprimida com o original em tamanho real antes de publicar.

O texto alternativo (o atributo alt nas tags <img>) serve dois propositos: descreve a imagem para leitores de ecra e utilizadores com deficiencia visual, e diz aos motores de busca o que a imagem contem. O Google usa o texto alternativo como sinal primario para o posicionamento na pesquisa de imagens.

Um bom texto alternativo e descritivo, conciso e inclui naturalmente palavras-chave relevantes sem exagerar. Em vez de "foto.jpg" ou "imagem1", escreva algo como "golden retriever a correr por folhas de outono num parque". Descreva o que esta na imagem, nao o que e (evite comecar com "imagem de" ou "fotografia de").

Para imagens decorativas que nao acrescentam valor informativo (bordas, espacadores, padroes de fundo), use um atributo alt vazio (alt="") para que os leitores de ecra as saltem completamente.

O carregamento diferido adia o carregamento de imagens ate estarem prestes a entrar na area visivel. Isto significa que uma pagina com 50 imagens nao descarrega as 50 no carregamento inicial - apenas as visiveis no ecra. As restantes carregam a medida que o utilizador faz scroll. Isto reduz dramaticamente o tempo de carregamento inicial e o consumo de largura de banda.

Em HTML moderno, o carregamento diferido e tao simples como adicionar loading="lazy" as suas tags <img>. Nao aplique carregamento diferido a imagens visiveis acima da dobra (o primeiro ecra) - estas devem carregar imediatamente para evitar mudancas de layout e pontuacoes fracas de Largest Contentful Paint (LCP).

As imagens responsivas adaptam-se a diferentes tamanhos de ecra para que os utilizadores moveis nao descarreguem uma imagem de 4000px de largura quando o seu ecra tem apenas 400px. Use os atributos srcset e sizes para fornecer multiplas resolucoes. O navegador escolhe a versao mais pequena que se adequa ao ecra do utilizador, poupando largura de banda e melhorando o tempo de carregamento.

Especifique sempre os atributos width e height em cada imagem para prevenir o Cumulative Layout Shift (CLS) - uma metrica Core Web Vitals que penaliza paginas onde o conteudo salta durante o carregamento.

Os nomes de ficheiros de imagem sao outro sinal de SEO que muitas pessoas ignoram. Os motores de busca leem os nomes de ficheiros para compreender o conteudo da imagem. Um ficheiro chamado por-do-sol-sobre-o-lago-genebra.webp diz ao Google muito mais do que IMG_4829.webp.

Para SEO avancado, adicione dados estruturados (schema.org ImageObject) as suas paginas. Esta marcacao indica aos motores de busca a legenda da imagem, criador, licenca e URL do conteudo. Paginas com dados estruturados tem maior probabilidade de aparecer nos resultados de pesquisa de imagens do Google com rich snippets.

Se adicionar marca d'agua as suas imagens antes de publicar, a propria marca d'agua torna-se parte do ficheiro. Para orientacoes sobre marca d'agua sem prejudicar a qualidade da imagem, consulte o nosso guia de boas praticas de marca d'agua.

Fotografos e criadores enfrentam um desafio unico: querem imagens que fiquem deslumbrantes na web, carreguem rapidamente para SEO e permanecam protegidas contra roubo. Estes objetivos podem parecer contraditorios, mas nao sao - so precisa de um fluxo de trabalho claro.

Mantenha os seus ficheiros originais de alta resolucao guardados com seguranca offline - sao os seus mestres e a sua prova de autoria. Para a web, exporte versoes redimensionadas (normalmente 1200-2000px no lado mais longo) em formato WebP com qualidade 80. Isto da-lhe excelente qualidade visual a uma fracao do tamanho original do ficheiro.

Antes de carregar, adicione uma marca d'agua as suas versoes web. Uma marca d'agua semi-transparente com 30-40% de opacidade nao afetara significativamente o tamanho do ficheiro ou a velocidade de carregamento, mas fornece protecao visual que dissuade o roubo casual. Apos adicionar a marca d'agua, passe a imagem por uma ferramenta de compressao para uma reducao final de tamanho.

Para o guia completo sobre como proteger as suas imagens alem da otimizacao, consulte o nosso artigo sobre proteger fotos contra roubo online e o nosso tutorial de marca d'agua.