Como otimizar imagens para WordPress, um guia completo

Como otimizar imagens para WordPress, um guia completo

As pessoas na web não têm muito tempo para consumir dados, porque há muito deles. Existem tantos dados que simplesmente não temos tempo para ler tudo! Como curador de conteúdo da Web moderna, sua tarefa é maximizar o rendimento. Quanto mais você expressar com palavras menores, melhor estará no seu trabalho.


Por que as imagens (tão importantes) são importantes?

Existem muitas e muitas razões pelas quais você (e deve) usar imagens em suas postagens e artigos:

  • As imagens servem como estímulos visuais para um call to action (CTA). Um CTA pode ser qualquer tarefa que você deseja que seu visitante execute. CTAs comuns incluem assinar seu boletim informativo, compartilhar seu artigo nas mídias sociais ou comprar seu produto.
  • As imagens aprimoram a conexão que o escritor procura estabelecer com o leitor.
  • Imagens transmitem mais por menos.

Portanto, é extremamente importante que usemos as imagens corretas em nossas apresentações (postagem no blog, relatório informal, apresentação real do PowerPoint etc.) para deixar uma marca na mente do leitor!

Mas espere! Há um problema!

As imagens ocupam cerca de 63% da largura de banda usada pelos sites modernos, por isso é cada vez mais importante que sejam otimizadas adequadamente para velocidade.

Um atraso de um segundo nos tempos de carregamento da página pode reduzir as taxas de conversão em 7%

Estabelecemos que as pessoas têm um curto período de atenção (uma das desvantagens da taxa de produção de conteúdo moderna). Mesmo se você usar as imagens corretas, se elas não forem carregadas dentro do prazo aceitável, o interesse será perdido..

10 erros mais comuns de otimização de imagem

A maioria dos sites tem um problema – eles usam imagens excelentes, mas a maneira como a imagem é veiculada ao visitante é ruim. Tamanho grande, otimização ruim, formato incorreto, dimensões (tamanhos) desnecessariamente grandes, imagens sem resposta e erros de SEO descuidados são alguns dos problemas mais comuns que a web moderna enfrenta. No artigo de hoje, abordaremos esses problemas!

1. Dimensões grandes

“Batatas fritas extras” nem sempre são boas

Este é um clássico. Suponha que você precise de uma foto de 150 × 150 pixels na página “Equipe” do seu site. Geralmente, você usa um tiro na cabeça de 5 MP, edita-o um pouco e, finalmente, faz o upload.

Você localizou o problema? Algumas pessoas carregam diretamente a imagem real de 5MP! O tema do WordPress carregará a imagem inteira de 5 MP (que é de 5 x 10 ^ 6 pixels) e solicitará que o navegador a reduza para a dimensão necessária de 150 x 150 pixels. Em essência, o navegador exibe apenas 0,0045% da imagem original!

Você acaba desperdiçando a largura de banda da sua e do visitante (mesmo se estiver exibindo a imagem por meio de uma rede de entrega de conteúdo como a Stackpath CDN), consumindo mais espaço no disco rígido e aumentando o tempo de carregamento. Nenhum dos recursos é algo que você deseja no seu site.

Sempre redimensione (e redimensione, quero dizer, reduza o tamanho) a imagem para as dimensões necessárias e faça o upload!

ImageResize.org

Você não precisa de software sofisticado para fazer isso – existem ferramentas on-line gratuitas, como ImageResize.org você pode usar para redimensionar e otimizar suas imagens rapidamente. Basta fazer o upload e ajustar suas configurações de foto. Quando terminar, baixe sua imagem otimizada para usar em seu site. Eles também oferecem uma rápida Compressor de imagem se você quiser apenas reduzir o tamanho do arquivo.

Ferramentas úteis:

  • IrfanView é um excelente freeware para redimensionar em lote suas imagens com opções avançadas como otimização, marca d’água e bordas.
  • ImageMagick é uma ferramenta de código aberto avançada que pode ser usada em uma variedade de linguagens de programação e sistemas operacionais. Você pode escrever seu próprio aplicativo ou simplesmente usá-lo na linha de comando.
  • ImageOptim (Mac) permite arrastar pastas inteiras e otimizar rapidamente várias imagens.
  • TinyPNG é uma ferramenta de compactação de imagem online com uma API.

2. Formato de imagem incorreto

shutterstock_108312266

O formato usado para a imagem desempenha um papel vital. Como regra geral, use PNG para gráficos vetoriais e imagens geradas por computador, como clip-art etc. JPEG para fotografias ou imagens com uma variedade de cores. Para uma explicação detalhada, confira este incrível resposta StackOverflow.

3. Não usando JPEGs progressivos

JPG de linha de base (normal) versus JPG progressivo

JPG de linha de base (normal) versus JPG progressivo

Para o homem comum, os JPEGs são de dois tipos – Baseline e Progressive. Visualmente, ambos são iguais. A diferença está na maneira como eles são carregados:

  • O JPEG da linha de base possui apenas uma camada – contendo a imagem inteira. Quando solicitado, a imagem inteira é carregada de uma só vez.
  • JPEGs progressivos compõem a imagem com várias camadas. Uma imagem JPEG progressiva é carregada camada por camada, o que aumenta gradualmente a qualidade, resultando em uma visualização sem perdas.
IrfanView suporta conversão em lote com JPEG progressivo

IrfanView suporta conversão em lote com JPEG progressivo

Todos os principais redimensionadores de imagem permitem salvar imagens como JPEG progressivo.

4. Não usando o Lazy Load

Carregamento lento é um excelente economia de recursos técnica em que uma imagem é carregada apenas quando o visitante rola para baixo até o quadro de visualização da imagem. Considere um artigo – “15 dos carros mais econômicos em 2014”. Naturalmente, este artigo conterá pelo menos 15 imagens. E não importa a altura do dispositivo de exibição – monitor, tablet ou smartphone, você não pode ajustar todas as 15 imagens no quadro de visualização. Você deve rolar para baixo para ver todas as imagens.

Com o Lazy Loading ativado, as imagens serão carregadas apenas quando um visitante estiver nas proximidades da imagem. Em outros termos, as imagens começam a carregar exatamente quando você rola para baixo para visualizá-las. As primeiras imagens, no entanto, são carregadas instantaneamente, pois você já está no quadro de visualização. O carregamento lento economiza largura de banda nas duas extremidades e melhora o tempo de carregamento! Você pode usar o Lazy Loading no WordPress com o BJ Lazy Load Plugin.

5. Não usando uma CDN

cdn-network

O uso de uma CDN (Rede de entrega de conteúdo) veiculará a imagem de um servidor fisicamente mais próximo do local do visitante. Se um visitante da Índia solicitar uma imagem e a CDN tiver um POP (ponto de presença ou simplesmente um servidor) em Tóquio e Nova York, a imagem será veiculada no servidor localizado em Tóquio.

Quando você tiver tráfego considerável, configure uma CDN com o WordPress para diminuir o tempo de carregamento e obter um desempenho geral. Aqui no WPExplorer, recomendamos Cloudflare. Para sites recém-nascidos, recomendamos uma lista de serviços CDN gratuitos que você pode experimentar.

6. Não declarando o atributo ‘alt’

O atributo “alt” descreve a imagem para o mecanismo de pesquisa. O texto digitado nesse campo será exibido ao usuário caso a imagem não possa ser carregada. Muitas pessoas tendem a deixar esses campos em branco. Isso é muito prejudicial para o SEO e você perde tráfego. Você deve sempre tentar incluir as palavras-chave do seu site na tag alt das imagens.

7. Não otimizando imagens

lápis-giz de cera-pontos

Imagens otimizadas são 40% mais claras que as imagens normais. Isso melhora o tempo de carregamento e economiza largura de banda. Na lista dos melhores plug-ins de otimização de imagem do Freddy, recomendamos WPSmush.it otimizar suas imagens. Kraken.io também é uma ótima opção online para compactar imagens em um instante. Usamos o tempo todo aqui no WPExplorer para otimizar imagens em destaque antes de enviá-las para postagens e demonstrações de temas.

8. Imagens responsivas

A Responsive Web Design está aqui

A Responsive Web Design está aqui

Mesmo que seu site seja responsivo, isso não significa que suas imagens sejam. Isso significa que a imagem do cabeçalho usada para uma tela de 22 ”também é veiculada em um iPhone de 5”. Quando você carrega uma imagem, o WordPress a redimensiona em várias versões – Miniatura, Média, Tamanho Grande, etc. Isso pode ser alterado pelo desenvolvedor. Um tema bem codificado servirá a versão de tamanho “Médio” da imagem, economizando largura de banda.

o Picturefill.WP O plugin substituirá as tags de imagem por um novo elemento que serviria imagens diferentes com base em consultas de mídia. É bastante experimental (significa que há bugs) e não deve ser usado em um site ao vivo.

9. Legendas da imagem

As legendas nem sempre são necessárias, embora em alguns casos sejam necessárias – como capturas de tela em um tutorial. A legenda de imagens ajuda os leitores a entender melhor o tópico, além de aumentar seu SEO.

10. Nome do arquivo de imagem

Pense no nome do arquivo do ponto de vista de um mecanismo de pesquisa. Use o mesmo texto que você usaria na tag ‘title’ da imagem. Além disso, tente incluir as palavras-chave mais relevantes para o seu site.

Conclusão

hero-11

O SEO de imagem é extremamente importante para qualquer site – antigo ou novo. Pessoas que implementam SEO de imagem devidamente (pode ser bastante mundano às vezes), é possível obter uma quantidade significativa de tráfego orgânico (o melhor tipo de tráfego) no longo prazo.

Tem uma técnica de otimização incrível? Manda brasa!

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