Como otimizar suas imagens para WordPress

Existem muitas razões pelas quais você deve (e deve) incluir imagens em seu conteúdo WordPress. As imagens ajudam a manter seus leitores engajados. Eles também são uma maneira de dividir longos pedaços de conteúdo e melhorar a otimização do mecanismo de pesquisa (SEO). No entanto, eles também podem tornar seu site lento.

Felizmente, existem alguns recursos disponíveis que podem ajudá-lo a otimizar suas imagens. Isso significa que você terá mais chances de superar velocidades de página lentas que podem prejudicar o sucesso geral do seu site.

Neste artigo, veremos por que imagens grandes podem estar arrastando seu site para baixo. Em seguida, exploraremos como compactar seus arquivos de mídia com eficiência, juntamente com algumas dicas fundamentais de otimização de imagem que podem melhorar o SEO do seu site.

Por que você deve otimizar suas imagens para WordPress

As imagens são uma peça valiosa e importante de qualquer estratégia de conteúdo. No entanto, eles também podem ser uma das principais causas de lentidão no carregamento da página.

Um site lento é um problema, porque pode afastar os usuários. Na verdade, as páginas que levam cinco segundos ou mais para carregar apresentam, em média, um aumento de 90% na probabilidade de um usuário desistir (sair depois de visualizar apenas uma única página).

Embora existam vários fatores que podem tornar seu site lento, imagens e arquivos de mídia ocupam 63% da largura de banda em sites modernos. Consequentemente, é importante otimizar as imagens que você carrega em seu site.

Também é importante notar que a velocidade do site é um fator de classificação do Google. Isso significa que a rapidez ou lentidão do carregamento da sua página determinará, até certo ponto, a classificação dela nos resultados da pesquisa. Existem muitos fatores que influenciam seu PageRank, e as imagens se enquadram na categoria “Usabilidade de páginas da web”.

A otimização de imagens trata, na verdade, de melhorar duas coisas:

• O número de bytes usados ​​para codificar cada pixel da imagem
• O número total de pixels usados.

Em outras palavras, otimizar significa que você está obtendo a melhor qualidade possível com o mínimo de pixels e bytes. Isso reduz o tamanho dos arquivos de mídia e pode ter um impacto significativo na velocidade geral do seu site.

Otimize suas imagens antes de enviar para o WordPress

Em última análise, o melhor cenário para o seu site é que você otimize suas imagens antes de carregá-las. Isso é feito para que você não fique com duplicatas ou várias versões de uma imagem. Isso anularia o objetivo de aliviar a carga do seu site por meio da otimização de imagens.

Com isso em mente, vejamos algumas das considerações que você precisará fazer ao decidir como otimizar a mídia do seu site.

Formatos de arquivo de imagem

Para começar, vamos dar uma olhada nos vários tipos de formatos de imagem existentes. Compreender como cada um deles é diferente e quando é melhor usá-los pode ajudá-lo a criar um uso mais simplificado de imagens.

Os dois formatos de imagem mais comuns usados ​​online são JPEGs e PNGs. Ambos os formatos são compostos de pixels. Os pixels se expandem quando você altera o tamanho de uma imagem, o que às vezes pode deixá-la embaçada. No entanto, esses tipos de imagem têm diferentes pontos fortes e fracos.

Quando usar JPEGs

Os arquivos JPEG são uma boa opção para impressão e conteúdo da Web. Esse tipo de arquivo de imagem usa o que é chamado de formato 'com perdas'. Quando uma imagem maior é convertida em JPEG, algumas das informações contidas em seu arquivo são perdidas.

Essa informação não é necessária para simplesmente exibir a imagem. No entanto, o que isso significa é que a conversão para JPEG resulta em um tamanho de arquivo menor, mas pode haver algum sacrifício na qualidade geral da imagem. Felizmente, a redução na qualidade não é muito perceptível, especialmente para imagens menores.

Quando usar PNGs

Os arquivos PNG também são úteis para conteúdo da Web, assim como os JPEGs, mas de uma maneira diferente. Como os PNGs podem ter fundos transparentes, por exemplo, eles são mais versáteis e práticos para projetar gráficos da web.

PNGs usam um formato de arquivo 'sem perdas'. Isso significa que todas as informações sobre a imagem são mantidas quando o arquivo é compactado. Como resultado, eles tendem a ser de qualidade superior, mas oferecem uma melhoria menor no tamanho dos arquivos e na velocidade das páginas. Eles são uma boa opção para gráficos e ícones e para imagens de alta qualidade.

Tamanho da imagem

É hora de cortar o inchaço. Entregar imagens dimensionadas é uma das maneiras mais simples e eficazes de otimizar suas imagens. Por que tão eficaz? O dimensionamento da imagem garantirá que você não envie mais pixels do que o necessário para exibir o ativo em seu tamanho pretendido no navegador.

Muitos sites tentam fornecer imagens grandes e sem escala e dependem do navegador para redimensioná-las, o que resulta no uso de recursos extras e na velocidade mais lenta do site. Se o tamanho natural da imagem for 820×820 pixels e ela for exibida pelo navegador como 400×400 pixels…são 32.400 pixels desnecessários!

A clareza e velocidade com que uma página carrega tem muito a ver com o dispositivo no qual a imagem é exibida (celular, desktop, etc). Por exemplo, uma imagem 4k pode ficar bonita em seu monitor de 27 polegadas.

No entanto, quando um visitante carrega uma página com essa imagem, o navegador primeiro renderiza o arquivo em sua resolução total e depois o reduz para caber na tela. Se eles estiverem usando um dispositivo móvel com menos de 400 pixels, provavelmente perderão seu conteúdo.

Com isso em mente, algumas práticas recomendadas ao exportar suas imagens incluem:

• Mantenha os tamanhos de arquivo de sua imagem abaixo de algumas centenas de kilobytes, salvando-os como JPEGs ou PNGs 'otimizados para a Web'.
• O padrão da Web para imagens é de 72 pontos por polegada (dpi), o que pode ser obtido salvando as imagens no formato prescrito acima.

Você pode usar o Photoshop, Lightroom ou um editor semelhante para reduzir o tamanho da imagem para cerca de 1.500 pixels ou menos de largura. No Photoshop, basta ir em Imagem > Tamanho da imagem para ajustar manualmente as dimensões e a resolução da sua imagem. Você também pode ir para Arquivo > Exportar > Salvar para a Web para otimizar suas imagens para upload na Web:

Se você não deseja exibir fotos nítidas e vívidas em um monitor maior, pode reduzir ainda mais o tamanho da imagem.

Se estiver trabalhando com o Lightroom, vá para Arquivo > Exportar para ajustar manualmente o tamanho da imagem ao exportá-la:

O tamanho e a resolução da imagem são apenas uma parte do quebra-cabeça. Quando se trata de otimizar suas imagens, você também deve entender a compactação e usá-la com eficácia.

Compressão de imagem

Em poucas palavras, a compactação de imagem é uma forma de minimizar o tamanho (em bytes) de um arquivo gráfico, sem degradar a qualidade da imagem a um nível inaceitável. Conforme discutimos, imagens de alta resolução que são desnecessariamente grandes em tamanho de arquivo podem afetar drasticamente a velocidade da página.

Por outro lado, as imagens otimizadas são, em média, 40% mais leves do que as imagens não otimizadas. Como regra geral, convém otimizar todas as imagens e outras mídias que você carrega em seu site, antes ou durante o processo de upload.

Compressão com perdas vs sem perdas

Como mencionamos anteriormente, JPEGs e PNGs usam dois tipos diferentes de compactação de imagem. A compactação sem perdas preserva todos os dados do arquivo original, sem sacrificar a qualidade.

Com compactação sem perdas, você normalmente divide um arquivo em um formato 'menor' para transmissão ou armazenamento. Em seguida, as informações são reunidas na outra extremidade, para que possam ser usadas novamente.

Por outro lado, a compactação com perdas remove alguns dos dados contidos no arquivo de imagem. Isso pode resultar em uma queda maior na qualidade, mas também em uma melhoria mais significativa na velocidade da página. Você pode até personalizar a quantidade de compactação, a fim de obter um equilíbrio entre qualidade e desempenho.

Plugins de Compressão de Imagem

Imagens carregadas rapidamente significam um site mais rápido e melhor SEO. Aqui estão alguns plugins de otimização de imagem para ajudá-lo com a compactação de imagem.

Compressão e Otimização de Imagem Smush

O plug-in de compactação de imagem do Smush funciona para redimensionar, otimizar e compactar todas as suas imagens para a Web, para que sejam carregadas mais rapidamente do que antes. Se o seu site for rico em fotos, esse plug-in é obrigatório.

Otimizador de imagem ShortPixel

O plug-in Image Optimizer do ShortPixel comprime todas as imagens e PDFs passados ​​e futuros carregados em sua biblioteca de mídia. O plug-in fornece compactação com e sem perdas para a maioria dos tipos de arquivo. Se você é um fotógrafo, pode optar pela compactação JPEG brilhante, que usa um algoritmo de otimização com perdas de alta qualidade.

Compactar imagens JPEG e PNG

Procurando apenas otimizar JPEGs e PNGs? Este plug-in usa os serviços de compactação de imagens TinyJPG e TinyPNG para ajudá-lo na compactação de imagens. Em média, as imagens JPEG são compactadas em 40 a 60 por cento e as imagens em PNG em 50 a 80 por cento, sem perda visível de qualidade.

Otimizador de Imagens EWWW

EWWW Image Optimizer tem dupla função. Ele otimiza as imagens existentes em seu site e também cuida das novas que você carrega. Além disso, oferece muito controle sobre como (e quanto) suas imagens são compactadas.

Otimizador de imagem Kraken.io

Por último, mas não menos importante, o Kraken.io Image Optimizer também é útil para otimizar mídias novas e existentes. Ele suporta compactação com perdas sem perdas e 'inteligente', facilitando a obtenção de imagens de alta qualidade com tamanhos de arquivo menores.

Imagem em destaque

A imagem em destaque não é inserida no corpo de uma postagem do WordPress, mas é usada estruturalmente em todo o tema. Pode aparecer como uma miniatura ao lado do título do post, por exemplo, ou no cabeçalho ao visualizar um determinado post.

A maioria dos temas e widgets depende de imagens em destaque, portanto, não é algo que você queira pular. As imagens em destaque permitem maior personalização; você poderá exibir imagens de cabeçalho personalizadas exclusivas para postagens e páginas específicas ou definir miniaturas para recursos especiais do seu tema.

Depois de decidir o tamanho que deseja que sua imagem em destaque tenha, esse tamanho permanecerá definido para todas as imagens em destaque futuras. O tamanho que você deve selecionar depende do tema do seu site WordPress e do layout de suas postagens.

As imagens em destaque são geralmente mais largas do que altas, variando de 500 a 900 pixels de largura. Também é melhor escolher uma imagem de alta resolução e não uma pixelada.

Dica profissional: para controlar a mídia que é exibida sempre que uma postagem ou página é compartilhada no Facebook ou Twitter, instale o plugin Yoast SEO. Você não apenas poderá personalizar o título e a descrição, mas também enviar os tamanhos de imagem corretos para cada canal social.

Otimize suas imagens após o upload para o WordPress

Recomendamos otimizar suas imagens antes de carregá-las. No entanto, se isso não for possível ou se você quiser otimizar as imagens que já estão em seu site, ainda poderá fazer isso. Existem alguns métodos que podem ajudá-lo a otimizar seu conteúdo ao vivo.

Lazy Load Images

Normalmente, quando alguém visita uma página da web, todo o seu conteúdo começa a carregar. Isso significa que, para uma página com muito conteúdo, pode demorar um pouco para que tudo apareça.

'Carregamento lento' envolve ajustar a maneira como seu site carrega o conteúdo. Ele instrui seu site a se concentrar primeiro em carregar o texto, imagens e outros elementos que são imediatamente visíveis. Só depois disso ele começará a carregar o conteúdo que só é acessível rolando a página. Essa é uma ótima maneira de acelerar seu site e melhorar a experiência de seus visitantes.

A maneira mais fácil de adicionar carregamento lento ao seu site é por meio de um plug-in como o Lazy Load.

Esta é uma ferramenta da WP Rocket que ajuda a reduzir o volume de solicitações enviadas ao servidor web do seu site de uma só vez. Ele até substitui imagens de espaço reservado para vídeos do YouTube, para que o vídeo real seja carregado apenas conforme necessário.

Imagens de Cache

Outra forma de melhorar a velocidade do seu site é através do 'caching'. Isso envolve salvar alguns dos dados do seu site em um local que seja mais fácil e rápido para um visitante acessar, geralmente em um servidor de terceiros mais próximo de onde eles estão localizados ou em seu navegador.

Existem várias maneiras de realizar o cache por meio de codificação, plug-ins e outras ferramentas. Aqui no WP Engine, implementamos cache robusto em todos os nossos sites por padrão. Isso é benéfico para reduzir o impacto que todo o seu conteúdo tem na velocidade da página, não apenas suas imagens.

Remover Dados EXIF

Os dados EXIF ​​são armazenados como parte de um arquivo de imagem e contêm informações sobre onde e como a foto foi tirada. Ele é adicionado automaticamente às imagens pelas câmeras e geralmente não é necessário para seus arquivos da web.

Portanto, remover esses dados de suas imagens pode acelerar suas páginas, embora o impacto provavelmente não seja grande. No momento, não há plugins atualizados que possam ajudá-lo a fazer isso, infelizmente. Portanto, se você usa muitas fotografias em seu site e está preocupado com os dados EXIF, convém entrar em contato com um desenvolvedor para obter ajuda.

Evite redirecionamentos de URL de imagem

Finalmente, outro elemento que pode desacelerar suas páginas é quando suas imagens estão causando redirecionamentos. Isso geralmente acontece quando eles estão ligando para outro lugar.

Por esse motivo, você deve evitar incorporar imagens de fontes externas em seu site. Em vez disso, salve e carregue cada imagem ou mídia diretamente em seu site, se possível. Você também pode querer garantir que suas imagens não tenham links para nada, como uma página de mídia separada.

Otimizando imagens para mecanismos de pesquisa

A formatação dos títulos das imagens é outra etapa importante na otimização de imagens. Isso significa que o nome do arquivo de imagem é relevante para seu conteúdo. Ao fazer isso, é mais provável que eles apareçam nos resultados de pesquisa de imagens relacionadas por meio de mecanismos de pesquisa.

Isso aumentará a visibilidade e a acessibilidade de sua marca, bem como o tráfego para seu site, fazendo com que as imagens de seu site sejam listadas com mais frequência nas pesquisas de imagens do Google. A otimização de imagem leva muito pouco tempo e pode fazer uma grande diferença no tráfego do seu site.

Aqui estão algumas dicas adicionais para ajudar suas imagens a terem uma classificação mais alta.

Texto alternativo

Texto alternativo, também conhecido como 'alt text' ou 'alt tag', é um atributo adicionado a uma imagem em HTML. O texto Alt ajuda os mecanismos de pesquisa a entender sobre o que é sua imagem, descrevendo o que ela inclui e qual é o objetivo dela.

O Google depende do texto alternativo para determinar o que é uma imagem, já que tudo o que 'vê' é o que está na tag HTML. Quando você usa um texto alternativo forte e descritivo para suas imagens, é mais provável que veja seu site listado adequadamente nos resultados de pesquisa.

No WordPress, você pode adicionar texto alternativo às suas imagens de duas maneiras. Primeiro, você pode adicioná-lo às imagens que foram colocadas nas postagens, clicando na imagem e usando a opção Configurações de imagem no lado direito da tela.

Como alternativa, você também pode adicionar texto alternativo a uma imagem visitando Mídia > Biblioteca e escolhendo a imagem desejada. Em seguida, basta adicionar seu texto alternativo ao campo Texto alternativo dessa imagem.

Tags de título

As tags de título são semelhantes às tags alt, mas são para leitores humanos, não para robôs de mecanismos de pesquisa. Uma boa otimização de tags de título pode ajudar usuários com deficiência visual a acessar seu site.

Criar Sitemaps de imagem XML

Outra maneira de fazer com que suas imagens sejam notadas pelo Google é criar um mapa do site e enviá-lo. Essa é uma boa opção para imagens que não podem ser rastreadas pelos mecanismos de pesquisa.

Estamos falando de imagens carregadas por JavaScript, por exemplo. Os Sitemaps fornecem aos mecanismos de pesquisa mais informações sobre as imagens disponíveis em seu site, para que possam entender e indexar seu conteúdo com mais precisão.

No WordPress, os seguintes plugins podem ajudá-lo a criar um mapa do site:

• Mapas de site XML do Google
• Yoast SEO
• Pacote de SEO tudo-em-um
• Udinra All Image Mapa do site

Para sites não WordPress, também existem ferramentas que podem ajudar na criação de um mapa do site, incluindo Screaming Frog, Dynomapper e muito mais. Depois de criar um mapa do site, você deverá enviá-lo por meio das ferramentas para webmasters do Google.

Colocação de imagens e legendas

Por último, mas não menos importante, vamos ver o posicionamento dos recursos visuais em uma postagem de blog ou página da web. O local onde você coloca suas imagens em uma postagem pode ter um impacto significativo na classificação dela no Google.

Por exemplo, se você colocar uma imagem mais próxima de suas palavras-chave, é provável que ela tenha uma classificação melhor. Além disso, observe que adicionar uma legenda rica em palavras-chave à sua imagem conta como texto de pesquisa e pode ajudar com um melhor SEO de imagem.

Otimize seu site WordPress com o WP Engine

A otimização de imagem cobre muito terreno quando se trata de melhorar seu site. A otimização pode ajudar a elevar as experiências do usuário e manter seus tempos de carregamento abaixo da marca de cinco segundos. Aqui no WP Engine, entendemos o valor que a otimização de imagem traz para o seu site. É por isso que oferecemos ambientes gerenciados especializados de hospedagem WordPress. Isso significa que você terá suporte especializado e ferramentas e recursos de otimização abrangentes ao seu alcance!