Como otimizar imagens para WordPress [Guia definitivo]

Se você tem um site WordPress, está ciente das dificuldades de mantê-lo. Às vezes você pode gastar horas em algo que deveria levar apenas alguns minutos para ser realizado. Isso pode ocorrer se seu site estiver lento e inchado devido a imagens muito grandes ou mal otimizadas.

Além disso, o uso de técnicas de otimização de mecanismos de pesquisa ajudará os visitantes a encontrá-lo e mantê-los em seu site. Otimizar suas imagens para a web é uma dessas práticas.

Considere cada pixel como uma possível área de otimização sempre que você projetar ou editar uma imagem. Leva tempo e esforço para considerar os pixels como peças individuais, mas vale a pena o esforço.

No entanto, existem várias maneiras de otimizar imagens no WordPress. Lembre-se que o objetivo é reduzir o tamanho do arquivo sem comprometer a qualidade da imagem.

Este post vai te ensinar como otimizar suas imagens do WordPress e liberar mais tempo para outras atividades.

O que é otimização de imagem?

É um processo de redução do tamanho do arquivo de uma imagem sem afetar sua qualidade e aplicando técnicas adequadas de SEO de imagem. As imagens otimizadas são mais fáceis de armazenar em um disco rígido ou fazer upload para a Internet. Além disso, tem menos problemas potenciais devido a baixas velocidades de download.

O tamanho das suas imagens tem um impacto significativo no tempo de carregamento do seu site. Geralmente, quanto maior a imagem, mais tempo levará para o navegador do visitante carregar. Pode ser frustrante para seus visitantes e pode levá-los a deixar seu site.

Você deve seguir algumas dicas essenciais de otimização para garantir que suas imagens sejam otimizadas para desempenho.

Benefícios da otimização de imagem

Para se tornar um webmaster de sucesso, você precisa entender como as imagens funcionam em um site. Você também pode ser obrigado a otimizar algumas imagens de tempos em tempos.

Os benefícios da otimização de imagem são:

• Tempos de carregamento de página mais rápidos: as imagens otimizadas são carregadas rapidamente, traduzindo-se em um site de carregamento mais rápido. Isso é especialmente importante para usuários de dispositivos móveis, que são mais propensos a abandonar um site que demora muito para carregar.
• Melhorias nas classificações de SEO: as imagens otimizadas também ajudam nas classificações de SEO do seu site. O Google usa a velocidade de carregamento da sua página como um fator de classificação, portanto, otimizar suas imagens pode ajudá-lo a ter uma classificação mais alta nos resultados de pesquisa.
• Uso de largura de banda reduzido: imagens otimizadas usam menos largura de banda, o que pode economizar dinheiro em sua conta de hospedagem.
• Melhor experiência do usuário: um site bem otimizado oferece uma melhor experiência do usuário, com carregamentos de página mais rápidos e melhor desempenho do mecanismo de pesquisa.
• Reduzindo o tempo de download para dispositivos móveis: as imagens otimizadas também podem ajudar a tornar seu site compatível com dispositivos móveis, crucial para as classificações do Google em pesquisas para dispositivos móveis.
• Satisfação do cliente: uma melhor experiência do usuário aumenta a satisfação do cliente, levando a vendas mais altas e mais clientes recorrentes.

14 coisas essenciais para otimizar imagens para a web

Seria melhor considerar muitos fatores ao otimizar uma imagem para uso na web. Existem muitos tipos de arquivos diferentes e várias maneiras de otimizá-los. A seguir estão algumas coisas a serem consideradas ao otimizar imagens para a web.

Qualidade vs. Tamanho:

A qualidade de uma imagem é sempre importante, mas você também deve considerar o tamanho do arquivo quando se trata de otimizar o uso da web. Seria melhor manter o tamanho do arquivo de suas imagens o menor possível sem sacrificar a qualidade para acelerar o tempo de carregamento nas páginas da web.

A resolução padrão para imagens na web é de 72 DPI (pontos por polegada). Portanto, é recomendável salvar as imagens como JPGs em vez de PNGs, pois esse tipo de arquivo é menor.

Além disso, seria melhor se você usasse a menor profundidade de cor possível sem comprometer a qualidade da imagem. A profundidade de cor padrão é de 24 bits , que pode ser alterada nas propriedades do arquivo.

Formato do arquivo de imagem:

Para determinar qual formato de imagem escolher, é necessário entender as diferentes imagens e seus propósitos. Você deve salvar seu arquivo como JPG , mas ao otimizar imagens para a web, escolha PNG-8 ou PNG-24.

Geralmente, os arquivos PNG são melhores para imagens com muitas cores e fundos transparentes, enquanto os arquivos JPEG são melhores para imagens com muitos detalhes.

Portanto, você deve usar o formato PNG para imagens com fundos transparentes e JPEG para imagens com muitos detalhes para otimizar seus arquivos de imagem para a web.

Tamanho e dimensões do arquivo:

Ao otimizar uma imagem para a web, dois fatores principais a serem considerados são o tamanho do arquivo e as dimensões. É melhor experimentar um desses fatores antes de alterar o outro, para que você possa ver o que ajuda seu objetivo de ter um tamanho de arquivo menor ou uma imagem maior.

Arquivos de imagem grandes podem fazer com que um site seja executado lentamente , portanto, é necessário redimensionar suas imagens antes de enviá-las. As dimensões recomendadas para imagens em uma página da Web são de 600 a 800 pixels de largura e 500 a 600 pixels de altura.

Qualquer coisa mais significativa do que isso provavelmente fará com que a imagem seja redimensionada pelo navegador, resultando em perda de qualidade.

Rank Math é perfeito para ajustar automaticamente a resolução de suas imagens. Ele adicionará as dimensões da imagem para você, para que você não precise se preocupar com suas dimensões.

Melhore o SEO da imagem:

Cada imagem que você carrega no seu site deve servir como fonte de informação para os mecanismos de busca. Arquivos de imagem com mais detalhes são melhores para otimização de mecanismos de pesquisa.

As práticas de SEO de imagem mais atraentes são:

• Otimize o texto do título da imagem: Ao salvar suas imagens, certifique-se de fornecer títulos informativos. Ele aparecerá como uma dica de ferramenta quando o cursor passar sobre a imagem. Além disso, é benéfico para os motores de busca aprender a imagem.
• Use tags Alt: os mecanismos de pesquisa também usam tags alt ao indexar imagens. O texto da tag alt deve ser adaptado para cada imagem e descrever o que está na imagem com a maior precisão possível.
• Use nomes de arquivo de imagem adequados: Se possível, os nomes de arquivo de imagem também devem ser descritivos e incluir palavras-chave. Ao trabalhar com software de edição de imagens, salve suas imagens com um nome de arquivo descritivo.

Nota- Se você usar o plugin Rank Math WordPress, suas imagens serão otimizadas para SEO, e o nome do arquivo de imagens e a tag alt incluirão automaticamente palavras-chave.

Compressão adequada:

Esse é outro fator importante a ser considerado ao otimizar suas imagens. Você deve compactar suas imagens o máximo possível antes de enviá-las para o servidor.

Você precisa usar uma ferramenta de compactação como o Photoshop ou o GIMP para fazer isso. Como alternativa, você pode usar ferramentas gratuitas como TinyJPG e ImageOptim . É sempre recomendável ter imagens compactadas em seu site para acelerar o tempo de carregamento.

Como alternativa, você pode usar um plug-in como ShortPixel ou WP-Optimize para compactar automaticamente suas imagens à medida que são carregadas no seu site. Esses plugins são recomendados para quem busca otimizar as imagens em seu site.

Você deve manter os seguintes fatos em mente ao compactar imagens:

• Com perdas : A compactação com perdas é um tipo de compactação que remove alguns dados de uma imagem para tornar o arquivo menor. Esse tipo de compactação geralmente é usado para imagens que não terão perda perceptível de qualidade.
• Sem perdas : Uma compactação sem perdas é uma forma de compactação que remove algumas informações redundantes sem reduzir a qualidade do conteúdo. Esse tipo de compactação é frequentemente usado para imagens que precisam manter sua qualidade após a compactação, como imagens JPEG sem perdas.

Você pode saber mais detalhes sobre compressão sem perdas de anúncios com perdas no blog do ShortPixel.

Exiba imagens em formatos de última geração:

Por padrão, os navegadores tentarão carregar imagens no mesmo formato em que foram salvas. Por exemplo, uma imagem JPEG é carregada quando o URL contém .jpg. No entanto, você pode forçar os navegadores a carregar um formato de imagem diferente usando a extensão de arquivo correta.

Por exemplo, se você tiver uma imagem JPEG, poderá alterar a extensão para .png e o navegador carregará essa imagem.

Você pode fazer isso usando o plugin JPG para PNG WordPress. Com este plugin, você converterá automaticamente todas as suas imagens JPG em arquivos PNG. Você pode seguir um guia sobre como converter imagens PNG para JPG no WordPress.

Você pode encontrar facilmente imagens de veiculação no formato de última geração usando a ferramenta GtMatrix ou Google page speed insight.

Nota- Em geral, é aconselhável salvar imagens como ambos os tipos de arquivos para serem visualizados por navegadores que reconhecem diferentes extensões de arquivo. Ao fazer isso, se um arquivo não carregar, você pode substituir o JPEG quebrado por um PNG sem ter que reenviar a imagem.

Combine imagens usando sprites CSS:

A combinação de imagens era tradicionalmente realizada por meio de software de edição de imagens. No entanto, agora descobriu-se que o método CSS sprites também pode ser usado para combinar imagens.

O processo envolve criar uma imagem vazia e carregar as imagens que você deseja combinar nela em diferentes posições. Então, usando CSS, cada uma dessas imagens individuais pode ser posicionada sobre a mesma área da nova imagem.

Portanto, o navegador pode baixar um único arquivo de imagem em vez de várias imagens. Isso é particularmente importante para dispositivos móveis, pois eles geralmente têm conexões de internet mais lentas. Você pode fazer isso com um gerador de sprite CSS.

Desativar link de imagem:

O hotlinking de uma imagem implica que qualquer pessoa pode pegar suas imagens e publicá-las em seu site. Como resultado, você experimentará uma perda irritante de largura de banda, pois as imagens serão baixadas do seu servidor para outro servidor. Você pode evitar isso usando a proteção de hotlink para suas imagens.

Você pode configurar a proteção de hotlink de imagem através de sua conta cPanel. O processo é muito simples.

• Você verá um ícone rotulado Hotlink Protection na guia Segurança.
• Clique neste ícone para acessar a janela a seguir.
• Clique no botão Ativar para evitar que suas imagens sejam vinculadas.

Observação- Se você é um usuário da Cloudflare, pode impedir que suas imagens sejam vinculadas a hotlinks ativando a opção “ Hotlink Protection ”.

Imagens de cache:

Para qualquer site, isso é essencial. Você deve armazenar em cache suas imagens para que as pessoas possam visualizá-las mais rapidamente. Na maioria dos casos, os visitantes existentes do site têm isso armazenado em cache no navegador, mas se houver um problema com sua hospedagem, convém configurá-lo separadamente.

Sempre que você instala o WordPress usando um serviço de hospedagem, o provedor de hospedagem cuida de todo o cache para você. Você também pode instalar um plugin de cache.

O WP Rocket é um plugin ideal para armazenar imagens em cache, pois é simples de usar e instalar. Basta instalá-lo e ativá-lo e pronto. Claro, existem outros plugins de cache, mas o WP Rocket é a melhor escolha para essa finalidade.

Cache Gravatar:

Um gravatar é um pequeno ícone que segue seu endereço de e-mail na web. Por exemplo, quando você deixar um comentário em outro blog WordPress, seu Gravatar aparecerá ao lado dele.

O serviço Gravatar gera o Gravatar, que os armazena em cache em seus servidores. Portanto, se você comentar em um grande número de blogs, ou mesmo alguns de alto tráfego, seu Gravatar será armazenado em cache nos servidores do Gravatar.

Como resultado, seu Gravatar será carregado rapidamente em todos esses blogs. Mas, por outro lado, também pode ser uma desvantagem, pois se o serviço Gravatar não estiver disponível, ou seu Gravatar for removido de um dos blogs que você comentou, seu Gravatar desaparecerá de todos esses blogs.

É incrivelmente pouco atraente personalizar um Gravatar com uma imagem abrangente. Isso ocorre porque se o seu Gravatar personalizado não aparecer nesses blogs, o gravatar padrão será usado, o que pode não ser apropriado.

Existem duas soluções possíveis para este problema:

• Faça o seu Gravatar o menor possível. Imagens menores serão carregadas mais rapidamente e consumirão menos largura de banda do que as maiores.
• Você deve hospedar sua própria versão do serviço Gravatar em um domínio que você controla. Isso exigirá um servidor web Apache, PHP e um banco de dados MySQL para armazenar Gravatars localmente em vez de armazená-los em cache nos servidores Gravatar.

Servir imagens de uma CDN:

Se suas imagens forem servidas por uma rede de entrega de conteúdo (CDN), certifique-se de habilitar o cache. Como resultado, navegadores e outros dispositivos não precisarão baixar a mesma imagem várias vezes.

Seria melhor considerar como suas imagens seriam exibidas ao configurar um CDN. Além disso, uma regravação de CDN deve ser habilitada em suas imagens. Você pode fazer isso com o plugin Perfmatters

Usando este plugin, você pode conectar facilmente seu site a uma rede CDN. Como resultado, se seu site puder fornecer conteúdo por meio de uma rede de entrega de conteúdo, suas imagens serão executadas pelos servidores CDN.

Você pode usar qualquer uma das seguintes redes CDN.

• CloudFlare
• BunnyCDN

O que você não deve fazer ao otimizar imagens para seu site

Evite redirecionamentos de URL de imagem:

Se você usar um redirecionamento de URL em seu site, isso atrasará a aparência da imagem. Além disso, a imagem não é armazenada em cache pelo navegador, o que pode causar um atraso no carregamento da página.

Portanto, ao otimizar suas imagens para a web, evite usar qualquer redirecionamento de URL.

Evite o cabeçalho de expiração:

Se você usar um cabeçalho de expiração em suas imagens, o navegador poderá não armazená-las em cache. Também faz com que o navegador solicite novamente a imagem toda vez que ela for carregada em uma página.

Você deve evitar definir cabeçalhos expirados nas imagens do seu site se desejar otimizá-los.

Evite incorporar imagens:

É importante não incorporar imagens na página ao otimizar imagens para a web. Isso ocorre porque quando você incorpora uma imagem, o navegador baixa a imagem inteira antes de exibi-la.

Isso pode fazer com que seu site carregue lentamente e frustre seus visitantes. Em vez disso, use uma tag <img> ou uma tag <object> para incluir um link para a imagem em seu servidor. Assim, o navegador pode baixar apenas o arquivo de imagem, não a página inteira.

Melhores ferramentas de otimização de imagem:

Conteúdo de alta qualidade é essencial para o desenvolvimento de blogs profissionais. Além disso, imagens de qualidade são necessárias para que um blog pareça atraente. No entanto, é difícil encontrar ferramentas gratuitas para otimizar imagens sem perder resolução e imagens lindamente projetadas.

Como resultado, compilei uma lista de algumas das ferramentas de otimização de imagem mais eficazes para facilitar nosso trabalho.

• TinyJPG: TinyJPG é uma ferramenta online útil para compactar imagens JPEG. A taxa de compressão desta ferramenta é muito alta e a qualidade da imagem ainda é excelente.
• Toolur: Toolur é uma ferramenta online útil para otimizar imagens para a web. Otimiza as imagens reduzindo o tamanho do arquivo sem afetar a qualidade da imagem.
• ImageOptim: ImageOptim é uma das principais ferramentas de otimização de imagem. Essa ferramenta ajuda você a melhorar a velocidade de carregamento do seu site otimizando as imagens na página da web. Ele pode até otimizar imagens que já foram compactadas.
• GIMP: O GIMP é um ótimo editor de imagens que permite reduzir o tamanho do arquivo da imagem, preservando a qualidade da imagem. É uma alternativa digna ao Adobe Photoshop.

Melhores plugins de otimização de imagem para WordPress

Existem vários plugins de otimização de imagem diferentes disponíveis para o WordPress. Escolher o mais adequado às suas necessidades pode ser difícil. Aqui está uma lista dos principais plugins.

• Otimizador de imagem EWWW
• Imagify por WP Rocket Team
• Otimizador de imagem ShortPixel
• WP Smush
• reSmush.it

Você pode usar os plugins EWWW Image Optimizer , Imagify by WP Rocket Team e ShortPixel Image Optimizer da lista acima.

Você deve usar um plugin premium para otimização de imagem para obter o resultado ideal. Se você quiser economizar algum dinheiro, experimente o EWWW Image Optimizer .

Perguntas frequentes

Como faço para criar imagens WebP no WordPress?

Quando você usa o WP Rocket para otimizar imagens em seu site, ele as salva automaticamente como WebP. Por outro lado, se você deseja converter uma imagem JPG ou PNG em uma imagem WebP, pode fazê-lo com um plugin.

Você pode usar qualquer um dos seguintes plugins para isso.

• Conversor WebP para Mídia
• WebP Express

Um ótimo plugin que uso para WebP é o Flying Images do WP Speed ​​Matters. Funciona com qualquer tema e lida com tudo. Além disso, ele permite que você crie imagens WebP de qualquer tamanho que desejar e fornece um serviço CDN de imagem gratuito, o que é um benefício significativo.

Como faço para adiar imagens fora da tela?

O atributo defer pode ser usado em JavaScript para carregar imagens fora da tela, permitindo que o navegador renderize o carregamento inicial da página mais rapidamente. Isso requer as tags de início e fim. Por exemplo:

<img src=”image-source.png” alt=”” largura=”100px” height=”100px” title=”Algum texto de dica de ferramenta” data-defer=”offscreen-image.jpg” />

Nota- Defer é suportado apenas em HTML5, não em XHTML.

Ao usar um plug-in JavaScript, como o Perfmatters, você pode adiar o carregamento de suas imagens. Como resultado, você pode alterar a tag img para qualquer elemento que desejar, como um div.

<div data-defer="offscreen-image.jpg"></div>

Como corrigir adiar imagens fora da tela?

• Imagens de carregamento lento.
• Imagens de fundo de carregamento lento.

As imagens acima da dobra devem ser excluídas do carregamento lento para garantir que os usuários as notem rapidamente. No entanto, para resolver imagens offscreen adiadas ou de carregamento lento em um site WordPress, você pode usar o plug-in Perfmatters. O plugin permite que você melhore a velocidade de carregamento do seu site WordPress adiando o carregamento de imagens fora da tela.

Nota- Você pode habilitar o carregamento lento da imagem usando o plugin WP Rocket. Então você pode usar qualquer um deles.

Para concluir

O WordPress é um poderoso sistema de gerenciamento de conteúdo que permite criar e gerenciar seu próprio site. No entanto, otimizar imagens para WordPress pode ser difícil sem as ferramentas apropriadas.

O problema com a otimização de imagens para o WordPress é que muitos métodos diferentes estão disponíveis. Por exemplo, você pode usar um plugin, uma ferramenta online ou até mesmo seu próprio software.

O método mais eficaz para otimizar imagens para WordPress é combinar todas essas técnicas . Além disso, você pode usar um plug-in que identificará quais imagens precisam ser redimensionadas e também pode redimensioná-las manualmente.

Além de otimizar os tamanhos das imagens para o WordPress, você também deve otimizar o número de arquivos por postagem. Tente usar plugins premium para otimizar a velocidade da imagem e do site. Como resultado, você poderá desenvolver um site fácil de usar, rápido e eficiente.