FUNDAMENTOS SOBRE IMAGENS PARA A WEB

Bons web sites necessitam de uma correta integrao entre textos e imagens. Este artigo contm o mnimo que voc precisa saber sobre imagens para a web.

Introduo Formato: Salve imagens simples como GIFs e imagens fotogrficas como JPGs. Tamanho: Figuras devem ser salvas a uma resoluo de 72 dpi e no devem ter mais de 600 pxels de largura. Cor: Quanto mais bits voc usar por pxel, melhor ser o detalhe das cores e maior o tamanho da imagem. Jaggies: Conserte a aparncia recortada atravs do anti-aliasing para formas curvas e textos. Background: Pare o halo effect desenhando a imagem sobre a cor do seu fundo. Anos atrs, a Web no passava de texto na cor preta sobre um fundo cinza. As poucas imagens demoravam trs semanas para carregar, um po francs custava dois centavos e eu tinha que caminhar na lama quando chovia para ir escola. Os tempos mudaram, os pozinho custa 20 centavos e a Web tornou-se um lugar onde os visitantes esperam encontrar imagens profissionais.

Fundamentos Sobre Imagens Para Web

Mas se voc no souber como tomar vantagem o potencial da Web, a histria vai se repetir: Sua pgina levar trs semanas para carregar e voc vai receber um bilhete para ser entregue aos seus pais convidando-os a uma reunio de pais e mestres, para falar sobre o seu mau comportamento na sala de aula. O primeiro passo para voc entender como criar e gerenciar grficos para a Web compreender o que propriamente so as imagens. As imagens eletrnicas so feitas de milhares de pequenos pontinhos coloridos chamados de pxels.Os pxels so to pequenos que um deles sozinho no pode ser captado pelo olho humano, por isso eles do a iluso de uma imagem contnua. assim que todas as imagens que voc v em seu computador (e TY) funcionam. Claro, voc j olhou na tela da TV com uma lupa quando era criana. Se no, v e faa isso agora mesmo. Algumas telas tm pontos, outras tm linhas, mas o princpio o mesmo. Ento, continue lendo e eu vou ajudar a preparar voc para manejar seus pxels corretamente.

Formatos da Web
Os Navegadores da Web (browsers) podem exibir apenas imagens salvas em tipos especiais de arquivos. Os dois principais tipos usados so GIF e JPG. muito importante saber as diferenas e escolher o melhor formato para cada imagem, para que as figuras sejam o mais compactas possveis para que elas apaream na tela do seu visitante o mais rpido possvel. Quanto tempo? Para estimar quanto tempo vai demorar a algum ver uma imagem usando um modem de 28.8 (a velocidade mais comum), divida o tamanho da imagem por dois. Assim, um arquivo com 12K vai normalmente demorar 6 segundos para carregar e aparecer.

Fundamentos Sobre Imagens Para Web

GIF: Graphic Information Format.

(l-se guifi) ! Arquivos GIF so melhores para imagens com poucas camadas de cores. Use-a para imagens de apresentao: grficos, figuras ou imagens de texto. Quanto menos cores voc usar, mais eficiente ser o arquivo GIF. Um arquivo do tipo GIF pode conter no mximo 256 cores. ! Arquivos GIF podem ser entrelaados assim eles parecem fade in (vo aparecendo aos poucos), de uma menor para uma maior qualidade enquanto esto sendo carregados. Isto d a seus visitantes algo para ser visto enquanto eles esto esperando. ! Arquivos GIF podem ser transparentes. Isto significa que voc pode escolher uma ou mais cores para no serem mostradas permitindo que as cores do fundo da sua pgina apaream atravs delas. Isto evita que os grficos paream estar em caixas e visualmente causa a impresso de que eles esto mais integrados com a pgina. ! Os arquivos GIF so lossless, o que significa que a qualidade da imagem no degradada pelo processo de compresso. ! Os arquivos GIF podem ser animados. Como filmes, s que bem mais simples, as GIFs animadas simulam movimento usando uma srie de imagens individuais. ! Os arquivos GIF no so bons para fotografias - voc perde qualidade e os arquivos no sero compactos. Use arquivos JPG para fotos.

JPG: Joint Photographic Experts Group

JPEG, (l-se jota-pegue e muitas vezes como JPG). ! Arquivos JPG so melhores para imagens com muitas cores, como fotografias e arte digitalizada. O JPG admite 16 milhes de cores. ! A compresso do JPG varivel. Voc pode aplicar maior ou menor compresso a cada imagem individualmente. ! O sistema JPG do tipo lossey. Quanto maior a compresso que voc usar, menor ser a qualidade. O tamanho do arquivo pode diminuir bastante neste sistema,

Fundamentos Sobre Imagens Para Web

mas voc deve balancear o tamanho do arquivo com a qualidade da imagem. Os novos softwares grficos (Macromedia Fireworks 2 ou Adobe Photoshop 5) permitem a voc pr-visualizar suas imagens JPG, assim voc pode escolher o melhor balano entre tamanho e qualidade. ! As novas verses deste tipo de imagem introduzem a possibilidade de salvar seu JPG como um arquivo entrelaado, causando a impresso de que ele vai aparecendo de uma menor para uma maior qualidade, enquanto vai sendo carregado, mas browsers antigos no suportam este formato. ! Arquivos JPG no so bons para imagens com poucas cores. Se voc usar JPG para estas imagens, elas sero maiores que o necessrio e parecero embaadas.

PNG: Progressive Network Graphics

! PNG o mais novo formato de arquivo grfico para a Web, por isso, s suportado pelos browsers mais novos. Estes arquivos no aparecero em browsers antigos, por essa razo ao usar este formato voc pode fazer com que visitantes do seu site sejam incapazes de ver as suas imagens. ! Arquivos PNG so compactos e versteis e podem combinar as melhores caractersticas do GIF e JPG, como a capacidade de ter um fundo transparente ou conter imagens com milhes de cores. Mesmo assim, o formato PNG ainda no muito usado, principalmente porque ele no suportado por browsers antigos. ! Embora este formato seja til e eficiente, voc no deve us-lo por enquanto.

Fundamentos Sobre Imagens Para Web

Quando usar qual deles?

O erro mais comum que as pessoas cometem quanto s imagens para a Web usar o formato errado para estas imagens. Mas a escolha simples: ! ! Se a imagem tem poucas cores, escolha GIF. Se a imagem tem muitas cores (como uma foto), escolha JPG.

isso. Escolhendo o formato correto faz com que suas imagens tenham uma boa aparncia e carreguem rpido no computador de seu visitante. Escolhendo o formato errado as imagens tero uma pssima aparncia e levaro uma eternidade para carregar. Por isso, se voc no for capaz de lembrar dessas regras simples, faa uma tatuagem com elas em algum lugar do seu corpo que seja bem visvel. Para encerrar a discusso, vamos separar todas os tipos de imagem possveis nas categorias: fotografias e simples. Uma imagem simples geralmente composta por texto, grficos e diagramas, tudo com contornos definidos e grandes formas com cores contnuas. Uma imagem fotogrfica pode ser qualquer coisa desde uma fotografia de seu cachorro, Sigmund o Co Maravilhoso, a uma pintura, basicamente qualquer coisa com uma grande quantidade de cores. Como regra geral contedo simples deve ser salvo como GIF e fotogrfico como JPG. As imagens deste pargrafo mostram as diferenas entre tamanho do arquivo e qualidade da imagem que voc vai encontrar. A imagem da esquerda foi corretamente salva no formato GIF e a da direita incorretamente como um JPG. Eles tm o mesmo tamanho, mas fica fcil ver qual delas ganha em qualidade: GIF melhor para imagens no fotogrficas. Mas JPG virtualmente sempre mais eficiente (e tem uma melhor aparncia) para fotos, como voc v abaixo. Mas o tamanho do arquivo JPG e a qualidade da imagem podem variar, por isso voc precisa conhecer um pouco sobre a compresso JPG.

Fundamentos Sobre Imagens Para Web

JPG - Qualidade 80 Tamanho 10K

JPG - Qualidade 30 Tamanho 5K

JPG - Qualidade 10 Tamanho 3K

GIF Tamanho 12K

A compresso JPG e o tamanho do arquivo: Se no comprimida esta imagem teria cerca de 100K. Quando salvo como JPG com qualidade de 80, o arquivo reduzido para 10K. Aumentando a compresso para 30 (imagem do meio), voc consegue um arquivo de 5K, mas voc j consegue observar a perda da qualidade. A imagem da direita foi salva com a compresso ajustada para 10, a imagem tem 3K, mas h uma clara perca de qualidade. Neste caso, melhor usar a imagem com compresso igual a 30 no lugar da de 10, pois os 2K de diferena no tamanho correspondem a apenas 1 segundo no download da imagem. A imagem salva em GIF, no s maior do que precisava ser (12K), mas tambm tem uma pssima qualidade. Mesmo que voc consiga fotos com qualidade prxima a JPG/80 usando o formato GIF, o tamanho do arquivo seria de 29K, o que trs a seis vezes maior que o necessrio (isto significa trs a seis vezes mais tempo para carregar). Compresso e qualidade variam de imagem para imagem, por isso aconselhvel que voc use um software que permita a voc pr visualizar a imagem antes dela ser salva - isto permite que voc experimente vrios nveis de compresso a fim de escolher o melhor balano entre qualidade e tamanho de arquivo. Sobre os nmeros JPG: Diferentes programas usam diferentes nmeros para a compresso JPG, mas geralmente, quanto maior o nmero, maior a qualidade da imagem e seu tamanho. Voc deve procurar na documentao de seu software para saber como ele faz este tratamento. Formato Original: Embora voc deva usar GIF ou JPG como grficos para a web, voc deve salvar o seu arquivo original em um formato como TIF (Tagged Image File Format) ou o formato nativo de seu software grfico. Por que? Proque assim voc preserva a resoluo e qualidade da imagem original para us-la de novo na web ou no!

Fundamentos Sobre Imagens Para Web

Resoluo
Se decidir entre os tipos de arquivos para salvar suas imagens no o conceito mais complicado em Web design, resoluo . O nmero de pxels que podem ser mostrados em uma tela refere-se resoluo desta tela. Quanto maior a resoluo, mais pxels podem ser mostrados, o que permite que mais coisas apaream na tela ao mesmo tempo. Mas existem alguns problemas relacionados a isso quando se trabalha com design online, os pxels so menores a altas resolues e detalhes podem ser difceis de serem formados em telas menores. Como regra, os grficos para a Web no devem ser maiores que 600 pxels de largura aproximadamente. J que a maioria das pessoas v a Web a uma resoluo de tela de 640x480. Imagens mais largas que 640 no so mostradas completamente na mesma tela. Com essa resoluo voc garante que todas os seus visitantes tero uma melhor visualizao de seu site, mas hoje em dia voc j pode aumentar um pouco mais que isso, j que o padro est em 800x600, para a resoluo de tela. Quando voc estiver criando para a Web, uma resoluo maior que 72 dpi (pontos por polegada) um desperdcio. No h benefcio com resolues maiores j que os monitores no so capazes de exibi-las de uma melhor forma.Os arquivos sero maiores, mas a qualidade com que elas so mostradas na tela ser a mesma. Realmente, pode ser bastante confuso pensar em resolues como um todo por isso melhor pensar sobre o tamanho de suas imagens em termos de pxels. Quando voc cria uma imagem, seu software deve ser capaz de lhe dizer o quanto essa imagem tem de altura e largura isto o que realmente importa.

Cor em profundidade
Cada pxel da sua imagem mostrado pelo monitor usando uma combinao de trs sinais de cores: vermelho, verde e azul. A intensidade de cada uma desses sinais determina a sua aparncia. Em um monitor de TV preto e branco, os pxels tm apenas duas cores possveis: preto ou brao. O que chamado de 1-bit porque ou o pxel est ligado ou est desligado. Em monitores coloridos, isto um pouco mais complicado. Cada pxel pode exibir um certo nmero de cores, que vo de 16 (4-bit) a 16 milhes. A maioria dos computadores hoje em dia pode exibir 65.000(16 bits) cores. Novos computadores exibem de 65.000

Fundamentos Sobre Imagens Para Web

(16-bit) a 16 milhes de cores. Como grande parte dos sistemas dos visitantes de seu Web site podem exibir apenas 256 cores, voc deve criar para este nmero. O que no se aplica a fotos, que sempre devem ser salvas como arquivos JPG de 24-bits. Se voc quiser saber mais sobre cores veja o artigo: WebColor.

Anti-aliasing
Como as imagens so criadas usando pxels, quadrados quadriculados, figuras que no sejam quadradas podem parecer recortadas. A diviso visvel entre pxels chama-se alias, por isso muitos programas grficos utilizam um mtodo chamado anti-aliasing para criar a iluso de suavidade. Formas curvas e texto devem sempre usar esta tcnica para manterem a clareza e apresentao. Este efeito de suavizao do contorno requer uma maior quantidade de cores, aumentando o total de cores na imagem final. Na imagem abaixo, voc pode ver a diferena entre o texto sem suavizao (aliased) e com suavizao (anti-aliased).

O efeito aorola (halo effect)

A transparncia pode substituir apenas uma cor de sombra. Se sua GIF tem um fundo muito diferente daquele no qual ela vai ser colocada na pgina, tornando o background transparente deixar o que conhecido como halo effect ao redor do objeto aps a suavizao (anti-aliasing):

Fundamentos Sobre Imagens Para Web

Para concertar este problema, crie sua figura sobre um fundo de cor semelhante ao do fundo de sua pgina Web, exporte uma verso suavizada, e ento defina a cor de fundo como transparente.

Conhecendo suas limitaes

Boas imagens para a Web so sempre aquelas que tm uma boa aparncia e so carregadas rapidamente no browser de seu visitante. Tenha isso em mente e voc ter boas imagens em seu Site.

Design - Copyright 1999 RIES OnLine