Optimização de imagens para web

Usar imagens e grafismos apelativos e agradáveis em páginas web, torna-se atractivo e desperta o interesse do visitante. Contudo, o uso de imagens excessivas e demasiado pesadas, pode provocar um efeito contrário ao desejado e o desinteresse de quem visita. Além disso, quanto mais tempo uma página demorar a carregar, maior é a possibilidade de perder visitantes.
Este artigo explica como optimizar imagens para uso na web diminuindo o tamanho dos ficheiros de imagens e gráficos e assim reduzir o tempo de carregamento das páginas.

Os formatos de gráficos para web

Podemos considerar 3 tipos de ficheiros para imagens: o PNG, o GIF e o JPEG. Pode criar grafismos usando outros formatos, mas a publicação deverá ser num destes 3 formatos. Todos eles são suportados desde há muito tempo pelos navegadores web mais comuns, porém o PNG não era suportado por browsers de versões anteriores a 1997.

A escolha do formato correcto: quando usar PNG, GIF ou JPEG ?

Antes de mais, é importante perceber quando usar cada um dos formatos de gráficos. A escolha do formato não deve de forma nenhuma ser arbitrária. Cada um dos formatos difere na forma como os dados da imagem são codificados e comprimidos. Na tabela seguinte, resumem-se as situações em que é mais adequado o uso de um formato ou outro.

Muitas vezes somente a experimentação de vários formatos permite perceber com qual formato se conseguem melhores resultados com a imagem que estamos a trabalhar.

PNG vs GIF: que diferenças ?

É conhecido que o PNG consegue uma melhor taxa de compressão embora por vezes pouco significativa. Mesmo assim pode haver casos (raros) em que o GIF consiga melhores resultados ao nível do tamanho do ficheiro.

Há ainda as seguintes diferenças:

GIF - suporta o uso no máximo de 256 cores (8 bit)

PNG - suporta 16,8 milhões de cores (24 bit), porém o uso de muitas cores tem como consequência o aumento do tamanho do ficheiro.

Como reduzir o tamanho do ficheiro de imagem

Para além da escolha correcta do formato, há também algumas coisas que podem ser feitas para reduzir o tamanho do ficheiro:

A escolha da resolução acertada - Não é necessário usar resoluções acima dos 72dpi (72 pontos por polegada). Na maior parte dos écrans o uso de resoluções acima de 72dpi não traz qualquer melhoria na qualidade da imagem mostrada, pelo que se torna inútil usar resoluções superiores.

Redução do número de cores - Nas imagens PNG e GIF, pode optar-se por reduzir a paleta de cores para menos de 256 cores (menos de 8 bit). Alguns programas permitem testar a imagem usando diferentes números de cores ou número de bit.

“Dithering” - Ao optar por usar uma paleta de cores reduzida, pode ainda usar-se “dithering” que consiste em combinar pontos com as cores disponíveis emulando dessa forma a cor desejada. Quando se usa “dithering” e se observa a imagem mais atentamente, esta pode parecer pouca atractiva. Por isso esta técnica deve ser usada com cuidado e combinada com outras técnicas.

Paleta de cores “browser-safe” - Esta paleta contem 216 cores e garante uma razoável (ou mesmo total) semelhança das cores entre diferentes browsers e plataformas.

“Lossy” - Nas imagens JPEG, pode ser aplicado o tratamento “lossy”. Com esta codificação pode ser criada uma imagem com menos detalhe e tamanho de ficheiro menor que o original e ao mesmo tempo manter o aspecto atractivo e com a informação desejada sendo a diferença imperceptível (ou quase, dependendo das definições “lossy” utilizadas).

Remoção do cabeçalho EXIF - As máquinas forográficas digitais, adicionam dados (o header exif) ao ficheiro JPEG com informações sobre a resolução da imagem, suas dimensões, usode flash, exposição utilizada, marca e modelo da máquina. Por vezes esta informação é longa e completamente inutil para uso na web. A sua remoção pode trazer alguns benefícios.

Quando iniciar a optimização de uma imagem, é conveniente experimentar variantes. Por exemplo, o programa que usar pode ter opções para gravar a imagem em formato JPEG escolhendo maior ou menor qualidade. Teste as diferentes, compare as opções e verifique se na imagem as diferenças são perceptíveis ou relevantes.

Como optimizar imagens para as páginas web carregarem mais rápido

Existem várias técnicas para melhorar a rapidez do carregamento de imagens ou até mesmo iludir a percepção sobre a velocidade de carregamento.

Indique as dimensões da imagem – No html/xthml use os parâmetros “height” e “with” na tag “img”. Isto faz com que o browser saiba exactamente as dimensões da imagem antes de a ler. Desse modo o browser irá apresentar os itens de texto primeiro e apresentará a imagem assim que esta estiver carregada. Não especificar esses parâmetros, fará o browser carregar e apresentar primeiro a imagem para saber as suas dimensões reais e só depois apresentar os restantes elementos de textos.

Páginas e gráficos leves - Tente construir páginas web com um tamanho inferior a 30kb. Imagens individuais não devem exceder os 10kb. No caso de ser necessário apresentar imagens de tamanho superior, apresente na página uma versão reduzida que pode após clique pode ser vista num tamanho superior.

Páginas de entrada leves - Nunca use imagens com tamanho de ficheiro grande nas páginas de entrada. A página de entrada de um sitio web é sempre a mais vista. Um carregamento lento provoca o desinteresse e a desistência na visita.

Usar imagens “progressivas” - Para dar a percepção de que as imagens são carregadas rapidamente, pode ser usada a técnica “progressive”. Imagens PNG, GIF (tipo89) e JPEG que usem “progressive” são primeiramente apresentadas numa resolução muito baixa e á medida que vão sendo carregadas, a sua resolução melhora até obter o aspecto final. Este truque é muito eficaz e proporciona excelentes resultados para imagens que é necessário publicar em maior dimensão.

Usar o cache do browser - Esta é outra técnica que melhora a velocidade de apresentação de páginas web. Um gráfico que tenha sido previamente carregado e utilizado numa página, poderá no browser ser novamente mostrado sem necessidade de o ser de novo transferido do servidor.

Como controlar a qualidade das imagens usadas nas páginas web?

Diferentes plataformas e browsers tem tendência a apresentar imagens com pequenas variações do seu aspecto. Por vezes podem ser detectadas pequenas diferenças na tonalidade das cores e brilho. Por exemplo, uma écran web com imagens que parecem perfeitas num sistema Mac OSX, podem não parecer tão agradáveis num PC com MsWindows e Internet Explorer.

Para além do uso das cores “browser-safe” já referido anteriormente, é importante prevenir e controlar este tipo de problemas testando o trabalho em várias plataformas e diferentes browsers. Se prevê ter visitantes usando dispositivos móveis, será conveniente efectuar testes com dispositivos móveis ou emuladores desses equipamentos.

Que ferramentas usar para tratar imagens ?

Alguns dos melhores programas para tratamento de imagens, estão disponíveis por um custo reduzido ou até mesmo são gratuitos.

Na tabela seguinte, estão listados alguns programas sugeridos para tratamento de imagens e gráficos, sistemas operativos em que se encontram disponíveis e respectivo tipo de licença.

Tenha cuidado ao escolher programas para ambiente MsWindows gratuitos que são anunciados como compressores e optimizadores de imagens. Se não forem programas Open Source, infelizmente alguns deles podem conter adicionalmente software malicioso (spyware, adware).

Tanto o Paint Shop Pro como o Photoshop podem ser executados em sistemas Gnu/Linux com o auxilio do Wine.

Pessoalmente, recomendo o uso do Gimp ou do Paint Shop Pro versão 7, especialmente este ultimo devido á simplicidade de uso das opções de optimização de imagens.

Alguns programas de autoria e desenho vectorial tem opções de exportação das imagens para os formatos PNG, GIF e JPEG. Infelizmente as codificações e compressões usadas por esses programas não são eficientes sendo quase sempre conveniente o uso de um programa especializado para melhorar as imagens exportadas.

Sobre outros formatos: favicon e Flash

O “favicon.ico” (abreviatura de “favorite icon”) é um tipo de gráfico usado como ícone do local web. Este tipo de gráfico não é mais que um formato BMP com a dimensão de 16x16 pontos (pode também ser criado com 32x32, 64x64 e 128x128).

O Flash é cada vez mais popular para produzir animações em páginas web. Muitas das vezes animações simples feitas em Flash devem ser convertidas para os formatos PNG, GIF ou JPEG.

Algumas recomendações finais

Use animações só onde for absolutamente necessário. Tenha cuidado para não produzir animações e efeitos gráficos que sejam intrusivos, irritantes ou distractivos.

Não ceda á “ditadura do design”. Alguns auto intitulados “web designers” pensam que fazer grafismos exuberantes “é que é fixe”. Mas isso pode levar o seu projecto web a desviar-se de opções mais nobres como a usabilidade, acessibilidade, compatibilidade entre plataformas e velocidade.

Não se esqueça que formula a de sucesso de um “web site”, é uma boa organização dos conteúdos, sua quantidade, qualidade e clareza aliada a uma boa velocidade de carregamento das páginas.

• ‹ previous
• 28 of 113
• next ›