Home
Tutoriais - Áudio
WINZIP (dicas)
Imagens Para Internet
Páginas Pessoais

Imagens Para a Internet - Regras

Imagens para a Web (algumas regras)

Ao pretendermos inserir algumas imagens na nossa página Web, facilmente corremos alguns riscos. Estes riscos têm a ver sobretudo com o tamanho (em Kbytes) dessas mesmas imagens.

Daí não adviria mal ao mundo se esse tamanho não fosse proporcional ao tempo de carregamento no browser (Internet Explorer, ou outro) de quem está a tentar consultar o nosso site. E como a  maioria das pessoas não tem paciência para esperar muito mais que alguns segundos para visualizar o conteúdo da página que quer consultar (bom... a menos que steja mesmo interessado no tema/conteúdo), uma página muito pesada (com muitas e grandes - em Kbytes-) perderá muitos dos seus potenciais vistantes.

Para obviar este problema convém então seguir algumas regras na inserção de imagens na nossa página. Aqui vão umas quantas:

TRATAMENTO DE IMAGENS PARA APLICAÇÃO EM WEB-SITES

 

1.    Tempo de carregamento de uma imagem quando se navega (regra prática):

Ligação com modem a 28,8 Kbps -> dividir o tamanho da imagem (em Kbytes) por 2.

ex: ficheiro com 50 KBytes levará a carregar, pelo browser, cerca de 25 segundos.

Não se esqueça que muitas pessoas ainda utilizam modems de 28,8 Kbps, pelo que esta regra é perfeitamente razoável.

 

2.    Formatos a utilizar

Ø        GIF (máximo de 256 cores) --> Indicado para imagens com poucas cores (gráficos, desenhos, animações, etc.).

q         Convém, na altura da gravação do ficheiro, usar a opção “entrelaçado”, para o visitante ter algo para ver enquanto espera pela imagem na sua forma final. Neste formato, a imagem aparece quase de imediato com uma forma “tosca” e vai evoluindo para a sua forma final.

q         Podem ser “transparentes”,  isto é, podemos eliminar algumas cores (preferencialmente as do fundo da página) de modo a que eles se integrem melhor na página, e não pareçam estar em caixas (as cores do fundo aparecerão através do GIF.

 

Ø        JPG –-> Indicado para os casos de imagens com muitas cores, como por exemplo fotografias (máximo de 16 milhões de cores).

q         Pode-se aplicar mais ou menos compressão, num jogo de equilíbrio entre qualidade e tamanho (quanto maior for a taxa de compressão, menor é a qualidade mas menor é o tamanho da imagem e, consequentemente, o tempo de carregamento pelo browser de navegação).

q         Os programas de tratamento de imagem permitem escolher, na altura de gravação do ficheiro, a taxa de compressão e a respectiva pré-visualização, de modo a poder escolher o que mais se adequa aos seus intentos.

q         Permitem ainda gravação “progressiva” de modo a que o visitante possa ver qualquer coisa (e a não  abandonar o site devido ao tempo de espera excessivo sem nada para visualizar). A imagem vai aparecendo aos poucos no ecrã, geralmente de cima para baixo.

q         Abaixo (Fig. 1) pode ver-se um exemplo de uma imagem a ser gravada, no Paint Shop Pro, com um factor de compressão igual a 15 (que é um valor razoável para imagens a publicar na net). A escolha deste valor é permitida por quase todos, ou todos, os programas que tratam e/ou editam imagens. O que se tem de fazer é: File > Save As > Escolher o formato JPG > clicar em Options > Escolher o factor de compressão.

q         Para ajustar o tamanho da imagem (em cm, polegadas ou pixels), fazer, em qualquer programa, uma coisa do tipo: Imagem > Redimensionar > Escolher o tamanho exacto da imagem, ou optar por redimensionar a imagem numa percentagem do seu tamanho actual, sem alterar as proporções.

q         O Paint Shop Pro (e outros programas) permitem ainda optimizar a imagem em termos do equlíbrio Tamanho (em KBytes) / Qualidade. Para isso, por exemplo no Paint Shop Pro (ver imagem – Fig. 2 - abaixo), basta correr a opção Run Optimizer... e depois experimentar os vários factores de compressão. Para cada valor, o Paint Shop Pro mostra (em pré-visualização, antes de gravar, portanto) a imagem original e a final, e os respectivos tamanhos (em Kbytes) de modo a escolhermos o que mais se adequa, em termos do tal jogo Tamanho/Qualidade. Quando o resultado nos agradar, é só gravar a versão final da imagem. Neste optimizador podemos ainda pré-visualizar o tempo de carregamento da imagem pelo browser do visitante da página onde se encontra a fotografia, para vários tipos de modem usados.

 

 

 

Fig.1 – Gravação de uma imagem, no Paint Shop Pro, no formato JPG, com factor de compressão igual a 15 (valor razoável para inserção na net, em termos do equilíbrio pretendido entre tamanho e qualidade).

 

Fig. 2 – Optimizador de Imagens do Paint Shop Pro.

3.    Resolução de imagem a adoptar nos ficheiros gráficos: 72 dpi

A resolução é o número de pixels (picture elements / pontos de imagem) que podem ser mostrados por um  monitor em cada polegada.

Num monitor típico de computador a resolução máxima é de 72 pixels por polegada, logo as imagens não necessitam de ter mais do que esta resolução, quando são para publicação na Internet. Maior resolução só aumenta o “peso” da imagem sem qualquer contrapartida a nível de qualidade. Se as imagens forem para impressão, a história já é diferente, mas não é disso que estamos a falar agora.

Assim, quando digitalizar uma imagem, através do seu scanner, para publicação na Web, use uma resolução próxima dos 72dpi.

 

4.    Largura da imagem: máximo de 600 pixels

Por outro lado, as imagens não devem exceder os cerca de 600 pixels de largura por 450 de altura. Mais do que isso a imagem fica muito grande no ecrã. Isto porque a maioria das pessoa s utilizam ecrãs com resolução 800x600 (800 pixels em largura e 600 em altura), o que dá os tais 72dpi (ver contas abaixo); e de 15 polegadas, o que dá cerca de 28 cm de largura por 21 de altura.

Contas: 72 dpi quer dizer 72 dots per inch (pontos/pixels por polegada). Sabendo-se que cada polegada são cerca de 2,54 cm, obtemos cerca de 28,35 pixels por centímetro. Logo, nos 28 cm do ecrã teremos 28,35 x 38 = a aproximadamente os tais 800 pixels.

 

Regra para converter tamanho em pixels para centímetros:

( Nº de Pixels / Resolução do monitor ) x 2,54

Exemplo: Uma imagem com 600 pixels de largura terá cerca de 20 cm, num monitor com resolução de 72 dpi. Sabendo-se que os monitores de 15 polegadas têm cerca de 28 cm de largura, 20 cm para a largura máxima de uma imagem parece-nos razoável.

 

5.    Programas de edição e/ou tratamento de imagem mais utilizados:

Paint Shop Pro

Adobe Photoshop

ACDSee

 

6.    Códigos das cores mais utilizadas

Em breve.