Cinco elementos de processamento de imagem perfeito em web design
Autor:Eve Cole
Data da Última Atualização:2009-06-20 16:51:39
1. Formato: O formato PNG é preferido para imagens com formas simples geradas por computadores (como logotipos e ícones), enquanto fotos com cores ricas devem ser JPEG. Se houver poucas cores e nenhum gradiente, deve-se usar o formato GIF.
GIF é o formato de imagem da web mais comumente usado. GIF suporta até 256 cores e funciona com quase todas as imagens, exceto fotos. Também tem a capacidade de gerar animações simples e imagens transparentes.
O formato PNG é relativamente novo e também é um formato recomendado pelo W3C. PNG-8 pode conter até 256 cores, comparável ao GIF-24 suporta o modo RGB, que pode expressar qualquer cor com qualidade superior; PNG-32 adiciona um canal alfa baseado em PNG-24, que pode ser definido como transparente;
JPEG pode salvar cerca de 16,7 milhões de cores e é frequentemente usado para salvar fotos. Mas fora isso, o JPEG quase nunca é usado. Se a imagem tiver menos de 256 cores ou contiver grandes áreas de cores sólidas, o JPEG não terá um bom desempenho - o tamanho do arquivo poderá ser duplicado para obter uma imagem de alta qualidade.
Ao escolher um formato de imagem, você deve considerar de forma abrangente seu escopo de uso, como cor, transparência, animação, etc., conforme detalhado a seguir. Vários parâmetros podem ser comparados através do assistente de exportação do Photoshop ou Fireworks. O critério de seleção é que o tamanho do arquivo seja o menor possível, mantendo uma qualidade de imagem aceitável.
2. As imagens de criação de cores devem usar o modo RGB, não o modo CMYK para impressão. Não se preocupe com as cores seguras do navegador, já que quase ninguém usa mais monitores de 8 bits. A seleção de cores deve referir-se a padrões unificados, como sistemas de identidade visual (VI). O número e o efeito das cores são fatores importantes na determinação do formato da imagem. Por exemplo, os gradientes de cores geralmente produzem um grande número de cores. Se forem salvos como GIF, ocorrerá distorção e o tamanho do arquivo também aumentará significativamente. deve considerar o uso do formato PNG-24, PNG-32 ou JPEG.
3. Tamanho As imagens produzidas usando ferramentas de criação de vetores geralmente são adequadas para serem salvas no formato PNG e seu tamanho deve ser determinado na ferramenta de desenho vetorial. Depois de convertidas em bitmap, elas não podem ser facilmente dimensionadas (especialmente, não devem ser ampliadas). ). É importante notar que os arquivos PNG criados no Fireworks contêm informações editáveis, como camadas, e as linhas, formas e texto neles são todos gráficos vetoriais. A aplicação de tal imagem a uma página da web deve primeiro realizar uma operação de saída para compactar o tamanho do arquivo, e a imagem PNG de saída também será convertida em um bitmap porque as informações editáveis serão perdidas. Portanto, o ajuste do tamanho da imagem deve ser concluído antes da operação de saída. O bitmap não é dimensionado para garantir que os contornos e gradientes da imagem sejam suficientemente claros.
Para bitmaps e fotos existentes, você deve usar o Photoshop e outros softwares para ajustar o tamanho antes de inseri-los na página da web, em vez de usar os atributos de largura e altura na linguagem HTML para alterar o tamanho da imagem. O uso direto da linguagem HTML para controlar o tamanho da imagem pode causar sérias distorções na imagem.
Geralmente, as imagens colocadas em páginas da web devem ser controladas em um tamanho relativamente pequeno. Se misturado com texto, a largura deve ficar em torno de 300 px. Mesmo que apareça sozinho, a largura deve ser inferior a 600 px. Quanto à altura, é adequado não ultrapassar uma tela.
4. GIF e PNG transparentes suportam transparência, mas de maneiras diferentes. O GIF simplesmente define uma ou mais cores como completamente transparentes, sem considerar a transparência das cores gradientes adjacentes. Isto significa que se a cor de fundo mudar significativamente (ou contiver várias cores contrastantes), a transição para a parte transparente não será suave e haverá uma linha divisória óbvia. Se você deseja criar um GIF transparente, é necessário definir a cor de fundo da tela para ser igual (ou próxima) à cor de fundo do efeito alvo. PNG não tem esse problema e também pode ser configurado para ser translúcido.
No entanto, o IE6 não pode exibir PNGs transparentes corretamente por padrão e medidas apropriadas precisam ser tomadas.
5. As animações em páginas da web animadas geralmente incluem Flash e GIF animado. O Flash possui funções poderosas, efeitos ricos, alta qualidade de imagem e software de criação poderoso. É a forma preferida de animação na web na maioria dos casos. A desvantagem do GIF animado é que ele não pode usar mais de 256 cores e é difícil criar animações com efeitos complexos. Porém, sua vantagem é que o arquivo é pequeno e pode ser reproduzido em qualquer navegador antigo ou moderno sem plug-in. -em suporte.