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.

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 WordPress, 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.

Média de bytes por página

Média de bytes por página

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 um segmento do Google Analytics 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).
As imagens representam, o 21% do peso total de uma página da web. 😮 Otimize-as! Click to Tweet

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.

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)

Qualidade de Compactação x 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.

Baixa compressão (alta qualidade) JPG - 590 KB

Baixa compressão (alta qualidade) JPG – 590 KB

Alta compressão (baixa qualidade) JPG - 68 KB

Alta compressão (baixa qualidade) JPG – 68 KB

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.

Média compressão (ótima qualidade) JPG - 151 KB

Média compressão (ótima qualidade) JPG – 151 KB

Otimização com Perda x 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.

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.

Comprimir foto no affinity photo

Comprimir foto no affinity photo

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

Redimensionando Imagens

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.

srcset responsive images example in code

srcset responsive images example in code

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.

Configurações de mídia WordPress

Configurações de mídia WordPress

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.

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

Felizmente, com o WordPress, você não precisa fazer toda a formatação ou compactação manualmente. Você pode usar plugins para fazer pelo menos parte do trabalho para você automaticamente. Existem vários plugins que otimizam automaticamente seus arquivos de imagem à medida que você os carrega. Eles até otimizam as imagens que você já enviou. Este é um recurso útil – especialmente se você já tiver um site cheio de imagens. Veja alguns dos melhores plugins para formatar suas imagens para melhor desempenho.

No entanto, é importante que você não confie apenas nos próprios plugins. Por exemplo, você não deve enviar imagens de 2 MB para sua biblioteca de mídia do WordPress. Isso pode resultar em consumir o espaço em disco de seus hosts da Web muito rápido. O melhor método é primeiro redimensionar rapidamente a imagem em uma ferramenta de edição de fotos e em seguida, fazer upload e usar um dos plugins a seguir para reduzir seu tamanho ainda mais.

Otimizador de Imagem Imagify

imagify image optimizer

Plugin Imagify Image Optimizer

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.

Redimensionar suas imagens

Redimensionar suas imagens

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.

Otimizador de Imagem ShortPixel

Plugin ShortPixel

Plugin ShortPixel

O Otimizador de Imagem ShortPixel é um plugin gratuito que comprime 100 imagens por mês e comprime vários tipos de arquivos, incluindo arquivos PNG, JPG, GIF, WebP e até arquivos PDF. Ele faz compactação de imagens com perdas e sem perdas. Ele converte CMYK em RGB. Ele leva suas imagens e miniaturas para a nuvem para processamento e, em seguida, ele as traz de volta ao seu site para substituir as originais. Ele cria um backup dos arquivos originais para que você possa restaurá-los manualmente, se você quiser. Ele irá converter arquivos da galeria em massa. Não há limite para o tamanho do arquivo.

Optimole

Optimole

Optimole plugin

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.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud plugin

EWWW Image Optimizer Cloud plugin

EWWW Image Optimizer Cloud ajuda você a tornar suas imagens menores e seu site mais rápido, com menos complicações. Sem limites de tamanho e muita flexibilidade, você pode usar os padrões ou personalizar o plug-in completamente a seu gosto. Todos os usuários do EWWW IO podem usar o Bulk Optimizer para compactar suas imagens existentes ou usar o modo de lista da Biblioteca de mídia para escolher e escolher imagens específicas para compactar.

Pastas adicionais podem ser verificadas para garantir que todas as imagens do site sejam otimizadas adequadamente. O EWWW IO permite até converter suas imagens em formatos de última geração, como o WebP, ou encontrar o melhor formato de imagem para uma imagem com opções de conversão de vários formatos. A compactação de imagem começa em apenas US$ 0,003/imagem.

A API de compactação premium permite que você leve a compactação a um nível totalmente novo sem sacrificar a qualidade, o que libera a compactação PDF e inclui backups de imagem convenientes de 30 dias. O recurso ExactDN, que custa US$ 9/mês, traz compactação automática (sem compactação necessária no servidor), redimensionamento automático e todos os benefícios de um CDN para resultados mais rápidos e ainda mais desempenho em qualquer tamanho de dispositivo.

Optimus Otimizador de Imagem WordPress

optimus image optimizer

Plugin Optimus Image Optimizer

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.

WP Smush

wp smush plugin

Plugin 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.

TinyPNG (JPG comprimidos também)

tinypng

Plugin TinyPNG

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.

ImageRecycle

Plugin ImageRecycle - Otimizador de imagem e PDF

Plugin ImageRecycle – Otimizador de imagem e PDF

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.

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. (Veja os JPGs originais não compactados). 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

Teste de velocidade com JPGs comprimido

Teste de velocidade com JPGs comprimido

JPGs compactados

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).

PageSpeed Insights otimiza o aviso de imagens

PageSpeed Insights otimiza o aviso de imagens

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.

Usando SVGs

Outra recomendação é usar SVGs 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)

JPG tamanho

Imagem JPG 

PNG (tamanho otimizado: 85,1 KB)

PNG tamanho
Imagem PNG

SVG (tamanho otimizado: 6,1 KB)

SVG tamanho
Imagem SVG 

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

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
  • 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 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
Não se esqueça de otimizar suas imagens, caso contrário, seu site WordPress pode parecer estar em câmera lenta. E você sabe o quão frustrante 'lento' é! 🐌 Click to Tweet

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!

2.5K
Shares