05 agosto 2019

Otimização de imagens

🗨
Bom dia, leitores! 


Você dá, as imagens das suas postagens à devida atenção, você sabe de que estou falando?

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

Isso não quer dizer escolher fotos bonitas para as postagens e sim ter as imagens otimizadas para SEO, bonitas sim, mas sem prejudicar o carregamento do seu blog.

Um blog que é lento ao carregar se prejudica quanto ao tráfego, pois com a lentidão no carregamento o usuário abandona sua pagina mesmo que ele estivesse desejando muito seu conteúdo e pior que a probabilidade de voltar é de apenas 20% e para completar isso traz para o blog um aumento considerável de taxa de rejeição.

Uma das coisas mais importantes em um blog são as imagens de qualidade sim, mas otimizadas sempre.

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

Bora, lá?


otimização de imagens




Otimização de Imagens


Em primeiro lugar suas imagens devem ser;

  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



exemplo-de-peso-da-imagens-comparação



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 preferencia 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 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

As 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..

Lazysizes, lazy loading  o que é?

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 pagina 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 pagina 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.

Por hoje é isso, confira também as dicas de SEO para Iniciantes .

Depositphotos [CPS] WW

Nenhum comentário:

Postar um comentário

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram