100 puntos a saber sobre...
Desarrollo de una web de diseño eco

En un enfoque sostenible del diseño de tu web, es importante tener en cuenta la optimización de las imágenes.
En este post, hablaremos de los principales tipos de imágenes.

Al igual que el texto, las imágenes son una parte integral de un sitio web. Existen 2 tipos de imágenes:

• Imagen de trama, también llamada imagen de trama o mapa de bits. "Es una imagen formada por una matriz de puntos de color. Es una yuxtaposición de puntos que forman, en su conjunto, una imagen". Su tamaño se caracteriza únicamente como tamaño de impresión, depende sobre todo de las posibilidades técnicas y materiales de visualización (calidad del píxel).

En el caso de una imagen rasterizada destinada a la impresión, el tamaño es importante.
Hay que tener en cuenta que se almacenan en un formato gráfico y los principales formatos son BMP, GIF, PNG, JPEG, etc.

• Una imagen vectorial "es una imagen digital compuesta por objetos geométricos individuales, cada uno de ellos definido por atributos diferentes (forma, posición, color, etc.) y a los que se pueden aplicar diferentes transformaciones".

En otras palabras, se almacenan como expresiones matemáticas antes de traducirse en imágenes en nuestras pantallas. Su tamaño es relativo, siempre que la imagen se encuentre en un entorno adaptado a su tipo, se adapta sin perder calidad.
En cambio, si el entorno no está adaptado (impresión, fondo, etc.), habrá que transformarla en una imagen rasterizada. En este caso, es imprescindible establecer un tamaño y ajustar su resolución.
Ten en cuenta que los principales formatos en los que se guardan las imágenes vectoriales son Postscript, PDF, Illustrator, SVG, etc.

La principal diferencia entre estos dos tipos de imágenes es que el formato vectorial se puede redimensionar sin perder la calidad de la imagen, a diferencia del formato ráster.

Aquí tienes un ejemplo de cómo son las dos imágenes: