Diseño web: mapas de bits y gráficos vectoriales comprensión
Video: Diferencias entre Mapa de bits (Bitmap) e Imagen Vectorial
Todos los gráficos que encuentro en la web son o de mapa de bits o gráficos vectoriales. La diferencia básica entre los dos es cómo se dibujan en la pantalla. Este simple detalle afecta a todo, desde la resolución de la imagen a tamaño y formato de archivo.
Los mapas de bits: un tejido de píxeles
Al explicar las imágenes de mapa de bits, pensar en la Lite Brite. Aquellos que fueron lo suficientemente mimado como los niños jueguen con este juguete recuerda que ha enchufado pequeñas clavijas de colores en una rejilla y luego accionó el interruptor para encender para arriba.
Los mapas de bits funcionan más o menos de la misma manera. En términos simplistas, una mapa de bits gráfico es una cuadrícula llena de diminutos píxeles de colores. Para dibujar un gráfico de mapa de bits en pantalla, el ordenador establece una rejilla, por ejemplo 100 por 100 píxeles, y luego mapas un color a cada píxel individual. Eso es 10.000 píxeles para dibujar! Recuerde, un píxel es 1/72 pulgada de diámetro. Por lo tanto, si una imagen tiene una resolución de 72 dpi y es de 100 píxeles de ancho, parece poco más de una pulgada de ancho en la pantalla del ordenador. La siguiente figura es típico de un mapa de bits.
las imágenes vectoriales en Internet
Si no recuerda la Lite Brite, entonces seguramente usted recuerda “conectar los puntos.” Los gráficos vectoriales emplean una estrategia similar. A matemáticos lugares fórmula puntos en la pantalla y luego se conecta con caminos. Por ejemplo, para dibujar un vector en pantalla gráfica en forma de triángulo, el ordenador simplemente establece tres puntos, los conecta, a continuación, los llena de un color. En el segundo ejemplo, se puede ver un puñado de puntos - algunos con mangos saliendo de ellos. Estas manijas de control de la curva de la trayectoria entre dos puntos - conocido como curva de Bézier a los que lo conocen. En la siguiente figura que funciona bien como un vector.
Si usted está pensando que los vectores pueden dibujar gráficos en pantalla mucho más eficiente que los mapas de bits, tienes razón. Los gráficos vectoriales tienen muy pequeños tamaños de archivo, lo que es ideal para la entrega en línea. Vectoriales y de mapa de bits, sin embargo, tienen sus pros y contras.
El enfrentamiento vector-mapa de bits
Como diseñador web, usted debe saber algunas cosas acerca de los altibajos de vectores y mapas de bits antes de empujar el primer elemento de imagen:
Video: Diseño vectorial con Inkscape 1
Los mapas de bits son altamente prevalentes en la web. Todos los gráficos JPEG, GIF, PNG y que encuentre en la web son mapas de bits. Irónicamente, muchos de estos gráficos se inició la vida como vectores antes de que se convirtieron en mapas de bits. ¿Por qué diseñar con vectores? Debido a dibujar gráficos y efectos interesantes con vectores es a menudo más rápido y más fácil que crear el mismo efecto con los gráficos de mapa de bits. También es mucho más fácil de realizar cambios en vectores porque sólo hay que mover un punto y la línea de la siguiente manera. Y si es necesario para escalar el gráfico arriba o hacia abajo, gráficos vectoriales pueden hacerlo sin perder calidad de imagen. Para realizar cambios a los mapas de bits, a menudo es necesario volver a dibujar las partes de ellos.
Los mapas de bits no pueden mantener la calidad si se cambia el tamaño. gráficos de mapa de bits se fija resoluciones. gráficos de mapa de bits se colocan en una cuadrícula de píxeles. Como alambre de pollo media pulgada de grado, esta rejilla es un tamaño fijo. Y al igual que la tela metálica, si se estira la imagen, se termina con un lío retorcida. Si bien es posible utilizar código HTML para introducir nuevas alturas y anchuras de una imagen, todo esto hace es estirar y deformar su imagen. Es mejor que las imágenes sean del tamaño correcto en el primer lugar.
Los gráficos vectoriales pueden ser fácilmente cambiar de tamaño. Los gráficos vectoriales, por el contrario, son independiente de la resolución. Debido a que se ven envueltas de acuerdo con una fórmula matemática de los puntos de colocación en la pantalla, la tamaño de la cuadrícula (Resolución) no importa. Esto significa que puede aplastar infinitamente y gráficos vectoriales tramo de arriba, abajo y de lado a lado sin perder calidad de imagen: Son los Play-Doh® de la web. Ver las dos figuras siguientes.
Es fácil cambiar los colores, o cambiar la forma de esta imagen vector-dibujado moviendo sus puntos sin ninguna pérdida de calidad.
Si se estira y aplastar a una imagen de mapa de bits, que empieza a perder calidad de imagen y puede verse borrosas.