Como otimizar imagens para web [sem plugin]

Como otimizar imagens para web [sem plugin]

Como fazer um site carregar mais rápido otimizando a imagem

Para o site ter um carregamento mais rápido é necessário ter uma estratégia sobre o que colocaremos nele.

De nada adianta ter um site cheio de efeitos, lindo e extremamente carregado, se ele demorar muito para carregar. Você nunca conseguirá estar no Top 1 do Google.

Pense bem, será que é necessário ter essa quantidade imensa de plugins? 

Será que fazer manualmente a compactação de imagens não seria melhor?

Claro que sim, há dezenas de programas gratuitos para compactar imagens e deixá-las leve e com qualidade.

Vou mostrar um programa que é fantástico e gratuito.

Podemos compactar para diversos formatos e manter a qualidade.

IRFANVIEW 

Você faz o download conforme for o seu sistema operacional, 32 ou 64 bit e instale.

Após instalar, volte ao site e faça o download do pacote de plugin conforme o sistema operacional, 32 ou 64 bit, baixe e instale, é muito fácil e intuitivo.

Há até mesmo opção de converter qualquer tipo de imagem para webp. Não que seja necessário esse formato, pode converter até mesmo para jpg.

Vamos ver a diferença entre a imagem original e depois de convertida.

Abaixo está a imagem original com 474 kb  .jpg

 

cavalo 1 original

Será que é necessário ter todo esse tamanho em uma página do site?

Claro que não.

Não há necessidade de ter uma dimensão tão grande, sendo que a maioria das pessoas acessam os sites usando seu celular.

2048x1392

Totalizando seus 474 kb .jpg

Vamos redimensionar e converter teremos uma qualidade ótima e um tamanho bem inferior.

 

cavalo 1 original tamanho total

 

Clique Ctrl + R e redimensione

 

 

 

cavalo 1 original tamanho redimensionado para 850

Após redimensionada, clique no menu File e escolha Save (original folder)

 Vamos escolher o formato em JPG e deixar a qualidade em 50%

 

 

cavalo 1 escolher o formato e qualidade

A imagem ficará com o tamanho de 39,4 kb

 

cavalo 1 original 850 compactado para jpg

Então, a transformação fica conforme desejamos, essa imagem manteve uma boa qualidade, ficou menor, porém, para o carregamento de uma página faz uma grande diferença.

De 2048x1392 com o total de 474kb

para

850x577 com o total de 39,4

 Mas se lá no PageSpeed Insights da sempre a mensagem para você colocar imagens WebP e AVIF, pode então converter em Webp, ficando assim:

 cavalo 1 original 850 compactado para webp

Com um tamanho menor ainda, mantendo 850x577 com o total de 26,6 kb

Em seu computador, a imagem ficará quase certo como um arquivo desconhecido ou com a opção de abrir somente com o seu navegador padrão, no meu caso, uso o Yandex e aparece assim:

formato no se windows

 

Aqui eu misturei imagens jpg e webp e mantive uma nota muito boa no PageSpeed Insights por fatores de hospedagem e sempre tento deixar o site mais "limpo" possível, usando poucos plugins.

 

Mas o melhor é ir testando, deixando a qualidade até mesmo em 30 no formato jpg e depois converter para webp.

Faça o que for viável e sempre teste até encontrar um resultado satisfatório.

 

Artigos Relacionados