As vezes escutamos reclamações como: “Meu site esta muito lento” ou “Demora uma eternidade para carregar meu conteúdo no celular”, porém alguns desses detalhes tem passado despercebido na mão do usuário, então como melhorar a velocidade e o que ganhamos otimizando imagens?

Waterfall das imagens abertas dentro do site
Waterfall das imagens abertas dentro do site

Imagem exemplo em um Waterfall[/caption]

Fizemos todos os procedimentos para validar o carregamento do site, e podemos reparar que alguns elementos, como imagens, estão fazendo com que o site fique extremamente pesado e consecutivamente “lento”.

Site com imagens não optimizadas
Site com imagens não optimizadas

Note que, ao carregar essa página, algumas imagens demoraram alguns segundos para serem apresentadas na tela e outras não.

E fica a pergunta: “Ok, mas qual o problema disso?”

Analisando o dia a dia acelerado em que vivemos, a impaciência para realizar tarefas da forma mais rápida possível e a variação da capacidade de internet que cada usuário dispõe (estamos falando desde 3G com um sinal baixo até 100MB fibra), no momento em que acessa nossa página, entendemos que tempo é um fator crucial na experiência do usuário, podendo fazer ele até desistir do acesso.

Isso significa que, se ao entrar em um site, o primeiro contato do usuário seja uma tela em branco, com elementos aparecendo lentamente, e muito tempo até encontrar o que ele procura, a probabilidade de deixar seu site ou aplicativo procurando melhores alternativas, é maior.

Sem contar que a performance de um site também faz parte do critério de avaliação para buscadores como o Google, ou seja, ter um site rápido é uma das principais métricas para um bom ranking.

Performance com imagens na web

Existem diversas variáveis que influenciam na performance de um site, porém no caso do site da Armazém de Ideias e no waterfall que apresentamos, um dos maiores problemas que identificamos são as imagens.

Nos dois casos estamos com problema no banner principal, ambos demoram muito para serem apresentados.

Isso significa que devemos evitar a utilização de imagens em sites? É uma boa prática não utilizar imagens em excesso, porém, existem sempre os casos em que a utilização dessas imagens se faz necessária.

E agora? Como posso utilizar minhas imagens sem prejudicar tanto a performance do site?

Os formatos de imagem da web

Para entender como funciona o desempenho de imagens de um site, primeiro precisamos saber quais os tipos de imagem que temos, para então compreender como trabalhar em cada caso.

Os formatos mais utilizados na web são:

  • JPG
  • PNG
  • GIF
  • SVG

Dentro dessa ideia ainda podemos dividir estes formatos em dois tipos de grupos, o das imagens raster (ou bitmap), JPG, PNG e GIF, e o das imagens vetoriais, SVG.

Falando de forma simples e objetiva, as imagens raster são compostas de pixels, que dependem da resolução e tamanho da imagem para ter qualidade na visualização (como uma fotografia retirada de uma câmera), enquanto as imagens vetoriais são baseadas em fórmulas que calculam os valores da forma sempre que redimensionada, preservando a qualidade, ou seja, a máquina do usuário é quem vai “criar” a imagem em cima de parâmetros previamente estipulados.

Diferenças entre imagem rasterizada e vetor
Diferenças entre imagem rasterizada e vetor

Note que a imagem rasterizada tem um limite de ampliação até começar a ser distorcida e pixelizada, temos uma redução da qualidade de visualização à medida que expandimos a imagem, enquanto isso, a imagem vetorial permanece em ótima qualidade, você pode presenciar isso melhor indo na Home de nossa página, o nosso logo esta em .svg (formato vetor) e o banner principal esta em jpg, ao dar o zoom, vera que a logo não fica comprometida, porem o banner sim.

Apresentando os formatos de imagem raster na web

As imagens raster contam com três formatos diferentes de arquivo, com características e possibilidades diferentes.

JPG
O formato JPG, ou também conhecido como JPEG é o mais famoso deles, usamos com imagens compostas de muitas cores, como fotografias, que geralmente terão um tamanho de arquivo bastante reduzido e, por consequência, perdem um pouco da qualidade, com imagem mais pixelizadas, ruídos e granulações, além do comprometimento da cor.

Neste formato é possível aumentar o nível de compressão para reduzir cada vez mais o tamanho de arquivo, porem quanto maior a compressão da imagem, maior será a perda visível de qualidade.

Utilizamos geralmente esse tipo de arquivo em: Fotos, banners, imagens em posts.

PNG
Outro formato é o PNG, que diferente do JPG, pode ser comprimido sem perder a qualidade da imagem, consequentemente gerando arquivos um pouco mais pesados, lembrando que aqui também podemos salvar arquivos com transparência.

Utilizamos geralmente esse tipo de arquivo em: Logos, ícones, imagens com transparência.

GIF
O formato GIF também é capaz de salvar transparências, mas devido à baixa qualidade de imagem que estes formatos geram, utilizamos GIFs geralmente para animações ou imagens sem muitos detalhes.

Utilizamos geralmente esse tipo de arquivo em: Animações básicas (sem áudio).

Exemplo de GIF
Exemplo de GIF

Agora que entendemos um pouco mais do que são e para que servem os diferentes formatos de arquivo, podemos começar a pensar em qual tipo utilizar e como otimizá-los para garantir uma melhor performance no carregamento das páginas.

Comprimindo e otimizando imagens

Dependendo do contexto em que serão inseridas, as imagens podem ter diferentes tipos de otimização. Existem dois tipos possíveis: as lossy e as lossless.

Em outras palavras, temos a possibilidade de otimizar uma imagem com perda de qualidade (lossy) ou sem perda de qualidade (lossless).

Alguns sites de compressão de imagem já possibilitam esse tipo de escolha, mas também temos como fazer essa alteração manualmente, no momento em que salvarmos o arquivo no Photoshop ou utilizando outros programas.

“Otimizando imagens, o que ocorre de fato?”

Para entender melhor a ideia, vamos aplicar uma compressão lossy e uma lossless em uma mesma imagem, para visualizar as diferenças em cada tipo:

Diferenças entre tamanho de imagem e qualidade
Diferenças entre tamanho de imagem e qualidade

Note que, com a otimização das imagens conseguimos um tamanho de arquivo muito menor e dependendo da forma que escolhermos para essa compressão, teremos uma imagem com maior ou menor perda de qualidade, sendo a otimização lossy um resultado mais pixelizado e com menos qualidade de cores, se comparado com a otimização lossless.

A escolha do tipo de compressão da imagem dependerá de cada tipo de projeto. O importante é sempre analisar o quão relevante essa imagem pode ser naquele contexto, para então decidir se vale a pena ou não usar maior compressão.

Aplicando a ideia

Agora que entendemos um pouco mais do que são as imagens para web e como otimizá-las, vamos testar se realmente essa técnica funciona:

Imagens optimizadas dentro do site, tempo de carregamento
Imagens optimizadas dentro do site, tempo de carregamento

A imagem que antes demorava para ser carregada foi comprimida utilizando o Photoshop, de forma que o tamanho do arquivo passou de 6,8MB, em qualidade máxima, para 324KB, em qualidade média, com algumas perdas na imagem.

Apesar de parecer que o tempo de carregamento total da página sofreu pouca mudança (falando de apenas alguns segundos) para o usuário que interage com diversas páginas, em diversos contextos de velocidade de internet e dispositivos, essa alteração já causa um impacto diferente na experiência dele com o site e também na quantidade de banda que você deve enviar para ele (podendo reduzir também o gasto com o servidor no final do mês).

Nos preocupar com a performance dos nossos sites é também um bom caminho para construir uma experiência de interação gratificante para o usuário, além de garantir uma economia de banda para usuários de internet limitada (3G/4G).

Sites e softwares que ajudam a comprimir o tamanho da imagem:

Esse post foi escrito para: https://agenciahoop.com.br/otimizando-imagens/

Navegue em outros posts

Deixe o seu comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *