Los tipos y formatos de archivos de imagen se dividen en dos categorías principales: archivos de imágenes rasterizadas y archivos de imágenes vectoriales.

Formatos de archivos de imágenes rasterizadas

Los formatos de imagen más comunes para la web (JPEG, GIF y PNG) están todos bajo la categoría de raster.

Los tipos de archivos de imágenes rasterizadas muestran imágenes estáticas en las que cada píxel tiene un color, una posición y una proporción definidos en función de su resolución (por ejemplo, 1280×720).

Como son estáticas, no se puede cambiar el tamaño de las imágenes de manera eficiente, el diseño original y los píxeles simplemente se estirarán para llenar el espacio extra. Esto termina creando una imagen borrosa, pixelada o distorsionada de alguna manera.

Imagen Raster - ejemplo JPEG

La gran mayoría de las fotografías o imágenes que ves en Internet utilizan un formato de imagen rasterizada.

Formatos de archivos de imágenes vectoriales

SVG, EPS, AI y PDF son ejemplos de tipos de archivos de imágenes vectoriales.

A diferencia de los formatos de archivos de imagen rasterizados estáticos, donde cada forma y color del diseño está ligado a un píxel, estos formatos son más flexibles. Los gráficos vectoriales utilizan en cambio un sistema de líneas y curvas en un plano cartesiano, escalado en comparación con el área total, no un solo píxel.

Esto significa que se puede ampliar infinitamente la resolución de la imagen original sin ninguna pérdida de calidad o distorsión. 

Ampliación del formato de la imagen vectorial.

Como puedes ver, la diferencia de calidad cuando se amplía 7 veces es completamente incomparable.

Como el SVG calcula las posiciones basándose en un porcentaje del área total, y no en píxeles, no hay ninguna pixelación. 

Diseño Web: Qué archivos de imágenes usar

Utilizar imágenes en tu diseño web es fundamental, pero la clave está en saber usarlas. 

Puede ser difícil saber exactamente qué tipo de archivo de imagen es mejor usar en cada diseño web. Si guardas una imagen de la forma equivocada puedes terminar con imágenes borrosas, logos sin detalles o fondos transparentes transformados en negro.

Cuando se trabaja con archivos de imagen en línea para el diseño web hay muchos factores que pueden complicar las cosas. Los archivos muy grandes no sólo ocupan mucho espacio, también ocupan más ancho de banda y aumentan los tiempos de descarga. Si las imágenes importantes en tu sitio web no se cargan lo suficientemente rápido pueden llegar a afectar todo el trabajo final.

Si necesitas más espacio para almacenar tus archivos deberás aumentar de plan en tu hosting a uno que te otorgue mayor capacidad de almacenamiento y/o ancho de banda de acuerdo a lo que necesites.

Si crees que la solución es comprimir el tamaño de todos los archivos no estás en lo correcto, pues también hay que preocuparse por la calidad de la imagen. Deberás considerar si es una foto en color o blanco y negro o un logotipo con líneas nítidas, o bien una imagen con un fondo transparente o incluso animación. Para cada caso debes saber qué tipo de archivo es compatible con esas características, y con cuál podría llegar a perder esos efectos. 

CONOCE LOS TIPOS DE ARCHIVO 

Las imágenes digitales llenan nuestras bandejas de entrada, ocupan espacio en la memoria del computador y toman tiempo de cargar en una página web. Cuando se trabaja en un diseño web con archivos de imágenes digitales, hay ciertos tipos de archivos a utilizar para cada circunstancia: JPEG, GIF o PNG.

JPEG

• Extensión de archivo: .JPG o .JPEG
• "JPEG" significa: "Joint Photographic Experts Group".
• Formato de datos de 16 bits
• Puede mostrar millones de colores
• Utiliza un algoritmo de compresión muy complejo
• Sirve para reducir el tamaño del archivo
• Deje que los detalles de la imagen se "olviden" y luego rellenar cuando se despliega
• El ojo humano no ve detalle de color, así como lo hace con detalles luminosos u oscuros, por lo que algunos detalles de color pueden ser sacrificados para ahorrar espacio de archivos.
• 60-75% de compresión es generalmente óptimo para uso en sitio web.
• Se utiliza cuando el tamaño de archivo es más importante que la calidad
• Es el formato de archivo estándar de las cámaras digitales y páginas web.
• Compatible en muchas plataformas (PC y Mac), y otros programas (navegadores web y editores de imágenes).
• Reduce el tamaño de archivo hasta en un 15% más sin perder calidad.
• Útil para las páginas web, especialmente Facebook, pues pueden cargar más rápido.

• En diseño web los tamaños de archivo más pequeños significan menos espacio de almacenamiento y carga más rápida.

Mejor uso en: 

• Sólo imágenes fijas
• Imágenes del mundo real como fotos
• Colorido Complejo
• El sombreado de luz y oscuridad

Por eso es el segundo formato más popular en Internet, usado por casi el 72% de los sitios web.

GIF 

• Extensión de archivo: .GIF
• "GIF" es sinónimo de "Formato de intercambio de gráficos"
• Utiliza 256 colores indexados
• Utiliza tramado, un proceso en el que dos colores de píxeles se combinan para hacer uno y así reducir el número de colores necesarios.
• Un color puede ser elegido para ser transparente.
• Puede ser entrelazado
• La carga progresiva muestra una versión de baja calidad en primer lugar y luego se añade más detalle.
• Puede ser animada
• Utiliza la compresión sin pérdida

• · La compresión no pierde ningún dato. 

Mejor uso en: 

• Gráficos web con pocos colores
• Iconos pequeños
• Animaciones
• Imágenes simples
• Dibujos de línea
• Bordes de un color
• Dibujos animados simples

PNG 

• Extensión de archivo: PNG
• "PNG" es sinónimo de "Portable Network Graphics"
• La compresión es sin pérdidas, por lo que no hay pérdida de datos.

PNG - 8 

• Muy similar a GIF
• 256 colores y 1 bit de transparencia
• Los archivos PNG-8 son aún más pequeños que los archivos GIF

PNG-24 

• 24 bits de color, similar a JPEG
• Puede incluir más de 16 millones de colores
• La compresión sin pérdidas significa archivos más grandes que el formato JPEG

Mejor uso en:  

• Imágenes Web, tales como logotipos que impliquen transparencia y decoloración.
• Imágenes en el medio del proceso de edición.
• Las imágenes complejas, como fotografías, si es que el tamaño del archivo no es un problema.
• Capturas de pantalla, banners, infografía, fotos.

Los PNG están presentes en un impresionante 77% de los sitios web, es el primer formato más popular en Internet. 

SVG

Los archivos SVG son archivos vectoriales escalables que son perfectos para iconos, logotipos, gráficos e ilustraciones simples. La imagen puede incluso ser insertada directamente en la página como código CSS.

Es por eso que los SVG están en tercer lugar, utilizados por el 27% de los sitios web.

Aunque raramente es el formato elegido para las imágenes estáticas, el GIF ha vuelto a ser la opción número uno para compartir animaciones.

Como resultado, alrededor del 22% de los sitios web usan GIF en sus páginas, aunque probablemente también usen PNG y JPEG como formatos estándar. 

LOS 15 TIPOS DE ARCHIVOS DE IMÁGEN MÁS POPULARES 

• JPEG (y JPG) - Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía)
• PNG - Portable Network Graphics (Gráficos de Red Portátiles)
• GIF - Graphics Interchange Format (Formato de Intercambio de Gráficos)
• WebP
• TIFF
• BMP - Bitmap
• HEIF - High Efficiency Image File Format (Formato de Archivo de Imagen de Alta Eficiencia)
• SVG - Scalable Vector Graphics (Gráficos Vectoriales Escalables)
• EPS - Encapsulated Postscript (PostScript Encapsulado)
• PDF - Portable Document Format (Formato de Documento Portátil)
• PSD - Photoshop Document (Documento de Photoshop)
• AI - Adobe Illustrator Artwork
• XCF - eXperimental Computing Facility (Desenvoltura Informática Experimental)
• INDD - Adobe InDesign Document
• Raw Image File Types (Formato de Imágenes Raw)