- 1. Atualmente lendo: O melhor guia para gerenciamento de imagens do WordPress
- 2. 3 dicas de gerenciamento de imagens menos conhecidas no WordPress
- 3. Erros de SEO de 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 – The Ultimate Guide to Image Management in WordPress.
Ele foi projetado para fornecer as ferramentas necessárias para gerenciar seus ativos de imagem no WordPress – desde otimizações técnicas, SEO, integração com CDN e gerenciamento de biblioteca. Neste guia de várias partes, recomendamos apenas os métodos, tutoriais, plugins e temas que experimentamos ou são recomendados por especialistas do setor.
Também evitaremos sugerir cegamente plugins que tenham alto uso no repositório do WordPress. Em vez disso, recomendamos aqueles que atingem o acorde perfeito entre proposta de valor e otimização de desempenho.
Você pode se perguntar como faríamos isso. Mais de 24.000 downloads do nosso tema WordPress Multiuso Total – Responsivo no ThemeForest pode não ser um ótimo indicador.
Bem, vasculhamos os melhores blogs das empresas de hospedagem WordPress líderes do setor (como WPEngine e Pagely ) e aprendemos o que eles aprenderam ao atender bilhões de visualizações de página em milhares de clientes de alto perfil. Comprimimos todas essas informações para você em pequenos parágrafos e marcadores para o seu sucesso online. Agora vamos começar, certo?
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 colocam carga desnecessária no servidor web. Veremos algumas das dicas de otimização de imagem mais comuns que todos devem seguir, juntamente com algumas outras que são úteis em ocasiões especiais.
JPG ou PNG? Usando o formato de imagem correto
O primeiro passo na otimização de imagem é um bom começo. Dizem que um trabalho bem começado 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
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 formato Adobe Illustrator (.AI), use um PNG. Você acabará obtendo uma imagem otimizada com perda de qualidade quase zero. 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.
Tome o exemplo dele. Vamos criar uma imagem plana em 5000px e salvá-la como JPG e PNG.
Imagem de amostra usada para teste
| Imagem plana | |
| JPG | 233 KB |
| PNG | 42 KB |
Em poucas palavras, a imagem JPG foi 455% maior que o 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, terá sérios problemas de desempenho.
Você precisa ter um 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: baixei esta imagem do Shutterstock, que pesa cerca de 10,3 MB em uma resolução de 6149 × 4562 – essencialmente uma foto de 28 MP. 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 temos um tamanho de imagem máximo fixo de nosso blog de 1600px.
Experimento: vamos redimensionar a imagem de origem para 1600px e criar quatro versões – duas para o formato PNG e duas para JPG. Para cada formato (JPG/PNG), usaremos as (a) configurações de compactação recomendadas e (b) as configurações de compactação máxima.
Imagem de amostra para experimento JEPG
Resultados: Aqui estão os resultados em um bom gráfico para você seguir:
| Imagem Original (KB) | 10870 | ||
| Resolução alvo | 1600px | ||
| Formato | Configurações | Tamanho (KB) | % Redução |
| JPG | Progressivo, Qualidade = 85 | 231 | 98% |
| Não Progressivo, Qualidade = 85 | 239 | 98% | |
| PNG | Compressão = 0 | 5575 | 49% |
| Compressão = 6 | 1852 | 83% | |
| Compressão = 9 | 1750 | 84% |
À primeira vista, pode-se pensar que 84% de compactação de PNG é bom o suficiente contra os 98% alcançados em JPG. Isso não é inteiramente verdade. Se você observar mais de perto os tamanhos das imagens, verá que o PNG pesa um pouco mais de 1,7 MB, enquanto o JPG tem 0,22 MB. O que significa que o PNG é 8 vezes mais pesado que a versão JPG da mesma imagem na mesma resolução. Ou seja, 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 fazer upload de fotos do banco de imagens em blogs
Existem muitos blogs onde os editores carregam diretamente a versão de resolução total da imagem em seus posts. Aqui estão algumas dicas para fazer upload de fotos para blogs. Eu uso um software gratuito chamado IrfanView que tem muitos recursos incríveis. Vou ilustrar cada um para você.
1. Redimensione sua imagem
Primeiro, você precisa decidir uma resolução máxima para todas as suas imagens em seu site WordPress. Qualquer imagem acima dessa dimensão seria redimensionada, a menos que seja menor.
O IrfanView possui um recurso de conversão em lote (pressione B após 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 têm muitos metadados incorporados – que nada mais são do que pequenos (mas úteis) bits de informação sobre a imagem. Exemplos de tais informações incluem as coordenadas GPS do local onde a foto foi clicada, configurações ISO, modelo da câmera, etc.
Informações EXIF
A menos que estejamos postando 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
3. Salve como JPG Progressivo
IrfanView salvou JEPGs como progressivos por padrão
Uma imagem JPG progressiva carrega a imagem camada por camada – acelerando assim o tempo de carregamento. As redes de entrega de conteúdo, como a KeyCDN, começaram a converter automaticamente JPGs em JPGs progressivos para acelerar a entrega de imagens e otimizar o armazenamento.
4. Defina o DPI para 72
DPI ou pontos por polegada é uma medida de qualidade da imagem. Um valor de DPI alto é usado para material de impressão. Para a web, um valor de 72 é perfeito.
Ok, resumindo o que foi dito acima, a seguir estão 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
Não importa se você usou JPG ou PNG, você precisa otimizar sua imagem. Existem muitas ferramentas online realmente incríveis que ajudam você a otimizar suas imagens e economizar muito espaço.
Estou falando de serviços como TinyPNG ou TinyJPG que simplesmente otimizam suas imagens PNG/JPG com alguns algoritmos avançados.
Imagens otimizadas em TinyPNG
Para ser honesto, não sei como os algoritmos funcionam, mas eles funcionam e sempre consegui uma redução de 50 a 70%, não importa o quão melhor eu os salvasse.
Você também pode comprar a versão pro do serviço como um plug-in do Photoshop por US$ 50. As versões para Windows e Mac estão disponíveis. Para meus propósitos, a versão online (juntamente com o recurso Salvar no Dropbox ) funciona melhor.
Plugins de otimização de imagem no WordPress
Até agora, aprendemos os passos para começar bem. E se você se deparar com este post agora e já tiver centenas de imagens enviadas? Bem, aqui estão alguns plugins para ajudá-lo com isso:
EWWW Cloud Image Optimizer
Este plugin é um fork do plugin EWWW Image Optimizer original e muito popular . Acumulando mais de 500.000 downloads, esses plugins de otimização de imagem 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 um enorme aumento de desempenho. Também economiza custos de largura de banda significativos, pois a maior parte do seu tráfego vem de artigos antigos. Você também pode optar por ativar a compactação de imagem com perdas (que é pouco visí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 do TinyJPG para otimizar imagens novas e existentes.
Mas aqui está o problema. Muitos hosts (incluindo o WPEngine) não permitem o plug-in EWWW Image Optimization, pois ele coloca muita carga adicional no servidor. Se, de alguma forma, você conseguir contornar as restrições do servidor, poderá correr o risco de sua conta ser suspensa devido a violações de política.
É aqui que o plug-in EWWW Cloud Optimizer entra em ação. Ele descarrega toda a computação necessária para otimizar as imagens para a nuvem e simplesmente substitui as imagens não otimizadas pelas otimizadas. Como praticamente zero de energia da CPU é usada para compactação, não há carga adicional no servidor. Isso é válido para todas as conversões de imagens novas e existentes em seu site WordPress.
Planos e Preços: Como seria de esperar, o plugin não é gratuito, pois o desenvolvedor deve pagar as contas de computação em nuvem. No entanto, o preço é extremamente razoável, custando US $ 9 por 3.000 otimizações de imagem para uma assinatura pré-paga.
O plug-in EWWW Cloud Optimizer foi projetado lindamente. 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 adquirir um plano pré-pago relevante.
Plugin WordPress TinyPNG
Este outro ótimo plugin de otimização de imagem que se integra diretamente ao serviço TinyPNG/JPG. Ele automaticamente imagens novas e existentes são carregadas na biblioteca de mídia do WordPress. Este plugin oferece um plano gratuito de 100 otimizações de imagem por mês.
Freddy compilou uma lista de plugins de otimização de imagem um tempo atrás – dê uma lida se quiser saber mais sobre o assunto.
Conclusão
Isso nos leva ao final do primeiro post desta série. No próximo artigo, vamos aprender algumas dicas e truques de otimização de imagem menos conhecidos, como evitar hotlinking, buscar imagens de servidores remotos e afins. Você tem algumas dicas na categoria de introdução correta ? Deixe-nos saber nos comentários abaixo.
