28 abril 2021

Porque a otimização de imagens é tão importante para seu blog?

🗨

 


Você dá, as imagens das suas postagens à devida atenção? 


Você sabe que estou falando?

Estou falando de otimização de imagens para suas postagens.


Isso não significa só a escolha de belas fotos para postagens, mas sim otimizar imagens para SEO.


Sim, fotos de qualidade, mas sem afetar o carregamento do blog, a otimização de imagens também é uma grande aliada para os buscadores encontrarem seus artigos através das imagens. 

Uma das coisas mais importantes em um blog são imagens de qualidade e coerentes com o texto apresentado, mas otimizadas sempre.


Vem comigo, saber tudo que você precisa para otimizar suas imagens e conhecer o lazy loading.



Porque a otimização de imagens é tão importante para seu blog?


Blogs que carregam lentamente serão prejudicados pelo tráfego, pois o carregamento lento fará com que o usuário saia de sua página, mesmo que deseje seu conteúdo, e a possibilidade de retorno é de apenas 20%, e completar esta operação trará um blog a taxa de rejeição aumentou substancialmente.


Como devem ser as imagens das postagens:


  1. Condizentes com o texto;
  2. Ter o  tamanho adequado;
  3. Nomear sua imagem assim que baixar, sempre de nome as imagens;
  4. Imagem pesa você sabia?
  5. Como reduzir (pixel) de sua imagem sem alterar a qualidade;
  6. Onde editar suas imagens, quando desejar colocar texto.



As imagens devem ser condizentes com o texto escrito não dá para escrever um texto sobre moda e colocar uma imagem com um  computador, o legal é você escolher algo que pertença ao mundo da moda.


O tamanho da imagem  não devem ultrapassar os 900 pixels, você pode testar qual tamanho fica bom em seu blog porque também dependerá muito do tamanho da sua área de postagem.


 Por exemplo, minha área de postagem é de 960 pixels, eu optei por imagens de 720 x 520 ou do mesmo tamanho usado para o pinterest, assim quando as imagens são salvas do seu blog (pin it) elas já estarão no tamanho de pinos, faça testes e descida aquela que achar melhor.


Não se esqueça ao baixar uma imagem ela sempre vem nomeada assim, (background-906135_1280 (1)), então quando você baixar sua imagem já de um nome a ela correspondente com a postagem a qual ela vai pertencer, isso irá ajudar muito para que sua imagem seja identificada, além de que é mais fácil organizar as imagens em uma pasta no computador e acha-las mais tarde quando precisar usar.



O Peso das Imagens (228KB antes de compactar)


Otimizar imagem



exemplo-de-peso-da-imagens-comparação (37.5KB depois de compactar)


Compactar imagem



Observando as imagens acima é imperceptível notar alguma diferença ou alteração na qualidade, no entanto, a diferença de peso é muito significativa para o blog quanto ao carregamento.



Peso máximo de 300 KB, use imagens PNG somente se for necessário de preferência as imagens jpg e compactadas quanto menos peso para a imagem melhor, pois ajuda o blog a carregar mais rápido, elas devem ser friendly mobile então também temos que estar atentas para quem lê pelo celular possa ter uma boa visão da imagem também.



Para compactar e diminuir o peso das imagens eu uso dois compressores depende de quantas imagens vou compactar o Tinypng é muito bom e pode salvar tudo direto no Dropbox, ele é um dos mais usados e não reduz a qualidade das imagens, mas eu também gosto muito do  Squoosh, que foi usado na imagem acima, muito eficiente e também reduz a imagem em (pixels) do tamanho que você colocar, converte png em jpg quanto a qualidade e nitidez da imagem você pode aumentar a porcentagem de nitidez e ir visualizando.



No squoosh você também tem a opção de reduzir a imagem no tamanho que desejar, mas eu prefiro levar ao Pixlr onde deixo a imagem do tamanho desejado e já edito o texto ou o meu queridinho Canva onde edito  praticamente todas as minhas imagens tanto do blog quando das redes sociais, tanto no pixlr quanto no canva tem ótimas fontes para inserir textos nas imagens.



Muito importante para fins de SEO é o uso do atributo  alt, (alt tag), sempre descreva sua imagem nos campos, texto alternativo e texto do título, o Google lê as imagens então isso significa que se estivem bem descritas ele não saberá que se trata e suas imagens não faram sentido quanto ao SEO sem ajudá -lo.


Note as imagens aqui da postagem elas levam praticamente o título da postagem como nome e estão separadas por traços  dessa forma:


dicas-para-criar-conteúdo


Às vezes até esqueço de colocar dessa forma, mas não esqueço a descrição.


Lembre-se, arquivos otimizados, nomes descritivos nas imagens e use palavras-chave intencionais.


Lazy Loading, o que é?


lazy-loading-o-que-e-para-que-serve


As imagens não compactadas incham suas páginas com bytes desnecessários, fazendo com que seu blog/site se torne pesado ao carregar, muitas vezes travando.


O lazysize é a mais popular biblioteca para imagens de carregamento lento. 


Nada mais é do que um script para carregamento inteligente das imagens a medida que o usuário move a página ele vai gradativamente disponibilizando as imagens.


Você pode usar um carregamento lento, que é uma estratégia de carregar os recursos conforme necessário e não com antecedência  Isso faz com que os recursos de carregamento da página inicial evitando carregamentos que não serão usados.


As imagens que ficam fora da tela durante o carregamento inicial são candidatas para essa técnica.  

O uso do lazysizes torna essa estratégia muito simples de implementação. Insira o código abaixo logo depois da abertura da tag  <head>.


<script src="lazysizes.min.js" async></script>


 Se você tem um blog com muitas imagens é uma boa usar o código, assim proporciona um carregamento mais rápido e não perde o usuário por conta disso.


Essa postagem pertence à Série blog para iniciantes.


Se você ainda não está seguindo a série e deseja ler as postagens anteriores confira a lista dos links abaixo:




Nenhum comentário:

Postar um comentário

Você leu um artigo escrito com muita dedicação. Gostou? !
Deixe seus comentários, críticas e sugestões, eles são muito importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Muito obrigado pela visita e volte sempre, aproveite para conhecer as redes sociais e assinar a newsletter do Universo da Blogueira.

Você também pode gostar desses artigos.