O melhor guia para gerenciamento de imagens do WordPress

  1. 1. Lendo atualmente: O melhor guia para gerenciamento de imagens do WordPress
  2. 2. 3 dicas de gerenciamento de imagem menos conhecidas no WordPress
  3. 3. Erros de SEO na imagem do WordPress e como corrigi-los

O impacto visual é um dos recursos mais importantes quando se trata de um plano de marketing de conteúdo impactante. Bem-vindo a uma nova série de posts – O melhor guia para gerenciamento de imagens no WordPress.


Ele foi projetado para fornecer as ferramentas necessárias para gerenciar os ativos de imagem no WordPress – desde otimizações técnicas, SEO, integração com CDN e gerenciamento de bibliotecas. Neste guia multipartes, recomendamos apenas os métodos, tutoriais, plugins e temas que tentamos ou são recomendados por especialistas do setor.

Também evitaremos sugerir cegamente plugins com alto uso no repositório do WordPress. Em vez disso, recomendamos os que encontrarem a corda perfeita entre proposição de valor e otimização de desempenho.

Você pode se perguntar como faríamos isso. Mais de 24.000 downloads do nosso tema WordPress Multipurpose Total – Responsivo no ThemeForest podem não ser um ótimo indicador.

Bem, analisamos os melhores blogs das principais empresas de hospedagem WordPress (como WPEngine e Pagely) e aprendeu o que eles aprendeu ao exibir bilhões de visualizações de página em milhares de clientes de alto perfil. Compactamos todas essas informações para você em pequenos parágrafos e marcadores para o seu sucesso online. Agora vamos começar, vamos?

Dicas técnicas e de otimização de desempenho para imagens do WordPress

Existem algumas opções de otimização de imagem disponíveis no WordPress que não colocar carga desnecessária no servidor web. Veremos algumas das dicas mais comuns de otimização de imagem que todos devemos seguir, juntamente com alguns outros que vêm a calhar em ocasiões especiais.

JPG ou PNG? Usando o formato de imagem correto

O primeiro passo na otimização da imagem é um bom começo. Eles dizem que um trabalho bem iniciado está pela metade. Esse é exatamente o caso quando se trata de otimização de imagens no WordPress. Tudo começa com a escolha do formato de imagem correto. JPG e PNG são os dois formatos de imagem mais comuns usados ​​online no marketing de conteúdo.

O truque é entender qual formato escolher para cada tipo de imagem. Escolher o errado causa um aumento monumental no tamanho da imagem. Aqui estão as regras.

Quando usar o formato PNG?

Para imagens planas – como vetores, ilustrações, fontes, logotipos, banners, formas, banners etc. – qualquer coisa criada em um formato vetorial, como EPS ou Adobe Illustrator (.AI), use um PNG. Você terá uma imagem otimizada com quase zero perda de qualidade. Se você usar um JPG nesse caso, não comprometerá o tamanho, mas poderá ficar sem qualidade. De fato, em resoluções mais altas, o PNG seria mais leve sem perda de qualidade. O JPG sofreria.

Veja o exemplo dele. Criaremos uma imagem plana a 5000 px e a salvaremos em JPG e PNG.

Imagem de amostra usada para teste

Imagem plana
JPG233KB
PNG42KB

Em poucas palavras, a imagem JPG era 455% maior que a PNG para a mesma resolução.

Quando usar o formato JPG?

Para todo o resto, use um JPG. Qualquer coisa que não seja uma imagem plana ou vetorial, use JPG. Fotos de pessoas, lugares, coisas, etc. – use JPG. Quase todas as fotos nesta categoria usam JPG. Se você usar PNG no lugar de um JPG, poderá encontrar alguns problemas sérios de desempenho.

Você precisa ter cuidado extra neste caso. Se você usar um JPG no lugar de um PNG, haverá pouco ou nenhum dano. No entanto, se você usar um PNG sangrento no caso de um JPG, criará muito espaço para danos. Dê uma olhada neste exemplo.

Configuração: Eu baixei esta imagem do Shutterstock, que pesa cerca de 10,3MB em uma resolução de 6149 × 4562 – essencialmente uma foto de 28MP. A menos que estejamos preparando algo como um folheto pronto para impressão, não usaremos a resolução total da foto em nossos blogs. Digamos que tenhamos um tamanho máximo fixo de imagem em nosso blog de 1600px.

Experimentar: Redimensionaremos a imagem de origem para 1600px e criaremos quatro versões – dois no formato PNG e dois no JPG. Para cada formato (JPG / PNG), usaremos as configurações de compactação recomendadas (a) e (b) configurações máximas de compactação.

Imagem de exemplo para o experimento JEPG

Resultados: Aqui estão os resultados em um bom gráfico para você seguir:

Imagem original (KB)

10870
Resolução-alvo1600px
FormatoDefiniçõesTamanho (KB)% Redução
JPGProgressivo, Qualidade = 8523198%
Não progressivo, qualidade = 8523998%
PNGCompressão = 0557549%
Compressão = 6185283%
Compressão = 9175084%

À primeira vista, pode-se pensar que 84% da compactação de PNG é bom o bastante versus os 98% alcançados em JPG. Isso não é totalmente verdade. Se você olhar mais de perto os tamanhos das imagens, verá que o PNG pesa um pouco mais de 1,7 MB, enquanto o JPG é 0,22 MB. O que significa, o PNG é 8 vezes mais pesado que o JPG versão da mesma imagem na mesma resolução. Em outras palavras, para a mesma imagem e resolução, a versão JPG é 700% mais leve que a PNG!

Para a mesma imagem e resolução, a versão JPG é 700% mais leve que a PNG!

Como regra geral, use PNG para imagens planas e JPG para todo o resto.

Lista de verificação para o upload de fotos em blogs

Existem muitos blogs nos quais os editores carregam diretamente a versão em alta resolução da imagem em seus posts. Aqui estão algumas dicas para fazer upload de fotos em blogs. Eu uso um software gratuito chamado IrfanView, que possui muitos recursos impressionantes. Ilustrarei cada um para você.

1. Redimensione sua imagem

Primeiro, você precisa decidir uma resolução máxima para todas as suas imagens no seu site WordPress. Qualquer imagem acima dessa dimensão seria redimensionada, a menos que seja menor.

IrfanView tem um Conversão em lote recurso (pressione B depois de iniciar o aplicativo), que pode aplicar uma lista de funções a várias imagens de uma só vez. Para nossos propósitos, as funções incluem redimensionar, cortar, adicionar uma marca d’água, etc..

2. Remova os dados EXIF

As fotos clicadas em uma câmera comum possuem várias metadados – que nada mais são do que pequenas informações (mas úteis) sobre a imagem. Exemplos dessas informações incluem coordenadas GPS do local em que a foto foi clicada, configurações ISO, modelo da câmera etc..

Informações EXIF ​​de uma foto aleatória clicada no meu iPhone

A menos que tenhamos blogs de fotos, geralmente não queremos essas informações na imagem de uma postagem de blog. Quando você salva ou converte imagens em lote no IrfanView, os dados EXIF ​​geralmente são removidos. Isso ajuda a preservar sua privacidade – especialmente sua localização física. A diferença de tamanho para a maioria das fotos é de cerca de 200 a 300 KB por imagem.

3. Salvar como JPG progressivo

O IrfanView salvou os JEPGs como progressivos por padrão

Uma imagem JPG progressiva carrega a imagem camada por camada – acelerando o tempo de carregamento. Redes de entrega de conteúdo como KeyCDN foram iniciadas convertendo automaticamente JPGs para JPGs progressivos para acelerar a entrega de imagens e otimizar o armazenamento.

4. Defina o DPI como 72

DPI ou pontos por polegada é uma medida da qualidade da imagem. Um alto valor de DPI é usado para o material de impressão. Para a web, um valor de 72 é perfeito.

Ok, resumindo o exposto acima, seguem as minhas configurações. Eu executo esse recurso depois de compilar todas as imagens para minha postagem no blog – antes de enviar as imagens para o WordPress.

Configurações de conversão em lote no IrfanView para um blog WordPress típico

5. Otimize suas imagens

Independentemente de você ter usado JPG ou PNG, você precisa otimizar sua imagem. Existem várias ferramentas on-line seriamente impressionantes que ajudam a otimizar suas imagens e salvar um muito do espaço.

Estou falando de serviços como TinyPNG ou TinyJPG que simplesmente otimiza suas imagens PNG / JPG com alguns algoritmos avançados.

Imagens otimizadas em TinyPNG

Para ser sincero, não sei como os algoritmos funcionam, mas eles funcionam e sempre consegui uma redução de 50 a 70%, independentemente da melhor maneira de salvá-los.

Você também pode comprar o versão pro do serviço como um plugin do Photoshop por US $ 50. As versões Windows e Mac estão disponíveis. Para os meus propósitos, a versão online (juntamente com o Salvar no Dropbox recurso) funciona melhor.

Plugins de otimização de imagem no WordPress

Até agora, aprendemos as etapas para obter começado direita. E se você já encontrou essa postagem agora e já tem centenas de imagens carregadas? Bem, aqui estão alguns plugins para ajudá-lo com isso:

Otimizador de imagem em nuvem EWWW

Este plugin é uma bifurcação do original e muito popular Otimizador de imagem EWWW plugar. Com mais de 500.000 downloads, esses plug-ins de otimização de imagens permitem otimizar imagens à medida que são carregadas no WordPress.

O que o diferencia da concorrência é sua capacidade de otimizar imagens existentes em seu banco de dados, o que resulta em uma enorme queda no desempenho. Ele também economiza custos significativos de largura de banda, já que a maior parte do seu tráfego vem de artigos antigos. Opcionalmente, você também pode optar por ativar a compactação de imagem com perda (quase invisível a olho nu), mas pode economizar muito espaço e largura de banda. Em termos de tecnologia de otimização, ele pode usar a API do TinyPNG ou TinyJPG para otimizar imagens novas e existentes.

Mas aqui está o problema. Muitos hosts (incluindo o WPEngine) não permitem o plug-in de otimização de imagem EWWW, pois ele carrega muita carga adicional no servidor. Se você, de alguma forma, conseguir ignorar as restrições do servidor, poderá arriscar a suspensão da sua conta devido a violações da política.

É aqui que o Otimizador de nuvem EWWW plugin vem para jogar. Ele descarrega todo o cálculo necessário para otimizar as imagens na nuvem e simplesmente substitui as imagens não otimizadas pelas otimizadas. Como praticamente zero de energia da CPU é usado para compactação, não há carga adicional no servidor. Isso é válido para todas as conversões de imagem novas e existentes no seu site WordPress.

Planos e preços: Como seria de esperar, o plug-in não é gratuito, pois o desenvolvedor deve pagar as contas da computação em nuvem. No entanto, o precificação é extremamente razoável, custando US $ 9,00 por 3000 otimizações de imagem para uma assinatura pré-paga.

O plug-in do EWWW Cloud Optimizer foi projetado de maneira excelente. O scanner de mídia informa quantas imagens você precisa otimizar antes de fazer uma compra. Com base nas imagens do seu servidor, você pode comprar um plano pré-pago relevante.

TinyPNG WordPress Plugin

Este outro ótimo plugin de otimização de imagem que se integra diretamente ao serviço TinyPNG / JPG. Ele automaticamente carrega imagens novas e existentes na biblioteca de mídia do WordPress. Este plugin oferece um plano gratuito de 100 otimizações de imagem por mês.

Freddy havia compilado uma lista de plug-ins de otimização de imagens há um tempo – leia-a se quiser saber mais sobre o assunto.

Conclusão

Isso nos leva ao final do primeiro post desta série. No próximo artigo, saiba bem como algumas dicas e truques menos conhecidos de otimização de imagem, como impedir hotlinks, buscar imagens de servidores remotos e similares. Você tem algumas dicas sob o começando certo categoria? Deixe-nos saber nos comentários abaixo.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map