Como otimizar imagens para Web: guia de otimização de imagens

Otimizar imagens para Web faz com que seu site carregue mais rápido e que seus visitantes não tenham que esperar tanto pelo carregamento. Os visitantes de seu site querem imagens otimizadas e de tamanho reduzido, portanto, é importante aprender a otimizar imagens para a web a fim de servir páginas rápidas e de qualidade.

Entender o básico sobre compressão e otimização de imagens e seus formatos permite escolher não somente qual a melhor maneira de reduzir o tamanho de imagens, mas também melhorar a qualidade de imagens.

E é exatamente o que este guia de otimização de imagem vai mostrar: como otimizar imagens para Web, mostrando os diferentes tipos de imagem, para o quê cada um é recomendado e como aproveitar o máximo essa otimização.

O que é otimização de imagens

Otimização de imagens para Web é um processo de entrega de imagens de alta qualidade no formato, dimensão, tamanho e resolução corretos.

Essa otimização pode ser feita de diferentes maneiras (e até combinando diversas técnicas), seja através do redimensionamento de imagens, compressão, mudança do formato da imagem, cache e muitas outras.

Nem sempre as imagens que serão usadas em um site estão otimizadas para a Web; pelo contrário: grande parte das causa de performance ruim em sites e aplicativos pode ser atribuída ao uso de imagens pouco otimizadas (ou não otimizadas).

Imagine, por exemplo, que você foi contratado para fazer o site do portfolio de um fotógrafo. As chances são de que ele enviará imagens/fotos em especificações destinadas exclusivamente à fotografia (DPI alto, tamanho e peso enormes etc.); será preciso adequar essas imagens ao ambiente online.

Este foi somente um exemplo, mas, em geral, problemas bastante comuns relacionados ao mau uso de imagens em sites e aplicativos Web são:

• Imagens muito grandes (largura e altura)
• Imagens muito pesadas (excesso de KB)
• Formato da imagem inadequado (cada formato tem seu propósito)
• Imagens “quebradas” (caminho/URL incorreto)

Nosso guia de otimização de imagens traz informações e mostra como como otimizar imagens para Web.

Por que otimizar imagens para Web?

É de conhecimento geral entre desenvolvedores web (especialmente front end) que uma das principais causas de lentidão em sites/apps é o uso inadequado de imagens.

Mesmo se você estiver rodando o projeto nos melhores servidores, com infras otimizadas e sistema de caching, imagens usadas da maneira errada vão fazer do seu site mais lento, deixando a experiência de uso aquém do que poderia ser.

Há, também, motivos de negócios. Por exemplo, se você não conta com servidor com armazenamento e transferência ilimitados, quanto mais otimizadas suas imagens estiverem, melhor vai ser para seu plano de hospedagem.

Em termos gerais, você deve levar a otimização de imagem a sério porque:

• Aprimora a experiência de quem usa o site/aplicativo
• Melhora as chances de o site ficar em melhores posições no Google
• Diminui o número de abandonos do site (que acontecem porque a página demorou demais para carregar)
• Aumenta o número de páginas do site visualizadas em cada sessão
• Impulsiona conversões
• Melhora suas chances de se sobressair ante projetos concorrentes
• etc.

Com isso, fica mais do que claro que otimizar imagem para Web é bastante importante, trazendo diversos benefícios para qualquer site ou app.

Importância de otimizar imagens para sites

Um excelente motivo pelo qual você deve dar atenção em otimizar imagens é proporcionar sites mais leves e com melhor performance ao seus visitantes, o que afeta diretamente suas experiências de uso e navegação.

Há informações a partir de relatórios feitos em milhares de sites que indicam que, idealmente, o tempo de carregamento de sites mobile deva ser de, no máximo, 3 segundos (alguns estudos indicam até 2 segundos). Mais da metade dos visitantes (53%) abandonam o site se o carregamento demorar mais do que isso.

É sabido que sites lentos são uma das principais razões que ocasionam o abandono de um site para, adivinhe, procurar a informação/produto no concorrente. E — adivinhe novamente — esses são visitantes que dificilmente escolherão este site (que se mostrou lento) no futuro.

Outro motivo essencial para você se importar em otimizar imagens para Web é que isso afeta diretamente a posição de seus sites em mecanismos de busca.

Em SEO, o conteúdo ainda é o mais importante, mas otimização de imagens web também é um fator levado em consideração pelo Google (e, possivelmente, demais mecanismos de busca), podendo ser a diferença entre você aparecer em um posição melhor ou não.

Então agora você já sabe, dentre muitas outras razões, otimização de imagem para Web traz grandes benefícios relacionados a:

• Performance. Garantir que o site seja carregado da maneira mais rápida e fácil possível é essencial para o desempenho geral do site.
• User Experience. Imagens otimizadas também são imagens mais úteis e relevantes para os visitantes.
• SEO. Imagens otimizadas também são parte integrante de SEO on-page e ajudam a complementar outros esforços de SEO (por exemplo, aparecendo bem posicionadas em SERPs, aumentando visitas e engajamento etc.).

Com tudo isso, provendo um site mais performático, com carregamentos reduzidos e otimizado, o número de páginas por sessão tende a aumentar; a Taxa de Abandono (Bounce Rate) a diminuir; conversões de campanhas serem impulsionadas; aumentar consideravelmente taxas de conversão; etc.

Resultado de uma análise em 500 sites

Em 2019, a Uploadcare fez uma análise dos top 500 sites do mundo (segundo o Alexa) para correlacionar, dentre outros fatores, o impacto que imagens não otimizadas trazem ao Performance Score da Google — já que performance é, atualmente, um fator muito importante de classificação de sites no Google.

Essa análise das principais páginas de 500 sites indicou os seguintes dados de média:

• Número de imagens. 43 em desktop e 23 em mobile.
• Peso da página. 3,64MB para desktop e 2,69MB para mobile.
• Peso de conteúdo de imagem. 1,40 / 0,74 MB, que resulta em 33 / 32 KB por imagem.
• Tempo de carregamento de página. 7,6 segundos em banda larga (10Mb/s) e 13,92 segundos em 4G lento (1.5 Mb/s).
• Performance Score (Lighthouse). 64 em desktop e 48 em mobile.

Muitas outras estatísticas devem ser levadas em consideração, mas ficou claro que os top 500 sites analisados, em geral, apresentam uma média de otimização insuficiente para as exigências de acesso atuais.

Formato de imagem e compressão

Quando o assunto é otimização de imagem, uma das etapas fundamentais é saber escolher o formato adequado para as imagens que serão usadas.

É preciso estar ciente das características e indicações de uso entre os formatos mais comuns de imagens para Web, que são JPG, PNG, WebP e GIF.

Mas, antes de explicações mais detalhadas sobre cada um desses formatos e sua respectiva indicação de uso, é preciso entender algo primordial: compressão de imagem.

Imagens podem ser otimizadas ao reduzir os dados contidos nelas, o que é chamado de compactação de dados (data compression).

A compactação de dados é uma técnica na qual a quantidade de dados em uma imagem é reduzida. Para fazer isso, existem duas categorias de compactação de dados; compressão com e sem perdas.

Compressão com perda (lossy)

Tecnicamente falando, a compactação com perda (lossy) usa aproximações inexatas e descarte parcial de dados para representar o conteúdo em uma imagem.

Alguns tipos de arquivos de imagem, como JPGs, interpretam pixels de cores e reduzem algumas das informações da imagem para reduzir o tamanho do arquivo e ainda tentar manter o máximo possível da qualidade.

O termo “com perda” também significa que, a cada edição/salvamento da imagem, parte dos dados ali contidos (ou seja, sua qualidade) são perdidos.

É bastante comum ver imagens de baixa qualidade em sites (“estouradas” ou “craqueladas”); muitas vezes, isso acontece devido a múltiplas edições e/ou salvamentos da mesma imagem, que vai corroendo sua qualidade aos poucos.

Compressão sem perda (lossless)

A compactação sem perda (lossless) reduz o tamanho de um arquivo de imagem sem sacrificar a qualidade da imagem. Em outras palavras, nenhum dado é perdido (não há riscos para sua qualidade).

Em um arquivo PNG, por exemplo — que é um bom exemplo de formato com compactação sem perda –, é possível editar/salvar a imagem quantas vezes forem necessárias sem comprometer sua qualidade final.

É natural, ao ler isso, julgar que, então, deve-se sempre usar formatos sem perda. Mas não se precipite; cada formato é destinado a uma função e há vantagens e desvantagens em usar cada um deles.

Qualidade de compressão x Peso

Existem formatos que permitem ajustar a qualidade de compressão da imagem, tornando possível chegar a um “custo benefício” que leva em consideração qualidade final e peso — agora o termo “compressão sem perda” (lossy) vai ficar mais claro.

Veja um comparativo entre usar pouca e muita compressão ao otimizar para Web e as consequências de cada abordagem.

Neste exemplo, usa-se uma taxa de compactação muito baixa, o que resulta na mais alta qualidade (que gera um arquivo mais pesado).

Aqui, está se usando uma taxa de compactação muito alta, o que resulta em uma imagem de qualidade baixíssima (mas que fica mais leve).

Nota: A imagem original tem ~2MB.

Por isso é imprescindível usar um nível de compactação condizente ao objetivo que e quer alcançar com a imagem sem comprometer a performance geral do site (o famoso custo-benefício).

Para auxiliar neste sentido, existem algumas técnicas e ferramentas próprias para diminuir o tamanho e peso de imagens sem comprometer sua qualidade. Tais recursos são mostrados mais à frente.

Qual o formato de imagem apropriado

Quando o assunto é otimizar imagem, saber qual o formato apropriado de imagem é de suma importância.

Esclarecidos alguns pontos sobre os tipos de formatos de imagem indicados para o ambiente online e uma explicação (ainda que breve) sobre compressão de imagens, resta conhecer quais os formatos de imagem mais adequados para cada tipo de situação.

Para não estender muito, as explicações sobre cada tipo de formato serão apresentadas sem muitos detalhes técnicos; de repente, pode ser interessante uma pesquisa à parte sobre estes detalhes.

JPG

JPG (formato .jpg ou .jpeg) é o formato mais indicado para fotos.

Se você vai usar no site uma imagem que foi tirada de uma câmera ou smartphone, JPG é o formato indicado por ser o formato que suporta milhões de cores (e ainda com uma excelente taxa de compressão), equilibrando bem peso e qualidade de imagem.

Características do JPG:

• Indicado para fotos, representação de cenas realistas, modelagens 3D complexas e qualquer outro tipo de imagem com milhões de cores;
• Compressão com perda (lossy);
• Não suporta transparência (alpha).

PNG

PNG (.png) é um formato sem perda (lossless), destinado tanto para imagens de poucas cores, quanto para milhões de cores, devido a suas 2 “versões”, mostradas a seguir.

Outra vantagem do PNG para Web é que se trata de um formato que permite transparência (semitransparência e total), dando o ensejo ao uso para apresentação de imagens próprias ao ambiente online, além de permitir composições interessantes de UI.

Outra peculiaridade do formato é que existem 2 profundidades de cores (color depths), 8-bit e 24-bit, e é muito importante entender a diferença entre PNG8 e PNG24.

PNG 8

PNG 8 oferece suporte a 256 cores, sendo o formato ideal para logos, ilustrações, gráficos, ícones e backgrounds. Arquivos PNG 8 geralmente são bem leves e têm suporte a transparência alpha variável, gerando pixels semitransparentes.

PNG 24

PNG 24 é usado quando você precisa de transparência alpha e mais de 256 cores. PNG24 é também a única opção quando você precisa de uma imagem de qualidade superior e o tamanho do arquivo gerado não importa.

O tamanho das imagens em PNG 24 é geralmente maior que JPG e PNG8. Truecolor PNG é um formato sem perda que pode ter milhões de cores (16 bits por canal) e pode servir perfeitamente como “intermediário” entre diversas edições.

Características do PNG

Por tudo o que foi mostrado, fica claro que PNG é um formato excelente para ser usado na Web, provendo imagens leves e de qualidade, além de suporte a transparência variável (que o formato lida muito bem).

Então, as características do PNG são:

• PNG 8
  • Compressão sem perda (lossless);
  • Máximo de 256 cores;
  • Suporta transparência.
• PNG24
  • Compressão sem perda (lossless);
  • Cores ilimitadas (milhões);
  • Suporta transparência.

WebP

O formato WebP (.webp) é um formato de imagem recente, criado pela Google em 2010 — e tem até site oficial. Usá-lo é uma excelente forma de otimizar imagem.

Devido à sua “juventude”, sua adoção e suporte não são totais, mas o formato WebP tem a vantagem de oferecer imagens menores que JPG e PNG na média de 25-35%.

Quer dizer, o WebP (que oferece compactação com e sem perdas) pode ser um excelente substituto para imagens JPG, PNG e GIF.

Características do WebP:

• Indicado para qualquer casos em que JPG e PNG também o sejam;
• Compressão com perda (lossy) e sem perda (losless);
• Suporta transparência (alpha);
• Não é totalmente difundido/usada;
• Alguns navegadores não oferecem suporte.

Como salvar imagens WebP

Para salvar ou converter imagens para WebP, há soluções como:

• cwebp. Essa ferramenta de linha de comando permite converter uma ou várias imagens, sendo possível o uso de parâmetros para ajustes finos;
• imagemin-webp. Plugin para imagemin que pode ser usado alone ou integrado em algum sistema de build do projeto (Webpack, Gulp, Grunt etc.), requerendo poucas linhas de código para entrar em ação.

Atualmente o suporte de navegadores a WebP está bem decente, mas, dependendo do caso, talvez seja necessário garantir algumas medidas de segurança extras para que não se corra o risco de deixar um “furo” no site.

Para isso, usar a tag <picture> é recomendado:

Caso não haja suporte para .webp, será mostrada a imagem .jpg.

As tags <picture>, <source> e <img>, incluindo como elas são ordenadas uma em relação à outra, todas interagem para atingir esse resultado final.

GIF

Devido à evolução de outros formatos e possibilidades na Web, o formato GIF (.gif) está rapidamente caindo em desuso.

GIF é um tipo de imagem “paleta” (também chamado indexed), que contém até 256 cores. GIF é um formato sem perda, que suporta transparência — mas não tão boa assim: pixels em uma imagem GIF ou são totalmente transparentes ou são totalmente opacos).

GIF também oferece suporte para animações (os famosos gifs animados), que, no fundo, no fundo, são vídeos. E, por serem vídeos sem as características adequadas, costumam ser pesadíssimos (e impróprios para o ambiente digital).

De vez em quando, ainda é possível encontrar gifs animados por aí, mais em razão da praticidade de gerar um arquivo desse tipo ou até mesmo por sua “tradição”.

Em comparação a outros formatos, praticamente não há vantagens e/ou justificativas para usar GIF em projetos Web.

Portanto, nesses idos do séc. XXI, recomenda-se substituir o formato por PNG, WebP ou, até mesmo, em casos de “animação”, por um vídeo — aliás, WebM é um excelente formato para Web e está com suporte cada vez melhor.

Dicas de como otimizar imagens para Web

Existem algumas dicas práticas possível para otimizar imagens para Web. A seguir, veja algumas dessas principais dicas de otimização.

Na verdade, algumas dessas dicas podem ser tangencialmente relacionadas, mas, no final das contas, todas contribuem para se conseguir um site mais rápido através da uso otimizado de imagens.

CDNs para imagens otimizadas

Recorrer a Redes de Distribuição de Conteúdo ou Content Delivery Networks, as famosas CDNs, é uma excelente maneira de otimizar as imagens.

Geralmente, uma CDN serve mais para distribuir arquivos em pontos diversos do mundo, reduzindo o tempo de entrega ao escolher o que está mais próximo da requisição.

Entretanto, existem também CDNs que fora a entrega, fazem transformações e otimizações em imagens — pense nelas como APIs para acessar e manipular as imagens usadas em sites.

Nestes serviços, o URL da imagem indica não apenas qual imagem carregar, mas também parâmetros como tamanho, formato e qualidade. Isso facilita a criação de variações de uma imagem para diferentes casos de uso.

Apesar de ser possível configurar sua própria CDN de manipulação de imagens (com Thumbor, por exemplo), o mais comum é recorrer a serviços de terceiros — que, geralmente, não são tão caros e oferecem períodos de teste ou contas grátis generosas.

Alguns exemplos são:

• imgix
• Cloudinary
• ImageKit.io
• Sirv
• KeyCDN
• Optimole

Compressão de imagens

É essencial comprimir imagens para ter um site otimizado. Imagens não compactadas carregam as páginas de um site com bytes desnecessários.

A foto à direita é quase 5x mais leve que a da esquerda, mas, para a maioria das pessoas, ambas parecerão idênticas.

Claro que essa percepção também depende de outros fatores (inclusive técnicos), mas se a maioria realmente não percebe a diferença, comprimir imagens para otimização é mais do que recomendado.

Mais à frente, em nosso guia de otimização de imagens, você encontra indicações diversas de ferramentas para compressão de imagens.

Lazy loading de imagens

“Lazy loading” (embora impreciso, também conhecido como “carregamento lento”) é a estratégia de carregar recursos conforme necessário, e não com antecedência.

Por exemplo: ao invés de carregar todas as imagens presentes em uma página no momento do acesso, cada imagem só carrega quando ela estiver em tela.

Abundam soluções de código para implementar a técnica de lazy-loading em imagens, havendo algumas mais conhecidas, como lazysizes. Mas qual tecnologia usar também depende do tipo de projeto Web que se está em questão.

Felizmente, hoje em dia também já é possível usar lazy loading nativo de imagens — um pedido antigo da comunidade de desenvolvedores que só recentemente foi atendido pelos principais browser vendors.

Novamente: usar ou não a técnica deve ser considerado de antemão; não é uma solução para todo e qualquer caso de uso; mas, geralmente, usar desta estratégia trará benefícios de performance e UX para um projeto Web.

Imagens responsivas

Entregar uma imagem grande, “tamanho desktop”, quando uma visita se dá em dispositivo móvel, certamente pode causar transtornos ao visitante, dado que é quase certo que muitos dados terão que ser transferidos além do que seria necessário.

Sempre que possível, ao invés da abordagem “uma imagem para todos”, prefira entregar diferentes tamanhos de imagem para contextos de acesso diferentes.

Já abordamos aqui no dpw algumas maneiras de trabalhar com imagens responsivas, incluindo imagens responsivas com srcset e sizes. A coisa está toda explicada, basta estudar, entender e identificar possíveis cenários de implementação.

Há muitos caminhos para conseguir imagens de tamanhos diferentes:

• Seu software preferido. Os bons programas para manipulação de imagens têm funções batch que permitem realizar ações em lote (como redimensionar);
• Ferramentas online. Existem muitas e muitas ferramentas online para redimensionamento de imagens à disposição;
• CDNs. Como mostrado em tópico anterior, é possível usar alguma CDN com capacidade de otimização de imagens (incluindo redimensionar);
• Ferramentas de CLI. Também é farta a presença de ferramentas via linha de comando para isso — como sharp e ImageMagick CLI — , que podem, por exemplo, ser inseridas em um fluxo de automatização.

Outras dicas para otimizar imagens

É comum não ser possível aplicar todas essas dicas de otimização de imagem ao mesmo tempo; esforce-se em conseguir aplicar a maioria delas para colher melhores benefícios.

Aliás, há mais que pode ser feito:

• Substituir GIFs animados por vídeos;
• Entregar imagens com dimensões o mais próximo possível do que será exibido (não contar somente com os atributos width e height de <img>);
• Às vezes, é possível substituir algumas imagens por código CSS ou SVG com o mesmo resultado.

Ferramentas para otimização de imagem

Existem muitas ferramentas e possibilidades para otimizar imagens.

Daremos foco às ferramentas de otimização online e/ou que podem ser usadas diretamente em seu projeto Web para comprimir PNG, comprimir JPG e otimizar imagens, em geral.

Otimizar imagens com ferramentas online

Existem excelentes ferramentas online para auxiliar a otimizar imagem para Web sem perda de qualidade, quer dizer, otimizar imagens para Web online.

É uma prática recomendada usar algumas dessas ferramentas para otimizar suas imagens e obter arquivos de tamanhos menores, como temos enfatizado ao longo de todo o artigo.

Geralmente, automatizar o processo de otimização é mais prático (indicamos diversas ferramentas acima), mas, além de ser comum surgir a necessidade de otimização individual, algumas dessas ferramentas online permitem o upload múltiplo para otimizar várias imagens de uma vez.

• TinyPNG (PNG, JPG)
• Squoosh (WebP, PNG, JPG)
• SVGOMG (SVG)
• Compressor.io (PNG, SVG, JPG, GIF)
• Kraken.io (PNG, JPG)
• vecta.io (SVG)
• JPEGmini (JPG)

Curiosamente, nem sempre uma só ferramenta otimiza melhor toda e qualquer imagem. Então, sempre que for otimizar, faça o teste em pelo menos duas para saber qual imagem otimizada será a melhor para o caso concreto.

Plugins WordPress para otimização de imagem

Se você usa o WordPress como base para seu site/app, você não precisa otimizar imagem para web online em alguma ferramenta (ou fazer otimizações em programas).

Temos boas notícias: existem vários plugins que otimizarão automaticamente arquivos de imagem no momento do upload — alguns até otimizam imagens que já foram enviadas e estão sendo usadas.

Algumas indicações de plugins WordPres para otimizar imagens são:

• Imagify Image Optimizer
• ShortPixel Image Optimizer
• Optimole
• EWWW Image Optimizer Cloud
• Optimus Image Optimizer
• WP Smush
• TinyPNG
• ImageRecycle

Conclusão

Para a maioria das pessoas, o simples termo “otimização de imagem” evoca benefícios auto-evidentes; “otimizar”, independente do quê, geralmente é algo almejado.

No caso de imagens para Web, não poderia ser diferente. Mais ainda, é preciso dar especial atenção a este tipo de otimização, dado que imagens mau utilizadas no ambiente online é uma das principais causas de performance ruim em projetos Web.

Do que foi mostrado em nosso guia de otimização de imagens, as principais lições (e ações práticas) são:

• Usar apropriadamente cada formato de imagem para o fim e propósito a que se destina (e foi criado);
• Se possível, substituir gifs animados por vídeos ou animações CSS/SVG;
• Procurar usar formatos modernos (carinho especial com WebP);
• Sempre que possível, usar lazy loading para imagens;
• Que as dimensões das imagens sejam o mais próximo possível do que será usado (procurar não “abusar” dos atributos width e height);
• Implementar imagens responsivas (versões de tamanhos diferentes da mesma imagem sendo carregadas baseada no contexto de acesso).

Otimizar imagens para Web não é tão simples quanto parece e nem todas as técnicas (geralmente) podem ser usadas ao mesmo tempo.

Faça o melhor que puder — e for possível; como otimizar imagens para Web também depende de contexto — e, certamente, colherá os benefícios de otimização de performance e aumento de UX, aumentando consideravelmente a qualidade de seu projeto Web.