Web Design: Reduzir o tamanho da imagem, limitando Cores
Embora o sistema RGB de um computador é capaz de misturar mais de 16 milhões de cores diferentes, o monitor não é sempre capaz de exibindo todas estas cores. Além disso, uma imagem que contém todas essas cores podem acabar sendo um tamanho de arquivo maior do que é prático para web. Isso nos leva à discussão de profundidade de cor de imagem de bits, paletas de cores, e monitor exibe, todos os quais são importantes para a arte de projetar websites.
UMA pouco é um pequeno segmento de informação do computador. Sem ficar muito técnico, um monte de bits são necessários para tornar as cores aparecem em uma imagem. Quanto mais cores que uma imagem contém, os mais bits de dados que tem -, assim, maior é o seu profundidade de bits.
As imagens da web que você produz acabará por ter uma profundidade de bits associados com eles, e formatos de arquivo de web diferentes exigem diferentes usos da profundidade de bits. Um computador utiliza 8 bits de dados para mostrar 256 cores. Cada uma das cores primárias vermelho, verde e azul tem 256 níveis. Então, isso significa que uma imagem de 8 bits é monótona, mostrando todos os 256 possíveis níveis de vermelho? A resposta é não - uma imagem de 8-bit simplesmente usa uma paleta limitada de até 256 cores. Estas cores são um subconjunto de todas as cores possíveis 16,777,216. A tabela mostra a profundidade de bits de cor e o número máximo de cores que cada um pode ter em sua paleta.
| Profundidade bit | A matemática | Número de cores na paleta |
|---|---|---|
| um pouco | 21 | 2 |
| 2 bit | 22 | 4 |
| 3 bit | 23 | 8 |
| 4 bits | 24 | 16 |
| 5 bits | 25 | 32 |
| 6 bits | 26 | 64 |
| 7 bit | 27 | 128 |
| 8 bit | 28 | 256 |
Quando você reduz o número de cores na imagem para manter o tamanho do arquivo pequeno, você pode escolher qualquer número de cores até o máximo para a profundidade de bits de dados. Normalmente, você vai escolher um conjunto de cores que são melhor adaptados para processar a imagem. Por exemplo, você pode escolher uma paleta personalizada de apenas 200 cores. A imagem ainda é de 8 bits, mas porque ele usa apenas 200 cores em sua paleta, o arquivo é menor do que seria se você usou o número máximo de cores (256) permitidos para uma imagem de 8-bit.
Veja como usar um editor gráfico, como o Adobe Fireworks a experimentar com a redução paleta de cores de uma imagem e comparar as diferenças de qualidade, tamanho do arquivo e o tempo de download:
Lançar fogos de artifício.
Escolha Arquivo-Open na barra de menus.
Navegue para qualquer imagem foto que você tem no seu computador e abra o arquivo.
Na parte superior da janela do documento, existem vários ícones. Clique no ícone 4-Up para dividir vista da imagem em quatro painéis.
Fogos de artifício permite comparar lado diferente configurações da paleta e formato de arquivo a lado para que você possa comparar as velocidades de qualidade e download.
Clique no quadrante superior direito para selecioná-lo. Abra o painel Optimize localizado no menu Janela.
É já pode ser aberto como um conjunto de painéis à direita da tela.
No painel Otimizar, selecione o formato GIF, paleta Adaptive, ea opção de 256 cores (que é uma paleta de cores de 8 bits).
Clique no quadrante inferior esquerdo e, no painel Otimizar, selecione o formato GIF, bem como a paleta Adaptive, mas desta vez selecionar apenas 64 cores.
Observe o declínio na qualidade da imagem.
Clique no quadrante inferior direito e, no painel Otimizar, selecione o formato JPEG e definir a qualidade para 60%.
Neste exercício, a diferença perceptível na qualidade da imagem original (quadrante superior esquerdo) para os dois quadrantes formato GIF mostra o que um número limitado de cores pode alcançar. O aspecto granulado é chamada # 147-pontilhado. # 148- Como com pontilhismo, diferentes cores de sua paleta de cores limitada são colocados próximos uns dos outros para simular o efeito da cor em falta (é como misturar visualmente laranja, colocando pontos amarelos e vermelhos ao lado do outro).
Observe que o formato JPEG não usa uma paleta de cores reduzida. Ele simplesmente impõe um esquema de compressão de imagem de 24 bits. Dependendo da imagem, por vezes, o formato JPEG produz a melhor qualidade e os melhores tempos de download, e às vezes o formato GIF é o melhor. Este teste no Fireworks é uma boa maneira de comparar rapidamente as configurações diferentes.