Como otimizar imagens para desempenho na Web sem perder a qualidade

A otimização de suas imagens antes de carregá-las no WordPress aumenta muito a velocidade do site. No entanto, muitos iniciantes têm sites lentos simplesmente porque carregam imagens não otimizadas.

Na WPBeginner, fazemos das práticas recomendadas de otimização de imagens uma parte de nossa rotina regular de blogs. Certificamo-nos de que todos os nossos autores criem imagens com as dimensões corretas e, em seguida, reduzam o tamanho do arquivo de imagem usando uma variedade de ferramentas gráficas.

Neste artigo, mostraremos como otimizar suas imagens para obter um desempenho mais rápido na Web sem perder a qualidade. Também compartilharemos plug-ins de otimização automática de imagens para WordPress que podem facilitar sua vida.

Como este é um guia abrangente sobre otimização de imagens para a Web, criamos um índice fácil de seguir:

1. O que é otimização de imagens?

A otimização de imagens é o processo de salvar e fornecer imagens no menor tamanho de arquivo possível sem reduzir a qualidade geral da imagem.

Embora o processo pareça complexo, ele é, na verdade, bastante fácil hoje em dia. Você pode usar um dos muitos plug-ins e ferramentas de otimização de imagens para compactar automaticamente as imagens em até 80% sem nenhuma perda visível na qualidade da imagem.

Aqui está um exemplo de uma imagem otimizada e outra não otimizada:

Como você pode ver, quando otimizada adequadamente, a mesma imagem pode ser até 80% menor que a original sem perda de qualidade. Neste exemplo, a imagem é 52% menor.

Como funciona a otimização de imagens?

Em termos simples, a otimização de imagens funciona usando a tecnologia de compactação.

A compactação pode ser “com perdas” ou “sem perdas”.

A compactação sem perdas reduz o tamanho total do arquivo sem perda alguma da qualidade da imagem. Com a compactação com perdas, pode haver uma pequena perda de qualidade, mas o ideal é que ela não seja perceptível para seus visitantes.

O que significa otimizar imagens?

Talvez você tenha recebido uma recomendação para otimizar as imagens do suporte de hospedagem do WordPress ou de uma ferramenta de teste de velocidade e esteja se perguntando o que precisa fazer.

Você precisará reduzir o tamanho do arquivo de suas imagens, otimizando-as para a Web. Mostraremos a você como fazer isso passo a passo.

2. Quais são os benefícios da otimização de imagens?

Embora haja muitos benefícios em otimizar suas imagens, aqui estão os principais que você deve conhecer:

• Maior velocidade do site
• Melhoria das classificações de SEO
• Uma taxa de conversão geral mais alta para vendas e leads
• Menos armazenamento e largura de banda (o que pode reduzir os custos de hospedagem e CDN)
• Backups mais rápidos do site (o que pode reduzir o custo do armazenamento de backup)

As imagens são o segundo item mais pesado em uma página da Web, depois dos vídeos. De acordo com o arquivo HTTP, as imagens representam 42% do peso total de uma página da Web média.

Como sabemos que os sites rápidos são mais bem classificados nos mecanismos de pesquisa (SEO) e têm melhores conversões, a otimização de imagens é algo que todo site comercial deve fazer se quiser ter sucesso on-line.

Agora você deve estar se perguntando qual é a diferença que a otimização de imagens pode realmente fazer.

De acordo com um estudo da Strangeloop, um atraso de um segundo no tempo de carregamento do site pode lhe custar 7% das vendas, 11% menos visualizações de página e uma redução de 16% na satisfação do cliente.

Se esses não forem motivos suficientes para acelerar o seu site, saiba que os mecanismos de pesquisa como o Google também dão tratamento SEO preferencial a sites de carregamento mais rápido.

Isso significa que, ao otimizar suas imagens para a Web, você pode melhorar a velocidade do site e aumentar as classificações de SEO do WordPress.

Tutorial em vídeo

Subscribe to WPBeginner

Se você preferir instruções por escrito, continue lendo.

3. Como salvar e otimizar imagens para desempenho na Web

O segredo da otimização bem-sucedida de imagens para desempenho na Web é encontrar o equilíbrio perfeito entre o menor tamanho de arquivo e a qualidade de imagem aceitável.

Os três fatores que desempenham um papel importante na otimização de imagens são:

• Formato de arquivo de imagem (JPEG vs. PNG vs. GIF)
• Compressão (maior compressão = menor tamanho de arquivo)
• Dimensões da imagem (altura e largura)

Ao escolher a combinação correta dos três, você pode reduzir o tamanho da imagem em até 80%.

Vamos dar uma olhada em cada um deles com mais detalhes.

1. Formato do arquivo de imagem

Para a maioria dos proprietários de sites, os três únicos formatos de arquivo de imagem que realmente importam são JPEG, PNG e GIF. A escolha do tipo de arquivo correto desempenha um papel importante na otimização de imagens.

Para manter as coisas simples, você deve usar JPEGs para fotos ou imagens com muitas cores, PNGs para imagens simples ou transparentes e GIFs somente para imagens animadas.

Para aqueles que não sabem a diferença entre cada tipo de arquivo, o formato de imagem PNG é descompactado, o que significa que é uma imagem de maior qualidade. A desvantagem é que o tamanho dos arquivos é muito maior.

Por outro lado, o JPEG é um formato de arquivo compactado que reduz ligeiramente a qualidade da imagem para proporcionar um tamanho de arquivo significativamente menor.

Já o GIF usa apenas 256 cores, além da compactação sem perdas, o que o torna a melhor opção para imagens animadas.

No WPBeginner, usamos todos os três formatos de imagem com base no tipo de imagem.

2. Compressão

O próximo passo é a compactação de imagens, que desempenha um papel importante na otimização de imagens.

Há diferentes tipos e níveis de compactação de imagem disponíveis. As configurações de cada um variam de acordo com sua ferramenta de compactação de imagens.

A maioria das ferramentas de edição de imagem, como Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo e outras, tem recursos de compactação de imagem incorporados.

Você também pode salvar as imagens normalmente e usar uma ferramenta da Web, como TinyPNG ou JPEGmini, para facilitar a compactação da imagem.

Embora exijam algum esforço manual, esses dois métodos permitem que você comprima imagens antes de carregá-las no WordPress, e é isso que fazemos no WPBeginner.

Há também vários plug-ins populares do WordPress, como o Optimole e o EWWW Image Optimizer, que podem compactar automaticamente as imagens quando você as carrega pela primeira vez. Isso é conveniente, e muitos iniciantes e até mesmo grandes corporações preferem usar esses plug-ins de otimização de imagens.

Compartilharemos mais sobre o uso de plug-ins do WordPress mais adiante neste artigo.

3. Dimensões da imagem

Normalmente, quando você importa uma foto do seu telefone ou de uma câmera digital, ela tem uma resolução muito alta e grandes dimensões de arquivo (altura e largura).

Normalmente, essas fotos têm uma resolução de 300 DPI e dimensões a partir de 2.000 pixels ou mais. Embora as fotos de alta qualidade sejam adequadas para impressão ou editoração eletrônica, seus tamanhos grandes as tornam inadequadas para sites.

Reduzir as dimensões da imagem para algo mais razoável pode diminuir significativamente o tamanho do arquivo de imagem. Você pode simplesmente redimensionar as imagens usando um software de edição de imagens em seu computador.

Por exemplo, otimizamos uma foto com uma resolução de 300 DPI e dimensões de imagem de 4900×3200 pixels. O tamanho do arquivo original era de 1,8 MB.

Escolhemos o formato JPEG para maior compactação e alteramos as dimensões para 1200×795 pixels. O tamanho do arquivo foi reduzido para apenas 103 KB. Isso é 94% menor do que o tamanho do arquivo original.

Agora que você conhece os três fatores importantes na otimização de imagens, vamos dar uma olhada em várias ferramentas de otimização de imagens para proprietários de sites.

4. Melhores ferramentas e programas de otimização de imagens

Como mencionamos anteriormente, a maioria dos softwares de edição de imagens vem com configurações de otimização e compactação de imagens.

Além do software de edição de imagens, há também várias ferramentas poderosas e gratuitas de otimização de imagens que você pode usar para otimizar imagens para a Web (com apenas alguns cliques).

Recomendamos o uso dessas ferramentas para otimizar as imagens antes de carregá-las no WordPress, especialmente se você for perfeccionista.

Esse método ajuda a economizar espaço em disco na sua conta de hospedagem do WordPress e garante a imagem mais rápida com a melhor qualidade, pois você revisa manualmente cada imagem.

Adobe Photoshop

O Adobe Photoshop é um aplicativo premium de edição de imagens que permite exportar imagens com um tamanho de arquivo menor para a Web.

Usando a caixa de diálogo de exportação, você pode escolher um formato de arquivo de imagem (JPG, PNG, GIF) que ofereça o menor tamanho de arquivo.

Você também pode reduzir a qualidade da imagem, as cores e outras opções para diminuir ainda mais o tamanho do arquivo.

GIMP

O GIMP é uma alternativa gratuita e de código aberto ao Adobe Photoshop. Ele pode ser usado para otimizar suas imagens para a Web. A desvantagem é que ele não é tão fácil de usar quanto algumas outras soluções desta lista.

Primeiro, você precisa abrir a imagem no GIMP e, em seguida, selecionar a opção Arquivo ” Exportar como…. Isso abrirá a caixa de diálogo Exportar imagem, na qual você poderá dar um novo nome ao arquivo. Em seguida, você precisa clicar no botão “Exportar”.

Agora você verá as opções de exportação de imagens. Para arquivos JPEG, você pode usar o controle deslizante “Quality” (Qualidade) para selecionar o nível de compactação e reduzir o tamanho do arquivo.

Por fim, você deve clicar no botão “Exportar” para salvar o arquivo de imagem otimizado.

TinyPNG

O TinyPNG é um aplicativo da Web gratuito que usa uma técnica inteligente de compactação com perdas para reduzir o tamanho dos seus arquivos PNG e JPEG. Tudo o que você precisa fazer é acessar o site e carregar suas imagens usando o simples recurso de arrastar e soltar.

Eles compactarão a imagem e fornecerão um link para download.

Eles também têm uma extensão para o Adobe Photoshop, que é o que usamos como parte de nosso processo de edição de imagens, pois permite acessar o TinyPNG de dentro do Photoshop.

Para os desenvolvedores, eles têm uma API para converter imagens automaticamente. Além disso, para iniciantes, eles têm um plug-in do WordPress que fará isso por você. Falaremos mais sobre isso mais tarde.

JPEGmini

O JPEGmini usa uma tecnologia de compactação sem perdas que reduz significativamente o tamanho das imagens sem afetar sua qualidade percebida. Você também pode comparar a qualidade da imagem original e da imagem compactada.

Você pode usar a versão da Web gratuitamente ou comprar o programa para o seu computador. Eles também têm uma API paga para automatizar o processo em seu servidor.

ImageOptim

OImageOptim é um utilitário para Mac que permite compactar imagens sem perder qualidade, encontrando os melhores parâmetros de compactação e removendo perfis de cores desnecessários.

Uma alternativa ao Windows é o Trimage.

5. Melhores plug-ins de otimização de imagens para WordPress

Acreditamos que a melhor maneira de otimizar suas imagens é fazer isso antes de carregá-las no WordPress. Entretanto, se você tiver um site com vários autores ou precisar de uma solução automatizada, poderá experimentar um plug-in de compactação de imagens do WordPress.

Aqui está nossa lista dos melhores plug-ins de compactação de imagens do WordPress:

1. Optimole, um plug-in popular da equipe por trás do ThemeIsle
2. Otimizador de imagens EWWW
3. Compressão de imagens JPEG, PNG e WebP, um plug-in da equipe do TinyPNG mencionada acima
4. Imagify, um plug-in da popular equipe do WP Rocket
5. Otimizador de imagens ShortPixel
6. Smush
7. reSmush.it
8. OEnvira Gallery é um plug-in de galeria do WordPress com compactação de imagem integrada

Esses plug-ins de otimização de imagens do WordPress o ajudarão a acelerar seu site.

6. Considerações finais e práticas recomendadas para otimização de imagens

Se você não está salvando imagens otimizadas para a Web, precisa começar a fazer isso agora. Isso fará uma enorme diferença na velocidade do seu site, e seus usuários agradecerão por isso.

Além disso, sites mais rápidos são ótimos para SEO, e você provavelmente verá um aumento nas classificações dos mecanismos de pesquisa.

Além da otimização de imagens, as duas coisas que o ajudarão significativamente a acelerar seu site são o uso de um plug-in de cache do WordPress e o uso de uma CDN do WordPress.

Como alternativa, você pode usar uma empresa de hospedagem gerenciada do WordPress, pois elas geralmente oferecem cache e CDN como parte da plataforma.

Guias especializados para melhorar o desempenho do WordPress

Esperamos que este artigo tenha ajudado você a aprender como otimizar suas imagens no WordPress. Talvez você também queira ver alguns outros artigos relacionados à melhoria do desempenho do WordPress:

• O guia definitivo para aumentar a velocidade e o desempenho do WordPress
• Como acelerar o desempenho do WooCommerce
• Melhores plug-ins de cache do WordPress para acelerar seu site
• Como otimizar o Core Web Vitals para WordPress (guia definitivo)
• Como reduzir o tempo até o primeiro byte (TTFB) no WordPress – Dicas de especialistas
• Como usar o plug-in GTmetrix para melhorar o desempenho do site WordPress
• Hospedagem WordPress mais rápida (testes de desempenho)
• Métricas importantes para medir em seu site WordPress
• Como executar corretamente um teste de velocidade do site
• Como fazer um teste de estresse em um site WordPress

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.