Otimizando imagens para melhorar a performance

Quando o site da startup Armazém de Ideias foi ao ar, perceberam que a página, ao ser requisitada, apresentava o seguinte comportamento:

Note que, ao carregar a página, algumas imagens demoraram alguns milésimos de segundos para serem apresentadas na tela.

E então você pode estar se perguntando:

"Ok, mas qual o problema disso?"

Analisando o contexto 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, no momento em que acessa nossa página, entendemos que tempo é um fator importante na experiência do usuário.

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.

A performance com imagens na web

Existem diversas variáveis que influenciam na performance de um site.

No caso do site da Armazém de Ideias, o primeiro problema que identificamos são as imagens.

Veja que logo de cara temos um banner ocupando toda a extensão da tela. Imagens de grandes dimensões, por si só, são mais pesadas e carregam mais lentamente na web.

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 funcionam as imagens no desempenho 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, enquanto as imagens vetoriais são baseadas em fórmulas que recalculam os valores da forma sempre que redimensionada, preservando a qualidade.

Note que a imagem rasterizada tem um limite de ampliação até começar a ser distorcida e pixelizada, ou seja, temos uma redução da qualidade de visualização à medida que expandimos a imagem.

Enquanto isso, a imagem vetorial permanece em ótima qualidade.

Os formatos de imagem raster na web

Além disso, as imagens raster contam com três formatos diferentes de arquivo, com características e possibilidades diferentes.

JPG

O formato JPEG, por exemplo, usamos com imagens compostas de muitas cores, como fotografias, que, porém, terão um tamanho de arquivo bastante reduzido e, em consequência, perdem um pouco da qualidade, com imagem mais pixelizadas, com 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, porém teremos muito mais perda na qualidade da imagem.

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.

Além disso, temos a novidade de poder salvar arquivos com transparência também, que ajudam a aplicar estas imagens sobre diferentes planos de fundo, como no caso deste exemplo:

GIF

Por fim, temos o formato GIF, que 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.

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 como otimizá-los para garantir uma melhor performance no carregamento das páginas.

Otimizando as 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 até mesmo os arquivos SVG no Ilustrator.

"Mas o que, de fato, muda quando otimizo uma imagem?"

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, uma vez que estamos 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.

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

O que achou deste post? Conta pra gente suas experiências e sugestões sobre o tema!

Entenda mais sobre boas práticas e técnicas para melhorar a Performance Web neste curso da Alura e deixe suas páginas muito mais rápidas e otimizadas. ;)