Se você criar imagens em editores de imagens, tais como o Photoshop ou Corel Draw, esses editores empregam duas técnicas:
a) Gráficos vetoriais:
Uma imagem gerada a partir de descrições matemáticas que determinam a posição, o compirmeito e a direção em que as linhas são desenhadas. Os gráficos vetorieais são criados como conjuntos de linhas e não como padrão de pontos ou pixels individuais.
Você pode mover, escalonar, e mudar a cor de um gráfico vetorial sem que ocorra perda na qualidade a aparência desse gráfico.
b) Gráficos bitmaps:
Gráficos de bitmap são descritos por imagens usando pontos coloridos, que são chamados de pixels. Essa imagem de pixels pode ser comparada ao desenho de um mosaico. Em uma imagem de bitmap, cada ponto ou pixel da imagem possui uma forma bem detalhada.
Para editar um bitmap você precisa modificar seus pixels em vez de linhas e curvas. Quando os modifica, pode ocorrer perda de qualidade na imagem.
Ao contrário de um gráfico vetorial, que quando ampliado não apresenta perda de resolução, já um bitmap, quando ampliado, provavelmente terá sua aparência diferente da imagem original.
Gráfico Vetorial X Gráfico Bitmap
Na imagem acima, a primeira estrela representa uma imagem vetorial, onde os pontos (pequenos círculos verde claro) são ligados por linhas que definem o objeto. Seu preenchimento é um amarelo alaranjado e a borda é vermelho escuro. A segunda estrela representa um zoom na imagem bitmap, por isso nota-se o quadriculado (um problema que não existe nas imagens vetoriais). Note que o conjunto de quadros, cada um com sua cor, juntos conseguem representar a mesma estrela da primeira imagem, o grande problema é a definição.
Outro exemplo:
| Vetorial | Bitmap |
 |
 |
Os navegadores podem exibir apenas imagens salvas em tipos especiais de arquivos. Os dois formatos principais são GIF e JPG.
É muito importante conhecer as diferenças e escolher o melhor formato para cada imagem, a fim de que as figuras sejam compactas e se apresentem na tela do internauta o mais rápido possível.
Para se ter uma idéia do tempo que leva para uma imagem carregar na máquina do usiário tome por base os modems de 56 KB (a velocidade mais comum entre usuários domésticos) e divida o tamanho da imagem por dois. Sendo assim uma imagem de 24 KB demora seis sebundos para carregar e aparecer na tela do usuário.
Saiba mais sobre os diferentes formatos disponíveis: GIF: Graphic Information Format
JPG: Joint Photographic Experts Group
PNG: Progressive Network Graphics
|
Tome cuidado com o formato .bmp
As imagens em formato .bmp demoram mais para carregar e, por isso, devem ser evitadas. Para melhorar a qualidade de imagens .bmp e alterar o formato, utilize softwares de edição de imagens, como o Photoshop.
Ninguém tem paciência para esperar dois minutos para ver uma imagem que nunca termina de carregar. Caso sejam necessárias muitas imagens para transmitir sua mensagem, a palavra de que você não pode se esquecer é compressão. Embora as imagens sejam uma das partes mais importantes do site, elas podem deixá-lo muito "pesado". Para evitar, ou, ao menos, minimizar este problema, use compressores de imagens. Existem diversos disponíveis, inclusive alguns gratuitos.
Thumbnails são versões reduzidas de imagens, usadas para tornar mais fácil o processo de as procurar e reconhecer. Os motores de busca de imagem e programas de organização destas usam-nos muitas vezes, tal como alguns sistemas operativos e ambientes de trabalho modernos.
Nota que como os thumbnails automáticos reduzem imagens grandes para um tamanho menor, o resultado pode não ter uma elevada qualidade, o que resulta de um redimensionamento da imagem.
Alguns web designers inexperientes produzem thumbnails simplesmente através da redução das dimensões de uma imagem maior usando códigos HTML em vez de usarem uma cópia mais pequena da imagem. Na prática, o tamanho visível de uma imagem em pixels deve corresponder sempre ao seu tamanho actual, uma vez que o objectivo de se englobarem thumbnails numa página web é o de diminuir o tempo de download da página, o que não se consegue apenas alterando as propriedades da imagem.
Reduzir uma parte significativa da imagem em vez de toda pode permitir o uso de um thumbnail menor, sendo na mesma possível o reconhecimento da imagem no seu todo através dele. Por exemplo, quando se faz quando se está a redimensionar um retrato de corpo inteiro de uma pessoa, é melhor mostrar apenas a cara da pessoa do que uma figura irreconhecível. No entanto, isto tem a desvantagem de poder enganar os observadores acerca do conteúdo da imagem, o que a torna menos útil para alguém que está a fazer pesquisas ou a catalogar imagens para apresentações artísticas.
Em 2002, o tribunal do caso amerciano "Kelly v. Arriba Soft Corporation", determinou que era de uso justo para os motores de busca da Internet o uso deste tipo de imagens para ajudar os utilizadores a encontrar aquilo que procuram.
Um thumbnail tem, normalmente, um comprimento entre 80 e 200 pixels, tal como a unha de um polegar (like a thumb's nail).
Imagem normal |
Thumbnail |
 |
 |
As cores em uma imagem são formadas por composição, geradas a partir de 3 ou 4 cores básica. O tipo de composição é chamado de Modo de Cor.
RGB |
CMYK |
 |
 |
| Exemplo: Monitor.
|
Exemplo:
|
| No modo de cor RGB as cores são formadas a partir de três cores básicas: azul, vermelho e verde. Com a combinação, em vários níveis, dessas três cores podemos formar qualquer outra. O RGB é um formato próprio das telas de monitores, onde cada pixel tem uma dessas três cores. | No modo de cor CMYK as cores são formadas a partir da combinação de 4 cores básicas: ciano, magenta, amarelo e preto. Esse modo é apropriado para materiais imprssos, seja em gráficas ou em imprssoras. |
Tons de Cinza |
||
 |
||
Exemplo:
|
||
O modo Tons de Cinza utiliza tons diferentes de cinza na imagem. Pode haver até 256 tons de cinza nas imagens de 8 bits. Cada pixel de uma imagem em tons de cinza possui um valor de brilho que varia de 0 (preto) a 255 (branco). Em imagens de 16 bits e 32 bits, o número de tons em uma imagem é muito maior do que em imagens de 8 bits. |
Resolução de imagem descreve o nível de detalhe que uma imagem comporta. O termo se aplica igualmente a imagens digitais, imagens em filme e outros tipos de imagem. Resoluções mais altas significam maiores detalhes na imagem.
Em inglês dots per inch (dpi), é uma medida de densidade relacionada à composição de imagens, que expressa o número de pontos individuais que existem em uma polegada linear na superfície onde a imagem é apresentada. Também é comum encontrar referências a essa densidade pelo termo "resolução de imagem" ou simplesmente "resolução". A resolução é indicada pela composição da densidade horizontal e vertical, que podem ser iguais ou diferentes. De maneira geral, quanto maior o número de pontos por polegada, mais detalhada e bem definida é a imagem.
Interpretações rigorosas fazem distinção entre diferentes densidades de imagem, da seguinte maneira:
Uma impressora jato de tinta necessita um número bem maior de pontos por polegada para imprimir com qualidade semelhante uma imagem mostrada no monitor de vídeo, com determinado número de pixels por polegada.
A resolução do monitor é de 72 ppi (pixels por polegada), bom para imagens da web e;
A resolução da impressora é de 300 ppi (pixels por polegada), bom para panfletos.
Pense direito antes de editar uma imagem.
Antes de saber como construir um Gif Animado é preciso saber o que é. Um Gif Animado não passa de várias imagens no formato .gif postas em sequência. A linguagem HTML não é capaz de produzir tal efeito de animação, para isso é necessário um programa específico.
Para entender melhor como funciona um "Gif Animado" veja a seguinte sequência de imagens:
Essas 4 imagens são colocadas em sequência (1, 2, 3, 4, 3, 2, loop), criando assim o efeito de animação...
Antes de inundar suas páginas de animações, lembre-se de que, ao usar a rede, a velocidade de transmissão das imagens é muito pequena. Por tanto uma imagem pode levar vários minutos para ser exibida, frustando o internauta.
