BananaCraft

Hoje serão escolhidos os três primeiros anúncios do Concurso “BananaCraft te dá uma força!”. Todos os anúncios enviados até a meia-noite de hoje estão concorrendo. Como ainda dá tempo de fazer – tanto para a primeira etapa quanto para as outras – vamos continuar falando sobre como fazer um anúncio eficiente.

Ontem eu falei aqui sobre como montar um banner usando o programa CorelDraw. Hoje vou falar mais sobre como compactar um arquivo para ele não ficar pesado demais. Antes de qualquer coisa, é preciso entender que, quanto mais pesado o arquivo, mais tempo ele demora para aparecer na página de um site ou blog. Por isso, como ninguém quer sobrecarregar os servidores e nem ficar 10 minutos esperando uma imagem abrir, o ideal é diminuir os arquivos ao máximo, para facilitar a navegação.

Percebi que várias pessoas estão em dúvida quanto à qualidade das imagens, depois que se faz a compactação. Na internet, imagens pequenas são rápidas. E pequenas são aquelas que ocupam pouco espaço em disco, embora o tamanho físico também ajude a torná-las menores ou maiores, proporcionalmente. Uma imagem de 30KB do tamanho da sua tela vai levar menos tempo para fazer download do que um arquivo de 60KB com a metade do tamanho da tela. A explicação para isso está nas linhas e cabos telefônicos que a gente usa para obter os dados. Quanto maior o arquivo, maior o tráfego e maior o tempo. Mais ou menos como acontece nas estradas: dez caminhões ocupam muito mais espaço do que dez carros de passeio.

Por isso, a resolução não é o fator mais importante quando se está criando um banner para web. O que realmente importa são as medidas em pixels. Os navegadores (Firefox ou Internet Explorer, por exemplo) exibem um pixel de imagem para cada pixel de tela. Quando você salva seu arquivo em gif ou jpg, já está tornando as coisas mais fáceis. O gif suporta apenas 256 cores, o que o torna mais adequado para arte final e texto de alto contraste. Já o jpg usa compactação de perda, o que o torna adequado para fotograsfias e imagens. Também é possível salvar em png, uma versão em 24 bits do gif criado para pequenas imagens coloridas que não serão compactadas. Quando você salva suas imagens em gif ou jpg, elas ficam mais “leves” e permitem que a página na web onde serão exibidas carregue muito mais rápido.

O maior cuidado que você precisa ter é com as cores. Antes de salvar uma imagem em gif, é preciso reduzir o número de cores para 256 ou menos. Programas como o Photoshop usam indexação, atribuindo novamente as cores a partir de um índice pré-fixado. Isso permite que a aparência dos elementos gráficos fique melhor, apesar do número reduzido de cores. E também diminui o volume de dados, facilitando a vida de quem está lendo o site.

O Yahoo! disponibiliza a ferramenta Smush It, que facilita a otimização do tamanho de imagens sem afetar a qualidade visual. O Smush It promete reduzir o tamanho do arquivo ao efetuar um ajuste no número de cores, remoção de excesso de metadados e outros dados visuais. É uma boa opção para usuários de CorelDraw, já que este programa não lida muito bem com compactação de dados.

Eu fiz um teste no Smush it e achei muito fácil e prático. Depois de montar um banner – este que você vê ali em cima – de 323×120 pixels no CorelDraw, exportei para jpg, em RGB, sem compactação. Meu arquivo pesava 113KB. Entrei no site do Smush it, fui em Uploader, em Browse procurei o arquivo que eu havia salvo no meu computador e fiz o upload. O resultado foi um arquivo muito menor, pesando 27.14KB. Para usá-lo, cliquei em Download e salvei um arquivo zipado. Depois foi só ir neste arquivo e abri-lo no meu computador. Verifiquei como estavam as cores e já fiz o upload aqui no blog. Tudo isso em menos de 10 minutos e com uma qualidade incrível. As cores e o banner em si ficaram praticamente iguais ao arquivo que eu fiz no CorelDraw, só que pesando muito menos.

Para saber mais:
-Smush It!
-Como fazer um an̼ncio eficiente РParte I
-Como fazer um an̼ncio eficiente РParte II: Fotografia
-Como fazer um an̼ncio eficiente РParte III: Tratamento de imagens
-Como fazer um an̼ncio eficiente РParte IV: Escolhendo o programa certo
-Concurso “BananaCraft te dá uma força!”