Posts Tagged 'digital'

7 questões simples, antes de criar um site

1. Uma página na internet é um quadro na sala?

Se você tem uma página na internet feita com construtores de páginas, gratuita, com aparência ruim e poucos visitantes, uma página mais bonita é o primeiro degrau para atrair clientes, mas não é o suficiente. Se você não tem uma página, a mesma coisa.
A página é como um cartão de visitas, mas não caia na armadilha de achar que é um quadro bonito, que você pendura na sala da internet.

Continue lendo ‘7 questões simples, antes de criar um site’

Anúncios

Formatos de imagem para Internet: um comparativo

As imagens digitais se dividem em dois grupos: as vetoriais e mapas de bits ou bitmaps.

Imagens vetoriais são pontos unidos por linhas; cada ponto está definido numa escala cartesiana, em vetores (no caso de imagem 2D ou bidimensionais, em eixos X e Y). Na internet o formato de imagem vetorial mais conhecido é o Flash, de propriedade da Adobe Systems mas também existe o SVG, de código livre.

Mapas de bits ou Bitmaps são imagens formadas por pontos, ou pixels. Esses pontos são valores expressos em valores de Bits, que se distribuem numa área chamada Mapa, daí o nome Mapa de Bits ou Bitmap, em inglês. Qualquer fotografia digital ou imagem escaneada é um mapa de bits. Na internet os formatos mais conhecidos são GIF, JPG e PNG.

A qualidade de uma imagem mapa de bits é um conjunto de resolução (número de pontos que formam a imagem, cuja unidade de medida é DPI), número de cores e compactação, que pode ser com ou sem perda de qualidade.
A relação abaixo descreve as características e utilizações mais comuns das imagens em mapas de bits, para a internet (modelo de cor RGB[1]):

Formato: GIF
Características  
Cores: 256 cores
Ideal para: Botões e figuras simples
Compactado: Sim
Qualidade Com perda
Transparência: Sim
Animação: Sim
Formato: JPEG
Características  
Cores: 16 milhões de cores
Ideal para: Fotos e imagens com gradientes complexos
Compactado: Sim
Qualidade Com perda
Transparência: Não
Animação: Não
Formato: PNG “padrão”
Características  
Cores: 256 ou 16 milhões de cores
Ideal para: Botões e figuras simples (256 cores) ou fotos e imagens com gradientes complexos (16 milhões de cores)
Compactado: Sim
Qualidade Sem perda
Transparência: Sim
Animação: Não
Formato: PNG do Fireworks
Características  
Cores: 256 ou 16 milhões de cores
Ideal para: Botões ou figuras simples (256 cores) ou fotos e imagens com gradientes complexos (16 milhões de cores)
Compactado: Sim
Qualidade Sem perda
Transparência: Não
Animação: Incorporado ao arquivo; só visível no Fireworks ou exportando para outros formatos (GIF, p.ex.)

Agora vamos ver algumas diferenças entre esses formatos ponto de vista do formato, tamanho em Kb e o número de cores (mantendo o mesmo tamanho – 100 x 100 pixels – e resolução de 72 dpi) a partir de uma imagem de exemplo:

vamos tomar como base de referência para comparação esta imagem “bruta”, sem compactação, em formato BMP.

Imagem sem compactação:

Formato de imagem No. de cores Tamanho
BMP (mapa de bits do Windows) 8 bits de cor (256 cores) 10,8 kb
BMP (mapa de bits do Windows) 24 bits de cor (16 milhões de cores) 29,3 kb

Vamos comparar esse formato com formatos de imagem para internet:

Imagem com compactação e perda de qualidade:

Formato de imagem No. de cores Tamanho
GIF [3] 8 bits (256 cores) 7,4 kb
JPG [4] 24 bits (16 milhões de cores) 4,15 kb

Imagem com compactação e sem perda de qualidade:

Formato de imagem No. de cores Tamanho
PNG do Fireworks [5]  8 bits (256 cores) 99,1 kb
PNG “padrão” 24 bits (16 milhões de cores) 19,9 kb
PNG “padrão” 32 bits (4 bilhões de cores)  22,6 kb

Uma observação geral mostra que:

Formato de imagem Compressão perda de qualidade
GIF e JPG   excelente (em JPEG pode chegar a 16:1) sim
PNG “padrão” compressão mediana não
BMP e PNG Fireworks
gera arquivos muito
grandes para
transmissão via internet,
em conexões banda
estreita
nenhuma ou baixa não


Notas:
[1] RGB significa Red, Green e Blue – Vermelho, Verde e Azul escuro, padrão de cores baseado em luz (do sol, monitores, lâmpadas)
[2] imagem em 8 bits, 256 cores; em 16 bits, 65.536 cores; em 24 bits,  16.777.216 cores; em 32 bits,  4.294.967.296 cores.
[3] com 256 cores. Toda imagem com até esse número de cores é chamada de cor indexada, pois as cores não estão em cada pixel/ponto da imagem, e sim reduzidas a uma tabela de cores pré-definida.
Fontes:
http://en.wikipedia.org/wiki/Indexed_color
http://esagapib12ano.blogspot.com/2010/02/indexacao-de-cor.html
[4] compactação entre 75 e 86, numa escala até 100
[5] apenas imagem