Web Design: bitmaps Entendendo e gráficos vetoriais

Todos os gráficos que você encontrar na web são ou bitmap ou gráficos vetoriais. A diferença básica entre os dois é como eles são desenhados na tela. Esse simples detalhe afeta tudo, desde a resolução da imagem ao tamanho e formato de arquivo.

Bitmaps: um tecido de pixels

Ao explicar as imagens bitmap, pense no Lite Brite. Aqueles de vocês que foram mimados o suficiente como as crianças brinquem com este brinquedo lembre-se que você conectou pequenos pinos coloridos em uma grade e, em seguida, ligou o interruptor para iluminar-los.

Bitmaps funciona praticamente da mesma maneira. Em termos simplistas, um bitmap gráfico é uma grade cheia com pequenas pixels coloridos. Para desenhar uma tela gráfico de bitmap, o computador estabelece uma grade, dizer 100 por 100 pixels, e em seguida mapas uma cor de cada pixel individual. Isso é 10.000 pixels de desenhar! Lembre-se, um pixel é 1/72 de polegada de diâmetro. Portanto, se uma imagem tem uma resolução de 72 dpi e é de 100 pixels de largura, parece pouco mais de uma polegada de largura na tela do computador. A figura seguinte é típica de um mapa de bits.

as imagens vetoriais na Internet

Se você não se lembra do Lite Brite, então certamente você se lembra # 147 Ligue os pontos. # 148- Os gráficos vetoriais empregar uma estratégia semelhante. A matemáticos lugares fórmula pontos na tela e, em seguida, conecta-los com caminhos. Por exemplo, para desenhar um vetor na tela gráfica em forma de triângulo, o computador simplesmente estabelece três pontos, conecta-los, e, em seguida, preenche-los com uma cor. No segundo exemplo, você pode ver um punhado de pontos - alguns com alças saindo deles. Estas alças controlar a curva do caminho entre os dois pontos - conhecido como um B # curva de 233 zier para aqueles que a conhecem. A figura a seguir iria funcionar bem como um vetor.

Se você está pensando que vetores podem desenhar gráficos na tela muito mais eficiente do que bitmaps, você está certo. Os gráficos vetoriais ter tamanhos de arquivo extremamente pequenas, tornando-os ideais para a entrega online. Gráficos vetoriais e de bitmap, no entanto, têm os seus prós e contras.

O confronto vetor-bitmap

Como um web designer, você deve saber algumas coisas sobre os altos e baixos de vetores e bitmaps antes de empurrar o seu primeiro pixel:

• Os mapas de bits são altamente prevalentes na web. Todos os gráficos JPEG, GIF e PNG que você encontrar na web são bitmaps. Ironicamente, muitos destes gráficos começou a vida como vetores antes de serem convertidos em bitmaps. Por design com vetores? Porque desenhar gráficos e efeitos interessantes com vetores é muitas vezes mais rápido e mais fácil do que criar o mesmo efeito com gráficos de bitmap. É também muito mais fácil de fazer alterações em vetores, porque você só mover um ponto ea linha seguinte. E se você precisa para escalar o gráfico para cima ou para baixo, gráficos vetoriais pode fazê-lo sem perder qualidade de imagem. Para fazer alterações em bitmaps, muitas vezes você precisa redesenhar partes deles.

• Bitmaps não pode manter a qualidade se eles são redimensionados. Os gráficos de bitmap fixaram resoluções. Gráficos de bitmap são dispostas em uma grade de pixels. Como o fio de galinha meia polegada-grade, esta grade é um tamanho fixo. E, como o fio de galinha, se você esticar a imagem, você acaba com uma bagunça contorcido. Embora seja possível usar o código HTML para inserir novas alturas e larguras para uma imagem, tudo isso faz é esticar e distorcer a sua imagem. Melhor fazer suas imagens no tamanho correto em primeiro lugar.

• Os gráficos vetoriais podem ser facilmente redimensionada. Os gráficos vectoriais, por outro lado, são resolução-independente. Porque eles são desenhados de acordo com uma fórmula matemática de pontos que colocam na tela, o tamanho da grade (Resolução) não importa. Isto significa que você pode infinitamente esmagar e esticar gráficos vetoriais para cima, para baixo e para os lados, sem perder qualidade de imagem: Eles são o Play-Doh # 174- da web. Veja as duas figuras a seguir.

  
  É fácil mudar as cores, ou alterar a forma de esta imagem vetor-tirado movendo seus pontos sem qualquer perda de qualidade.
  
  Se você esticar e esmagar uma imagem bitmap, ele começa a perder a qualidade de imagem e pode olhar embaçado.