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 nem sempre é capaz de exibindo
Conteúdo
Video: Como reduzir o tamanho dos documentos que contêm imagens no Word
UMA pouco é um pequeno segmento de informações do computador. Sem ficar muito técnico, um monte de bits são necessários para tornar as cores aparecem em uma imagem. As cores mais que uma imagem contém, os mais bits de dados que tem -, assim, maior será a sua 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-bit é 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 |
|---|---|---|
| 1 bit | 21 | 2 |
| 2 bit | 22 | 4 |
| 3 bit | 23 | 8 |
| 4 bits | 24 | 16 |
| 5 bit | 25 | 32 |
| 6 bits | 26 | 64 |
| 7 bit | 27 | 128 |
| 8 bit | 28 | 256 |
Quando você reduz o número de cores em sua 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 dada. 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 e tempo de download:
Lançar fogos de artifício.
Escolha Arquivo → Abrir na barra de menu.
Navegue até qualquer imagem foto que você tem no seu computador e abra o arquivo.
No topo 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 que você compare lado diferente configurações de 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.
Ele já pode ser aberto como uma coleção 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 selecione 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%.
Video: Diminuindo a Resolução de Uma Imagem Para Usar Na Web
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 é chamado de “composição de cores.” Tal como acontece 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) .
Note-se que o formato JPEG não usa uma paleta de cores reduzida. Ele simplesmente impõe um esquema de compressão em uma 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 é melhor. Este teste no Fireworks é uma boa maneira de comparar rapidamente as configurações diferentes.