“Esta es una lección para todos los diseñadores que empiezan la casa por el tejado”

Conocer los diferentes tipos de formatos de imágenes es la labor de cualquier encargado de diseñar un sitio web, un banner o cualquier otra campaña digital. Por lo tanto pueden (y deben) conocerlo un programador, un diseñador gráfico, un responsable de marketing o cualquier curioso digital interesado en UI.

Conocer bien los formatos nos ayuda no solo a optimizar nuestras imágenes digitales, también a mejorar en usabilidad para el usuario, velocidad de carga, e incluso ser mejor considerados por el algoritmo de Google.

Vectorial vs Mapa de Bits

La primera gran división la encontramos según el elemento más pequeño que compone una imagen.

  • Los formatos vectoriales se construyen sobre fórmulas matemáticas que llamamos vectores. Un gráfico vectorial se puede expandir sin perder calidad. Eso sí, es mala idea utilizarlo para describir imágenes irregulares (un paisaje de fotografía real), ya que necesitaría millones de fórmulas para ello.
  • Los formatos de bits se construyen sobre puntos llamados pixeles, que son cuadrados de luz con diferentes colores y niveles de brillo. Al juntarse con otros, forman una imagen al puro estilo del puntillismo. A más píxeles, mayor calidad. Es por ello que, al agrandar una imagen así, esta se distorsiona y pixela.

En general, utilizamos vectores para logotipos, iconos, infografías, tipografías… mientras que usamos “bitmaps” para fotografías o imágenes escaneadas.

Tipos de formatos de imágenes vectoriales

Estos formatos son menos numerosos y más similares que los que recurren a los píxeles (su diferencia radica en los canales que pueden o no soportarlos), pero no por ello hay que dejar de conocerlos:

  • AI. El formato de referencia, de Adobe Illustrator.
  • SVG. Un formato muy utilizado actualmente, de W3C. Está optimizado como lenguaje de programación.
  • EPS. Quizás el más común, y, por tanto, el más compatible con otros programas. Es de Adobe.
  • PDF. Usado como formato de documento, también se puede usar como imagen vectorial.

Estos son los tipos de formatos de imagen vectoriales más comunes, pero hay más: CDR, XAR, DXF… aunque estos tipos de archivos son cada vez menos usados.

Tipos de formatos de imágenes de bits

Las dudas más frecuentes vienen con estos formatos, pues son los que más diferencias presentan entre sí. Todos coinciden en algo: si los amplias o reduces, la imagen se distorsiona, debido a que está compuesto por un número limitado de pixeles.

Eso sí, hay otro gran subtipo dentro de estos: los que admiten compresión sin pérdida y aquellos que lo hacen con pérdida.

Formatos con pérdida

En general, estos tipos de formatos de imágenes ocupan menos espacio, pero no guardan una copia perfecta de la imagen. Se usa mucho en web, por el menor peso y tamaño del archivo, y para imágenes que no queremos que sean perfectas.

JPG (Join Photographic Experts Group) o formato JPEG es el más representativo de esta compresión. Soporta 24 bits (16 millones de colores), no trata bien los bordes, logos ni el texto en la imagen. Se puede guardar en RGB o CMYK.

Actualmente se investigan formatos de JPG más modernos, como el JPEG XR (más calidad con menos tamaño) y el 2000 (mayor compresión). Eso sí, no están optimizados en todos los navegadores.

Para saber qué navegador soporta los diferentes tipos de formatos de imágenes, visita caniuse.com

Formatos sin pérdida

Estos tipos de formatos de imágenes guardan una representación de la imagen píxel por píxel, pero eso hace que pesen más. Se recomiendan para logotipos, infografías o imágenes con bastante texto.

El GIF (Graphic Interchange Format), más allá de ser un recurso animado, es un formato de poco peso pues puede tener hasta 256 colores. Es esta poca profundidad de color lo que hace que no ocupe mucho espacio. Como ya hemos comentado, permite animación.

El PNG (Portable Network Graphics) es otro de los grandes formatos sin pérdida. Soporta canal alfa con 256 niveles (una parte de los datos de cada pixel con información de semitransparencia). La compresión sin pérdida es mejor que en el GIF (5 a 25%) y puede permitir animación si es APNG y MNG. Destacan dos tipos:

  • 8 bits, 256 colores
  • 24 bits,16 millones de colores (mayor peso que un JPG)

El formato TIFF (Tagged Image File Format)  se está empezando a popularizar para guardar imágenes con muchos colores y detalles (admite hasta 32 bits). Es perfecto para fotografías profesionales de alta calidad. Pero no esperes conseguir un formato de archivo más pequeño que el resto, pues es el que más peso tiene (hasta 4GB).

Por último, el PSD, aunque tiene la opción de utilizar vectores, se utiliza en Adobe Photoshop para crear capas con imágenes de mapas de bits.

Mencionamos también el BMP, cada vez más en desuso, pues genera archivos de imagen innecesariamente grandes, pues usan poca compresión. No es un formato en sí, pues Windows y Apple tienen cada uno el suyo, pero con las mismas características.

¿Cuál es el mejor entre los tipos de formatos de imágenes?

No hay una respuesta a esta pregunta, pues debes tener en cuenta varios factores: cuál es la función de la imagen, dónde va a ir alojada (o la calidad que requieres) y qué navegador quieres que la utilice, pues, como hemos comentado antes, no todos soportan el mismo tipo de formatos.

Sí te podemos adelantar que para redes sociales y para una web tipo blog basta un formato gráfico JPG para imágenes estáticas sencillas, PNG para infografías y GIF si queremos usar recursos animados o stopmotion (menos para Instagram y Facebook, que es necesario convertirlo a MP4).

Si quieres saber más sobre diseño web, creatividad y marketing digital, suscríbete a nuestra newsletter.