Blog

Otimizando imagens e melhorando performance web

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?

Imagem Waterfall
Imagem exemplo em um Waterfall

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

armazém de ideias não otimizado
Armazém de ideias não otimizado

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.

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

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:

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:

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:

  • Site TinyPNG, comprime PNG e JPG online: https://tinypng.com/
  • Software ImageOptim (apenas para MAC): https://imageoptim.com/
  • Softwares de edição de imagem: Adobe Photoshop, Sketch e outros

Esse artigo foi relevante para você?

Entre em contato conosco, a Hoop é muito mais do que informação






Postagens relacionadas

Respondendo algumas perguntas sobre o que é PWA

O que define o que é uma PWA? Que tal criar uma aplicação para dispositivos móveis e desktops produzindo nada além da própria web? Isso é o que se define de uma Progressive Web App ou PWA. O termo foi utilizado pela primeira vez pelo pessoal do Google, e está fundamentada em 3 pilares: Confiabilidade: […]

Saiba Mais
SEO no WordPress

SEO e WordPress – Dicas para um bom ranking

SEO é uma das coisas mais importantes para você ter em seu site e não é de hoje que o SEO e WordPress andam juntos. O objetivo de qualquer um ao escrever um conteúdo, seja ele um blog ou apenas uma página com informações, é ter um conteúdo de relevância que irá aparecer com maior […]

Saiba Mais
Sites Responsivos

Sites Responsivos: adapte-se à nova realidade!

Você conhece o real potencial do seu site? Além disso, conhece a importância de um site responsivo, adaptado para os dispositivos móveis? A forma como navegamos na internet está mudando também. Onde o cenário se mantinha somente na navegação desktop, hoje dá espaço aos tablets e celulares, que também têm se adaptado à essas mudanças […]

Saiba Mais
Cancelar