Banner principal con cuatro imagenes enmarcadas que representando diferentes opciones de formatos graficos.
| Natalia de la Selva

Eligiendo el Formato Adecuado de Imagen

Cuidar el desempeño de un sitio y mantenerlo visualmente atractivo no deben ser eventos mutuamente excluyentes. Basta con evitar el uso desmedido de imágenes, optimizarlas y sobre todo, elegir el formato adecuado de imagen.

Un sitio web actual pesa en promedio 2MB y el motivo principal es el uso de imágenes. Con pantallas de cada vez mayor resolución, buscamos que nuestras imágenes se vean lo más nítidas y de mejor calidad posible para que capten la atención del visitante.

Pero esto viene a un alto costo; al incrementar el peso de un sitio también se aumenta su tiempo de descarga. Sitios web pierden muchos usuarios porque a nadie le gusta que un sitio consuma la mayor parte de su plan de datos o tener que esperar tanto a que se cargue.

Esta situación se convierte en un complicado dilema, pues queremos que nuestros sitios se vean lo mejor y más profesional posible, pero también queremos evitar que resulten pesados. Y a pesar de que ya contamos con valiosas soluciones para aminorar este problema (como los optimizadores de imágenes y la implementación de imágenes responsivas), les sorprendería saber cuántos sitios web siguen desplegando gráficos que pudieran beneficiarse de haberse guardado en otro formato.

Por este motivo debemos conocer las cualidades de los formatos de imagen, pues cada uno de ellos fue creado para obtener la mejor calidad de un gráfico tratándola de contener en el tamaño de archivo más óptimo.

Balance entre estética y rapidez

Actualmente tenemos los formatos JPEG, PNG, GIF y SVG para web. Cada uno tiene sus pros y sus contras de acuerdo a las características de la imagen que estemos intentando comprimir. Es importante conocer qué es lo que cada uno ofrece para aprovecharlos mejor en el momento de crear nuestras imágenes y lograr así un balance entre estética y desempeño.

Como había mencionado antes, los resultados que obtengamos de cada formato van a variar dependiendo de las características de la imagen que deseamos comprimir. Hacernos las siguientes preguntas nos pueden ayudar a determinar cuáles son las características principales de nuestra imagen y así elegir el formato más adecuado para ella.

Una vez eligiendo el formato más adecuado para nuestra imagen, es recomendable probar con las diferentes escalas de compresión que cada formato ofrece y ver qué tanto afecta la calidad y nitidez.

Cada formato logra una mayor o menor compresión de acuerdo a determinados parámetros, por ejemplo, PNG8 toma en cuenta las paletas de colores y si agregamos un tramado (como ruido/dither) para integrar mejor los colores, mientras JPG ofrece una escala de 1 al 100 que indica cuánta información va a descartar.

Y ahora sí, pasemos a conocer un poco más sobre las cualidades de cada formato.

JPEG

Este formato es ideal para fotografías o imágenes con un largo espectro de colores. El algoritmo de compresión de JPEG fue diseñado para comprimir imágenes de manera que nuestra vista no lo note.

Los JPG son excelentes comprimiendo imágenes complejas. JPG genera un archivo pequeño para imágenes que tienen muchos colores o detalle; el cual es uno de nuestros objetivos al elegir el mejor formato.

Da click en cualquier imagen para verla en tamaño real.

JPG logró generar un archivo de tan sólo 260Kb de los 2.25MB de la imagen original, manteniendo una buena calidad y detalle.

El algoritmo de JPG descarta información en áreas de la imagen donde hay poco contraste; sin embargo, en imágenes que tienen áreas con mayor contraste entre colores, será mejor elegir otro formato como PNG, ya que el JPG mostrará la aparición de pixeles o bloques.

Imágenes con mayores áreas de contraste son más aptas para PNG ya que el JPG mostrará la aparición de pixeles alrededor de los bordes.

JPG permite guardar una imagen en diferentes calidades dentro de una escala del 0 al 100. A calidades menores notaremos una pérdida notable de claridad mostrando áreas borrosas y pixeleadas. Al guardar en JPG es muy importante estar probando cuál de todas las calidades es la más óptima para nuestra imagen.

Comparación de calidades de JPG. Las calidades menores muestran pérdida de claridad y aparición de bloques o pixeles; sobre todo en áreas de más contraste como en donde hay texto.

Una recomendación es iniciar con una calidad del 60% y revisar las áreas de mayor contraste en la imagen o donde aparezca texto. Lo que buscamos es evaluar qué tan borroso o pixeleado se ve y en base a eso ajustar la calidad. Habrá imágenes que puedan guardarse en menor calidad y otras donde deberemos utilizar una mayor calidad para mantener la nitidez.

PNG

PNG ofrece muchas ventajas en cuanto a calidad de imagen se refiere. Mantiene una representación muy cercana a la imagen original y a diferencia de JPG, no descarta información ni pierde calidad pero generará un archivo del doble o triple de tamaño.

Hay 2 modalidades de PNG: el 8 y el 24. Cada uno tiene sus ventajas y desventajas dependiendo del tipo de imagen que estemos tratando.

PNG8

PNG8, al igual que GIF (formato del que hablaré más adelante), tiene una paleta limitada de 256 colores. Si intentamos guardar una fotografía en PNG8 aparecerá granulada o con bloques sólidos de color en vez de sutiles degradados; por lo tanto, es mejor reservarlo para imágenes que tienen pocos colores y bordes nítidos.

PNG8 tiene una paleta limitada de colores que lo hace inadecuado para imágenes como fotografías que necesitan un amplio espectro de colores.

Aunque algunos programas permiten que PNG8 tenga transparencia parcial, la mayoría de los programas gráficos lo exportarán con transparencia total. Si ocupamos transparencia parcial lo mejor será utilizar PNG24; de lo contrario nos arriesgamos a que las sombras y bordes redondeados de nuestra imagen se vean mal y dentados.

La transparencia parcial hace posible la aparición de medios pixeles que se ocupan para bordes redondeados y sombras. PNG8 y GIF sólo soportan transparencia total y mezclarán los medios pixels con un color sólido. PNG24 es el único que soporta transparencia parcial.

Otra cosa que debemos de tomar en cuenta a la hora de comprimir con PNG8, es la opción de agregar (o disminuir) un tramado y la cantidad de colores.

El tramado (o bien, “dither”), es una opción que se controla en una escala del 0 al 100% cuando estamos guardando nuestro PNG y lo que hace es agregarle un poco de ruido a la imagen. Esto nos resulta útil si consideramos que los bloques de color de nuestra imagen son demasiado duros y queremos suavizarlos. Sin embargo, debemos tomar en cuenta que ese tramado/ruido es información adicional que aumentará el tamaño de nuestro archivo.

En cuanto a las paletas de color, PNG8 cuenta, precisamente, con 8 paletas que van de 2, 4, 6, 8, 16, 32, 64, 128 y 256 colores. Entre menos colores, menor el tamaño del archivo que se generará, sin embargo, si elegimos una paleta que tenga menos colores que los que la imagen ocupa, pueden aparecer bloques “muy agresivos” de color. Así que podemos experimentar con las paletas de PNG8 y la cantidad de tramado (dither), para ver si podemos lograr un ahorro significativo en el tamaño del archivo.

PNG24

PNG24 no tiene la misma restricción de colores que PNG8. En este aspecto es parecido a JPG que soporta una paleta de millones de colores; siendo apto para imágenes como fotografías o muchos degradados. Sin embargo, un PNG24 resultará mucho más pesado que un JPG porque no descarta información a la hora de comprimir (es un formato lossless).

PNG24 también sirve para imágenes como fotografías pero resulta mucho más pesado que un JPG. Aunque PNG mantiene una referencia más cercana a la imagen original, JPG logra otorgar un resultado muy similar con un archivo más ligero.

PNG24 soporta transparencia en el canal alfa o transparencia parcial, lo que lo hace perfecto para imágenes transparentes donde haya bordes redondeados o que proyectan sombras. Es esta capacidad la que lo hará el mejor formato a considerar en el caso de que ocupemos utilizar imágenes transparentes.

PNG24 es el formato que creará los archivos más pesados y por eso debemos utilizarlo sólo cuando sea absolutamente necesario.

GIF

GIF es uno de los formatos más antiguos para web y fue creado para almacenar varios mapas de bits en un sólo archivo; haciéndolo famoso por su capacidad de mostrar animaciones. Al igual que PNG8, GIF también tiene una paleta de 256 colores, por lo tanto, es mejor para imágenes con pocos colores y sólidos.

GIF también soporta transparencia y es muy parecido a PNG8, pero en la mayoría de los casos generará un archivo más grande que un PNG8 ya que el algoritmo de compresión de PNG es más completo que el de GIF.

PNG8 casi siempre generará un archivo menor a GIF. Sin embargo, es siempre recomendable hacer la prueba entre GIF y PNG8 y elegir el formato que genere el archivo más ligero.

De acuerdo con Lara Callender, autora de “Designing for Performance”, hay 2 únicas circunstancias cuando será mejor elegir GIF en vez de un PNG8:

  1. Cuando el tamaño del GIF es menor a que si lo guardas en PNG8

  2. Que la imagen tenga animación y ésta no pueda ser reemplazada con CSS (o SVG).

Al igual que PNG, GIF tampoco descarta información al comprimir el archivo ni pierde calidad. GIF no soporta transparencia parcial, así que debemos evitar utilizarlo para imágenes transparentes con bordes redondeados o que proyectan sombras.

SVG

El SVG es un formato de imágenes vectoriales y nos permite colocarlas directamente en el DOM por medio de XML. También podemos exportar nuestras imágenes a este formato desde un programa gráfico de edición vectorial como Illustrator.

Los SVG generan un archivo pequeño que siempre se verá nítido en cualquier tamaño de pantalla y resolución; ofreciendo una buena opción para cuidar el desempeño de un sitio.

SVG es perfecto para íconos, logotipos y cualquier otro gráfico sencillo que tenga poco detalle y degradados. SVG no se limita a gráficos planos; puede agregársele sombras y degradados, pero debemos tomar en cuenta que si el gráfico tiene mucho detalle puede resultar muy pesado y perderíamos la ventaja.

SVG sólo es para imágenes vectoriales; para fotografías o mapas de bits debemos utilizar JPEG o PNG. Aunque SVG goza de un amplio soporte; habrá que utilizar fallbacks si es que debemos tomar en cuenta navegadores antiguos como Android 2, IE8 y sus versiones anteriores.

Nuevos Formatos de Imagen

Tal vez hayan oído hablar de nuevos formatos de imagen como JPEG2000, JPEGXR y WebP. Estos nuevos formatos fueron creados para proveer una mayor compresión con una menor pérdida de calidad. Han estado dando excelentes resultados ya que nos generan imágenes que se ven bien y que pesan la mitad de lo que normalmente pesarían.

El problema es que todavía no cuentan con un soporte adecuado. Los navegadores actuales reconocen un formato u otro, pero no todos al mismo tiempo.

Así que mientras van ganando popularidad, es muy probable que en un futuro cuenten con mejor soporte y podamos aprovechar las ventajas que nos ofrecen.


Sobre el Autor

Natalia de la Selva

Diseñadora web con más de 6 años de experiencia. Creo en el diseño como una herramienta para solucionar problemas.

Mantengo un blog personal donde comparto mi experiencia sobre diseño y también expongo en universidades sobre la importancia del diseño a públicos de otras especialidades.