Como Otimizar Imagens para Web e Melhorar o Desempenho

Confie em nós, você não quer que o Google odeie seu site. Felizmente, você pode reduzir o tamanho dos seus arquivos de imagem para ajudar a melhorar o desempenho do seu site.

Um problema quando você vai formatar as imagens é que as modificações geralmente reduzem a qualidade delas (o que por sua vez, pode fazer o visitante odiar seu site). Isso não é uma coisa ruim, desde que você não deixe que as imagens fiquem feias.

Existem alguns truques e técnicas que permitem reduzir o tamanho do arquivo de imagem e ainda mantê-lo bonito o suficiente para exibir com orgulho em seu site.

Então, vamos dar uma olhada em como formatar suas imagens sem torná-las feias, além de como otimizar imagens para web e para melhorar o desempenho.

Confira nosso guia em vídeo para otimização de imagens para SEO

Os Benefícios de Formatar Suas Imagens

Primeiro, por que você precisa formatar suas imagens? Quais são os benefícios? Existem inúmeros benefícios de otimizar suas imagens para melhorar o desempenho. De acordo com o HTTP Archive, em novembro de 2018, as imagens representam em média 21% do peso total de uma página da web. Então, quando se trata de otimizar seu site, as imagens é o primeiro por onde você deve começar!

Imagens são mais importantes que scripts e fontes. E, ironicamente, um bom fluxo de trabalho de otimização de imagens é uma das coisas mais fáceis de implementar, mas muitos proprietários de sites ignoram isso.

Abaixo estão os principais benefícios:

• Isso irá melhorar a velocidade de carregamento de sua página (veja nosso estudo de caso abaixo para saber o quanto isso afeta sua velocidade). Se sua página demorar muito para carregar, seus visitantes podem se cansar de esperar e passar para outra coisa. Para obter mais informações sobre como otimizar o tempo de carregamento de sua página, consulte nosso guia detalhado sobre otimização de velocidade de página.
• Combinado com um ótimo plugin SEO WordPress, isso melhora o seu SEO. Seu site terá uma posição mais alta nos resultados dos buscadores. Arquivos grandes diminuem a velocidade do seu site e os buscadores detestam sites lentos. É provável que o Google rastreie e indexe suas imagens mais rapidamente para a pesquisa de imagens do Google. Está curioso sobre qual porcentagem do seu tráfego vem da pesquisa de imagens do Google? Você pode usar plugin ou segmento do Google Analytics WordPress para verificar o tráfego de pesquisa de imagens do Google.
• Criar backups será mais rápido.
• Tamanhos de arquivo de imagem menores usam menos largura de banda. Redes e navegadores irão apreciar isso.
• Requer menos espaço de armazenamento no seu servidor (isso depende de quantas miniaturas você otimizar).

Como um cliente Kinsta, você pode se beneficiar gratuitamente da otimização de imagem ao permitir a otimização automática da imagem com apenas alguns cliques. Falaremos mais sobre isso abaixo.

Como Otimizar Imagens para Web e para Melhorar o Desempenho

O principal objetivo de formatar suas imagens é encontrar o equilíbrio entre o menor tamanho de arquivo e uma qualidade aceitável.

Há mais de uma maneira de executar quase todas essas otimizações. Uma das formas mais populares é simplesmente compactá-las antes de enviá-las para o WordPress. Geralmente, isso pode ser feito em uma ferramenta como o Adobe Photoshop ou o Affinity Photo. Algumas dessas tarefas também podem ser executadas usando plugins, o que abordaremos mais abaixo.

As duas coisas principais a se considerar são o formato de arquivo e o tipo de compactação que você usa. Ao escolher a combinação certa de formato de arquivo e tipo de compactação, você pode reduzir o tamanho da sua imagem em até 5 vezes. Você terá que experimentar com cada imagem ou formato de arquivo para ver o que funciona melhor.

1. Escolha o Formato de Arquivo Correto

Antes de começar a modificar suas imagens, certifique-se de ter escolhido o melhor tipo de arquivo. Existem vários tipos de arquivos que você pode usar:

• PNG – produz imagens de maior qualidade, mas também possui um tamanho de arquivo maior. Foi criado como um formato de imagem sem perdas, embora também possa ser com perdas.
• JPEG – usa otimização com perdas e sem perdas. Você pode ajustar o nível de qualidade para obter um bom equilíbrio entre qualidade e tamanho do arquivo.
• GIF – usa apenas 256 cores. É a melhor escolha para imagens animadas. Ele usa somente compactação sem perdas.

Existem vários outros, como o JPEG XR e o WebP, mas eles não são universalmente suportados por todos os navegadores. Idealmente, você deve usar JPEG (ou JPG) para imagens com muita cor e PNG para imagens simples.
(Sugestão de leitura: JPG vs JPEG: Understanding the Most Common Image File Format)

2. Cuidado com a qualidade da compressão vs tamanho

Aqui está um exemplo do que pode acontecer se você comprimir demais uma imagem. O primeiro é usar uma taxa de compactação muito baixa, o que resulta na mais alta qualidade (mas em tamanho de arquivo maior). A segunda é usar uma taxa de compactação muito alta, o que resulta em uma imagem de baixa qualidade (mas com tamanho de arquivo menor). Nota: A imagem original intocada é de 2,06 MB.

Como você pode ver, a primeira imagem acima é de 590 KB. Isso é muito grande para uma foto! Geralmente, é melhor se você puder manter o peso total de uma página da web com tamanho de 1 ou 2 MB. 590 KB já seria um quarto disso. A segunda imagem, obviamente, parece horrível, mas também tem apenas 68 KB. O que você deve fazer é encontrar um meio termo ideal entre sua taxa de compressão (qualidade) e o tamanho do arquivo.

Então processamos a imagem novamente com uma taxa média de compressão e como você pode ver abaixo, agora a qualidade parece boa e o tamanho do arquivo é de 151 KB, o que é aceitável para uma foto de alta resolução. Isso é quase 4x menor que a foto original com baixa compactação. Normalmente, imagens mais simples, como PNGs, devem ter 100 KB ou menos para obter melhor desempenho.

3. Entenda a otimização com perda vs sem perda

Também é importante entender que existem dois tipos de compactação que você pode usar: com perdas e sem perdas.

Com perdas: Este é um filtro que elimina alguns dos dados. Isso vai degradar a imagem, então você precisa ter cuidado com o quanto reduzir a imagem. O tamanho do arquivo pode ser reduzido em grande quantidade. Você pode usar ferramentas como o Adobe Photoshop, o Affinity Photo ou outros editores de imagem para ajustar as configurações de qualidade de uma imagem. O exemplo que usamos acima está usando compactação com perdas.

Sem perdas: Este é um filtro que comprime os dados. Isso não reduz a qualidade, mas exigirá que as imagens sejam descompactadas antes de serem exibidas. Você pode executar uma compactação sem perdas no seu computador usando ferramentas como o Photoshop, o FileOptimizer ou o ImageOptim.

É melhor testar essas técnicas de compactação para ver o que funciona melhor para cada imagem ou formato. Se suas ferramentas tiverem essa opção, salve a imagem para a web. Esta é uma opção em muitos editores de imagens e fornecerá os ajustes de qualidade para que você possa executar a compactação ideal. Você perderá um pouco da qualidade, então tente encontrar o melhor equilíbrio possível sem tornar as imagens feias.

4. Use ferramentas e programas de otimização de imagem

Há muitas ferramentas e programas por aí, tanto pagos quanto gratuitos, que você pode usar para otimizar suas imagens.

Alguns fornecem as ferramentas para realizar suas próprias otimizações e outros fazem o trabalho para você. Pessoalmente, somos grandes fãs do Affinity Photo, pois ele é barato e oferece recursos quase idênticos aos do Adobe Photoshop.

Aqui estão algumas ferramentas e programas adicionais para dar uma olhada:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org
• Otimização de imagem da Kinsta

Não se esqueça que seus métodos para servir imagens são tão importantes quanto o tamanho do arquivo. Muitos provedores de hospedagem premium como a Kinsta implementam um CDN para entregar rapidamente imagens e outros arquivos aos usuários. A integração gratuita da Kinsta Cloudflare também protege todos os sites da plataforma, tornando mais rápida e segura.

5. Redimensione as imagens para escalar

No passado, era muito importante que você enviasse imagens do tamanho certo e não deixasse o CSS redimensioná-las. No entanto, isso não é mais tão importante, pois o WordPress 4.4 agora suporta imagens responsivas (não reduzidas pelo CSS).

Basicamente, o WordPress cria automaticamente vários tamanhos de cada imagem carregada da biblioteca de mídia. Ao incluir os tamanhos disponíveis de uma imagem em um atributo srcset, os navegadores agora podem optar por baixar o tamanho mais apropriado e ignorar os outros. Veja um exemplo de como seu código realmente é abaixo.

Assim, com mais e mais displays HiDPI hoje em dia, pode ser bom encontrar um meio termo ideal. Por exemplo, duas ou três vezes o tamanho da coluna ou do div do site, mas ainda menor que o tamanho original. O navegador mostrará a imagem correta com base na resolução do dispositivo.

A biblioteca de mídia do WordPress cria miniaturas com base nas suas configurações. No entanto, a imagem original ainda é mantida e intocada. Se você deseja redimensionar suas imagens e economizar espaço em disco, não salvando a original, você pode usar um plugin gratuito como o Imsanity.

O Imsanity permite que você defina um limite de integridade para que todas as imagens enviadas sempre atinjam um tamanho razoável, que ainda é maior do que o suficiente para as necessidades de um site típico.

O Imsanity conecta-se ao WordPress imediatamente após o envio da imagem, mas antes do processamento do WordPress. Portanto, o WordPress se comporta exatamente da mesma maneira, mas será como se o colaborador tivesse redimensionado sua imagem para um tamanho razoável antes de fazer o upload.

Limpe sua biblioteca de mídia

Se você está procurando uma ferramenta para economizar espaço enquanto também limpa sua biblioteca de mídia, você poderia usar o Media Cleaner para encontrar arquivos de mídia não utilizados. O plugin verificará todos os seus arquivos de mídia e listará os não utilizados no Painel do Limpador de Mídia para que você possa navegar por eles e excluí-los.

O Media Cleaner implementa um sistema inteligente de eliminação: quando os arquivos são eliminados, eles são movidos para um diretório de lixo. Dessa forma, você pode testar o seu site por um tempo e ter certeza de que tudo está bem. Se faltar um arquivo ou uma entrada de mídia, você pode facilmente restaurá-lo com um clique ou simplesmente esvaziar o lixo se tudo parecer bom para você.

Plugins de Otimização de Imagem que Você Pode Usar

Felizmente, com o WordPress, você não tem que fazer toda a formatação ou compressão manualmente. Você pode usar plugins para fazer pelo menos parte do trabalho para você automaticamente.

Existem vários plugins que irão otimizar automaticamente seus arquivos de imagem à medida que você os carrega. Eles otimizarão até mesmo as imagens que você já fez o upload. Este é um recurso útil – especialmente se você já tem um site cheio de imagens. Aqui estão alguns dos melhores plugins para formatar suas imagens para um melhor desempenho.

Mas é importante que você não confie somente nos plugins em si. Por exemplo, você não deve carregar imagens de 2 MB para sua biblioteca de mídia WordPress. Isso pode resultar em um consumo muito rápido do espaço em disco do seu servidor web.

O melhor método é redimensionar rapidamente a imagem em uma ferramenta de edição de fotos com antecedência, e então fazer o upload e usar um dos seguintes plugins para reduzi-la ainda mais.

Antes de se comprometer com uma dessas ferramentas ou plugins, no entanto, você deve verificar se o seu provedor de hospedagem de sites não oferece ferramentas integradas para fazer o trabalho por você. Por exemplo, os clientes Kinsta têm acesso a um recurso gratuito de Otimização de Imagens que cria automaticamente cópias otimizadas de todas as imagens do WordPress, armazenadas gratuitamente. O menor dos dois arquivos de imagem é então servido usando o rápido CDN da Kinsta para aumentar a velocidade. Os clientes podem até mesmo escolher entre compressão sem perda e com perda, dependendo de suas necessidades.

1. Otimizador de Imagem Imagify

O Imagify foi criado pela mesma equipe que desenvolveu o WP Rocket, que a maioria de vocês provavelmente já conhece. Ele é compatível com WooCommerce, NextGen Gallery e WP Retina. Ele também possui um recurso de otimização em massa e você pode escolher entre três diferentes níveis de compactação: normal, agressivo e ultra. Ele também possui um recurso de restauração, portanto, se você não estiver satisfeito com a qualidade, poderá restaurar em um clique e compactar novamente em um nível que melhor atenda às suas necessidades. Existe uma versão gratuita e paga. Você está limitado a uma cota de 25 MB de imagens por mês com uma conta gratuita.

Você também pode se livrar da imagem original e redimensionar suas imagens maiores com este plugin.

O Imagify também compacta imagens em servidores de terceiros, não no seu, o que é muito importante quando se trata de desempenho. O Imagify não desacelera seu site WordPress.

2. Optimole

Optimole é um plugin de otimização de imagem WordPress que reduz automaticamente o tamanho das suas imagens sem qualquer trabalho necessário do seu lado. Ele tem uma grande vantagem quando se trata da velocidade de carregamento de seu site, pois é totalmente baseado na nuvem e nunca veicula imagens maiores do que deveriam, mas também exibe o tamanho de imagem perfeita para a janela de visualização e o navegador do visitante.

Além disso, o plugin fornece carregamento lento e substituição de imagem eficiente – ele reduz a qualidade da imagem se o visitante tiver uma conexão de internet mais lenta – o que a diferencia da multidão. Ele também detecta automaticamente o navegador do usuário e veicula o WebP se ele for compatível.

Todas as imagens que o Optimole comprime são servidas por meio de um rápido CDN. Você pode experimentar o Optimole gratuitamente ou atualizar para o plano premium se precisar de largura de banda extra e espaço de processamento.

3. Optimus Otimizador de Imagem WordPress

O Optimus Otimizador de Imagem WordPress usa compactação sem perdas para otimizar suas imagens. Sem perdas significa que você não verá nenhuma perda de qualidade. Ele suporta WooCoomerce e multi-site e tem um ótimo recurso de otimização em massa para aqueles com grandes bibliotecas de mídia já existentes. Também é compatível com o plugin WP Retina do WordPress. Existe uma versão gratuita e uma versão paga. Na versão paga, você paga uma vez por ano e pode compactar uma quantidade ilimitada de imagens. Se você combiná-lo com o plugin Cache Enabler, você também poderá mergulhar nas imagens WebP, que são um novo formato de imagem leve do Google.

4. WP Smush

O WP Smush tem uma versão gratuita e uma versão paga. Ele reduz as informações ocultas das imagens para reduzir o tamanho sem reduzir a qualidade. Ele digitaliza imagens e as reduz conforme você as envia para o seu site. Ele também consegue digitalizar imagens que você já enviou e reduzi-las. Ele consegue reduzir até 50 arquivos de uma só vez. Você também pode reduzir manualmente se quiser. Ele pode reduzir imagens em formato JPEG, GIF e PNG. Os tamanhos dos arquivos estão limitados a 1 MB.

• É compatível com alguns dos plugins de mídia mais populares, como o WP All Import e o WPML.
• Toda a otimização de imagem é feita com técnicas de compactação sem perdas, mantendo a qualidade da sua imagem alta.
• Não importa em qual diretório você salvou suas imagens. O Smush as encontra e as compacta.
• Smush tem a opção de definir automaticamente largura e altura para todas as imagens, para que todas as suas imagens sejam redimensionadas para proporções idênticas.

5. TinyPNG (JPG comprimidos também)

O TinyPNG usa os serviços TinyJPG e TinyPNG (a conta gratuita permite comprimir cerca de 100 imagens por mês) para otimizar suas imagens JPG e PNG. Ele consegue compactar automaticamente novas imagens e compactar em massa suas imagens existentes. Ele converte CMYK em RBG para economizar espaço. Ele comprime imagens JPEG em até 60% e imagens PNG em até 80% sem uma perda visível na qualidade da imagem. Não tem limite de tamanho de arquivo.

6. ImageRecycle

O plugin ImageRecyle é um otimizador automático de imagem e PDF. Este plugin se concentra não apenas na compactação de imagens, mas também em PDFs. Um recurso realmente útil é a capacidade de definir o tamanho mínimo do arquivo para compactação. Por exemplo, se você tiver imagens com 80 KB, poderá excluí-las automaticamente da compactação. Isso garante que imagens e arquivos nunca sejam compactados demais. Também inclui otimização em massa e redimensionamento automático de imagens. Observação: o programa tem uma versão para avaliação gratuita de 15 dias, mas esse é um serviço pago, e as imagens são carregadas e compactadas usando seus servidores. Ele não cobra por mês, mas sim pelo número total de imagens compactadas, a partir de $10 por 10.000 imagens.

7. EWWW Image Optimizer

O EWWW Image Optimizer ajuda você a tornar suas imagens menores e seu site mais rápido com menos aborrecimentos. Sem limites de tamanho e com muita flexibilidade para usuários avançados, você pode usar os padrões ou personalizar o plugin completamente ao seu gosto.

O modo gratuito permite compressão JPG ilimitada e conversão WebP e é ótimo para sites de hobby ou blogs que estão apenas começando. Todos os usuários EWWW IO podem usar o Bulk Optimizer para comprimir suas imagens existentes ou usar o modo de lista da Media Library para selecionar e escolher imagens específicas para comprimir. Pastas adicionais podem ser digitalizadas para garantir que cada imagem em seu site seja devidamente otimizada.

O EWWW IO permite até mesmo converter suas imagens em formatos de próxima geração como WebP ou encontrar o melhor formato de imagem para uma imagem com opções de conversão de vários formatos.

O Premium Compress API permite que você leve a compressão para um nível totalmente novo sem sacrificar a qualidade e a economia média de 50%. Ela também libera a compressão PDF e inclui convenientes backups de imagem de 30 dias. Com o Easy IO CDN opcional, as imagens são automaticamente comprimidas, escalonadas para se adequar à página e ao tamanho do dispositivo, carregadas preguiçosamente e convertidas para o formato WebP de próxima geração.

Otimizar Imagens para a Web Estudo de Caso

Decidimos fazer nosso próprio estudo de caso e testes para mostrar a você o quanto a otimização das imagens para a Web pode afetar a velocidade geral do seu site WordPress.

JPGs não compactados

Primeiro, fizemos o upload de 6 JPGs não compactados, todos com mais de 1 MB, para o nosso site teste. Em seguida, executamos 5 testes por meio do Pingdom e obtivemos a média. Como você pode ver no teste de velocidade abaixo, nosso tempo total de carregamento foi de 1,55 segundos e o tamanho total da página foi de 14,7 MB.JPGs não compactados

JPGs compactados

Em seguida, comprimimos os JPGs usando o plugin Imagify WordPress, usando a “configuração agressiva”. Em seguida, fizemos 5 testes através do Pingdom e obtivemos a média. Como você pode ver no teste de velocidade abaixo, nosso tempo total no carregamento foi reduzido para 476 ms e o tamanho total da página foi reduzido para 2,9 MB. Nosso tempo total de carregamento foi reduzido em 54,88% e o tamanho total de página foi reduzido em 80,27%.

Não há quase nenhuma outra otimização que você possa fazer no seu site capaz de reduzir mais de 50% dos tempos de carregamento. É por isso que a otimização de imagens é tão importante que o processo acima foi todo automatizado pelo plugin. É uma abordagem interativa para obter um site WordPress mais rápido.

A única outra otimização dramática que você poderia fazer seria alterar sua hospedagem do WordPress. Muitos clientes que se mudam para Kinsta conseguem mais de 45% de aumento de velocidade. Imagine se mudar para a Kinsta e otimizar suas imagens!

Ao otimizar suas imagens, tanto ao usar uma ferramenta de edição de fotos quanto um plugin do WordPress, você também pode corrigir o aviso “Otimizar imagens” no Google PageSpeed Insights (conforme mostrado abaixo).

Se você tiver outros avisos de otimização das ferramentas de teste de velocidade, confira nossa postagem sobre o Google PageSpeed Insights e nossa explicação detalhada sobre o Pingdom.

Tomamos nosso conhecimento de gerenciamento eficaz de sites em escala, e o transformamos em um ebook e vídeo. Clique para baixar o Guia de Gerenciamento de mais de 60 sites WordPress!

Usando SVGs: os benefícios que você precisa saber

Outra recomendação é usar arquivos SVG junto com suas outras imagens. O SVG é um formato vetorial escalonável que funciona bem para logotipos, ícones, texto e imagens simples. Aqui estão algumas razões:

• Os SVGs são automaticamente escalonáveis nos navegadores e nas ferramentas de edição de fotos. É o sonho de qualquer designer gráfico da web!
• O Google indexa SVGs, da mesma forma que indexa PNGs e JPGs, para que você não precise se preocupar com SEO.
• Os SVGs são tradicionalmente (nem sempre) menores em tamanho de arquivo do que PNGs ou JPGs. Isso pode resultar em tempos de carregamento mais rápidos.

Genki escreveu um ótimo artigo onde ele compara o tamanho do SVG vs PNG vs JPEG. Abaixo estão alguns tópicos do teste em que ele comparou os três diferentes tipos de imagem.

JPG (tamanho otimizado: 81,4 KB)

PNG (tamanho otimizado: 85,1 KB)

SVG (tamanho otimizado: 6,1 KB)

Como você pode ver acima, o SVG representa uma diminuição no tamanho do arquivo de 92,51% quando comparado ao JPG. E de 92,83% quando comparado ao PNG. Confira nosso tutorial sobre como usar SVGs no seu site WordPress.

Melhores práticas para a otimização de imagens na internet

Aqui estão algumas boas práticas gerais quando se trata de como otimizar imagens para a web:

• Se estiver usando um plugin do WordPress, use um que compacte e otimize as imagens externamente nos servidores deles. Isso, por sua vez, reduz a carga no seu próprio site.
• Use imagens vetoriais sempre que possível ao lado de seus PNGs e JPGs.
• Use uma CDN para exibir suas imagens rapidamente aos visitantes em todo o mundo. O Kinsta CDN tem um recurso de minificação de código que é embutido diretamente no painel MyKinsta. Isto permite aos clientes Kinsta ativar facilmente a minificação automática de CSS e JavaScript com um simples clique.
• Remova dados de imagem desnecessários.
• Recorte o espaço em branco e recrie-o usando CSS para fornecer o espaçamento.
• Use efeitos CSS3 o máximo possível.
• Salve suas imagens nas dimensões adequadas. Porém lembre que o WordPress agora suporta imagens responsivas para exibi-las sem redimensioná-las com CSS.
• Use sempre o formato de arquivo .ico para seu favicon.
• Use fontes da Web em vez de colocar texto nas imagens – elas têm uma aparência melhor quando dimensionadas e ocupam menos espaço.
• Use imagens rasterizadas apenas para cenas com muitas formas e detalhes.
• Reduza a profundidade de bits para uma paleta de cores menor.
• Use compressão com perdas sempre que possível.
• Experimente encontrar as melhores configurações para cada formato.
• Use GIF se você precisar de animação. (mas compacte seus GIFs animados)
• Use PNG se você precisar de muitos detalhes e alta resolução.
• Use o JPG para fotos e capturas de tela gerais.
• Remova quaisquer metadados de imagem desnecessários.
• Automatize o processo tanto quanto possível.
• Em alguns casos, talvez você queira usar o recurso lazy load das imagens para exibir a primeira página mais rapidamente.
• Salve imagens como “otimizadas para a web” em ferramentas como o Photoshop.
• Use o WebP no Chrome para exibir imagens menores.
• Use o recurso integrado de Otimização de Imagem da Kinsta

Depois de formatar suas imagens para um melhor desempenho e seguir as práticas recomendadas, seu site será mais apreciado pelos mecanismos de busca, navegadores e redes e será carregado com mais rapidez para seus leitores. Ah, e não deixe de conferir nosso tutorial sobre hotlinking, para impedir que as pessoas roubem suas imagens e largura de banda.

Você formatou suas imagens para obter um melhor desempenho? Você as formata à mão, usando um plugin ou as duas coisas? Existe outra ferramenta ou plugin que você recomendaria? Você tem alguma coisa a acrescentar? Conte suas técnicas e práticas nos comentários abaixo!

Brian Jackson

Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.

• LinkedIn
• Twitter