O senhor sabia que otimizar suas imagens antes de carregá-las no WordPress pode ter um grande impacto na velocidade do seu site?
Quando começando um novo blogmuitos iniciantes simplesmente fazem upload de imagens sem otimizá-las para a Web. Esses arquivos de imagem grandes tornam seu site mais lento.
O senhor pode corrigir isso usando as práticas recomendadas de otimização de imagens como parte de sua rotina regular de blog.
Neste artigo, mostraremos ao senhor 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 esse é um guia abrangente sobre otimização de imagens para a Web, criamos uma tabela de conteúdo 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, na verdade é bastante fácil hoje em dia. O senhor 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 o senhor 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 absolutamente nenhuma perda de 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 os visitantes.
O que significa otimizar imagens?
Talvez o senhor 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.
O senhor precisará reduzir o tamanho do arquivo de suas imagens, otimizando-as para a Web. Mostraremos ao senhor 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 o senhor deve conhecer:
- Maior velocidade do site
- Melhoria nas 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 sites rápidos têm melhor classificação nos mecanismos de busca (SEO) e melhores conversões, a otimização de imagens é algo que todo site comercial deve fazer se quiser ter sucesso on-line.
Agora o senhor 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, o senhor deve saber 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, o senhor pode melhorar a velocidade do site e impulsionar Classificações de SEO do WordPress.
Tutorial em vídeo
Se o senhor 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 do 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, o senhor 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 da imagem.
Para simplificar, o senhor 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 qualidade superior. 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 e compressã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 imagens, como Adobe Photoshop, Foto ON1, GIMP, Affinity Photo e outros têm recursos de compactação de imagem incorporados.
O senhor também pode salvar as imagens normalmente e depois usar uma ferramenta da Web como o TinyPNG ou JPEGmini para facilitar a compactação de imagens.
Embora exijam algum esforço manual, esses dois métodos permitem que o senhor 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 Optimole e Otimizador de imagens EWWW que podem compactar automaticamente as imagens quando o senhor 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.
Mais adiante neste artigo, falaremos mais sobre o uso de plug-ins do WordPress.
3. Dimensões da imagem
Normalmente, quando o senhor 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.
A redução das dimensões da imagem para algo mais razoável pode diminuir significativamente o tamanho do arquivo de imagem. O senhor pode simplesmente redimensionar 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 o senhor 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 o senhor pode usar para otimizar imagens para a Web (com apenas alguns cliques).
Recomendamos usar essas ferramentas para otimizar as imagens antes de carregá-las no WordPress, especialmente se o senhor 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 o senhor revisa manualmente cada imagem.
Adobe Photoshop
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, o senhor pode escolher um formato de arquivo de imagem (JPG, PNG, GIF) que lhe proporcione o menor tamanho de arquivo.
O senhor também pode reduzir a qualidade da imagem, as cores e outras opções para diminuir ainda mais o tamanho do arquivo.
GIMP
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, o senhor precisa abrir a imagem no GIMP e, em seguida, selecionar a opção Arquivo ” Exportar como… . Isso abrirá a caixa de diálogo Export Image (Exportar imagem), na qual o senhor poderá dar um novo nome ao arquivo. Em seguida, o senhor precisa clicar no botão “Exportar”.
Agora o senhor verá as opções de exportação de imagens. Para arquivos JPEG, o senhor pode usar o controle deslizante “Quality” (Qualidade) para selecionar o nível de compactação e reduzir o tamanho do arquivo.
Por fim, o senhor deve clicar no botão “Exportar” para salvar o arquivo de imagem otimizado.
TinyPNG
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 o senhor precisa fazer é acessar o site deles e carregar suas imagens usando o simples recurso de arrastar e soltar.
Eles compactarão a imagem e fornecerão ao senhor um link para download.
Eles também têm uma extensão para o Adobe Photoshop, que é o que usamos como parte do nosso processo de edição de imagens, pois permite que o senhor acesse 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 plugin para WordPress que faz isso para o senhor. Falaremos mais sobre isso mais tarde.
JPEGmini
JPEGmini usa uma tecnologia de compactação sem perdas que reduz significativamente o tamanho das imagens sem afetar sua qualidade percebida. O senhor também pode comparar a qualidade da imagem original e da imagem compactada.
O senhor pode usar a versão da Web gratuitamente ou comprar o programa para seu computador. Eles também têm uma API paga para automatizar o processo em seu servidor.
ImageOptim
ImageOptim é 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 para o Windows é Trimage.
5. Melhores plug-ins de otimização de imagem para WordPress
Acreditamos que a melhor maneira de otimizar suas imagens é fazer isso antes de carregá-las no WordPress. No entanto, se o senhor administra um site com vários autores ou precisa de uma solução automatizada, pode experimentar um plugin de compactação de imagens do WordPress.
Aqui está nossa lista dos melhores plug-ins de compactação de imagens do WordPress:
- Optimole, um plug-in popular da equipe responsável pelo ThemeIsle
- Otimizador de imagens EWWW
- Compactação de imagens JPEG, PNG e WebP, um plug-in da equipe do TinyPNG mencionada acima
- Imagify, um plug-in do popular WP Rocket equipe
- ShortPixel Image Optimizer (Otimizador de imagens ShortPixel)
- Smush
- reSmush.it
- Galeria Envira é um plugin de galeria do WordPress com compactação de imagem integrada
Esses plug-ins de otimização de imagens do WordPress ajudarão o senhor a acelerar o seu site.
6. Considerações finais e práticas recomendadas para otimização de imagens
Se o senhor não estiver 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.
Sem mencionar que sites mais rápidos são ótimos para SEO, e o senhor 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 website são o uso de um plugin de cache do WordPress e usando um CDN do WordPress.
Como alternativa, o senhor pode usar um hospedagem gerenciada do WordPress porque eles geralmente oferecem cache e CDN como parte da plataforma.
Esperamos que este artigo tenha ajudado o senhor a aprender como otimizar suas imagens no WordPress. Talvez o senhor também queira ver nosso guia sobre Como melhorar a segurança do WordPress ou nossas escolhas de especialistas para o melhores plug-ins do WordPress para sites de negócios.
Se o senhor gostou deste artigo, por favor, assine o nosso Canal do YouTube para ver tutoriais em vídeo sobre o WordPress. O senhor também pode nos encontrar em Twitter e Facebook.
