05 agosto 2019

Otimização de imagens

🗨

Bom Dia leitores ! 


Você da as imagens das suas postagens à devida atenção , você sabe do 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 imagens 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á do 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 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 .

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 , ela são muito importantes para fazer o blog cada vez melhor . Curta , compartilhe ,ajude o blog a crescer .
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Confira também outras postagens aqui do Baú da Dri