Otimizando imagens. Seu site no Web Acappella mais rápido

Fala pessoal, tudo bem? Nesses últimos 7 anos trabalhando com o WA e atendendo desenvolvedores eu sempre me deparei com situações onde a galera usa imagens bem grandes dificultando o carregamento do site. Nesses últimos 2 meses recebi bastante reclamações que o slider estava lento, as galerias de fotos e etc. Quando fui olhar os módulos tinha imagens de 8 megas (QUE SUSTO RSRS), isso não só compromete a velocidade do site mas destrói a otimização e suas colocações nos mecanismos de busca pois um grande critério para SEO é o carregamento do site.

Pensando nisso desenvolvi um vídeo ensinando a realizar essa otimizações pegando imagens de 20 mb deixando com 200k sem perder qualidade.

Vamos focar em 3 princípios básicos:

1.  Resolução;
2.  Extensão;
3.  Software de otimização.

Vou fazer de duas formas, a primeira é por vídeo (Abaixo) e após o vídeo vou fazer a explicação de forma mais resumida em texto, ai você escolhe qual é sua preferência.

Vamos ao passo a passo com texto.

Correção do vídeo: Existem resoluções de 5120 x 2880 porem como explico no texto abaixo ainda assim dá para continuar usando 1920 de largura.

Vamos ao passo a passo com texto.

Resolução – Falando do primeiro aspecto que é a resolução temos que ter algo em mente. Quando trabalhamos com sites a resolução máxima de um monitor é de 5120 x 2880, porem isso para monitores 5k, o que não é comum, mas ainda assim as imagens com 1920 são adequadas em telas devido as funções responsivas. Se você vai trabalhar com um slider ou um background de largura total e se você usar uma imagem de largura 1920px, você não terá problema da imagem não cobrir todo espaço.

Entendendo isso não há necessidade de usar imagens com resoluções acima de 1920 de largura. Constantemente, quando inspeciono sites, me deparo com imagens de 7000 x 4000, e isso não tem o menor sentido rsrsrs. Se você for usar uma imagem em uma galeria que abre em lightbox você pode trabalhar tranquilamente com resoluções de 1200 de largura que você não vai ter problema.

Se atentando para esse primeiro ponto você vai ter uma redução considerável de tamanho da sua imagem.

Extensão – Quando pensamos nas dezenas de extensões que temos para imagens (svg, eps, gif,pdf, tiff, bmp, jpg, png e etc) os mais comuns são PNG e JPG. É muito comum pessoas usarem o PNG que é uma extensão mais pesada. Não há problema em usar o PNG desde que você precise dele, o que quero dizer com isso? Quero dizer que o propósito do PNG é usar imagens sem fundo ou com alguma transparência. A partir do momento que você não tem isso não tem por que usar o PNG. Então a próxima dica é, usa a extensão JPG quando não necessitar de recortes e transparências.

Otimização – Por fim use um programa que realize uma compressão em sua imagem sem comprometer a qualidade. Eu vou indicar um online que tenho usado e conseguido resultados incríveis, é o TINY PNG, apesar do nome ele comprime com maestria imagens em JPG. Acesse https://tinypng.com/

Bom pessoal é isso, se quiserem os detalhes e ver na prática basta assistir o vídeo, lá eu peguei uma imagem de 100mb (ISSO MESMO, ASSUSTADOR) e transformei em 176k sem perder qualidade para a proposta que ela seria aplicada.

Isso sem dúvidas vai deixar seu site feito no Web Acappella mais rápido e sua colocação no Google vai melhorar. Até a próxima.