Optimización de imágenes para la web

En este mundo informático es normal contar con muchos software para realizar la misma tarea, por la misma razón encontramos también formatos diversos de mapas de bits, en algunos casos, formatos propietarios – que son los formatos utilizados por un tipo específico de software – y en otros formatos más comunes o estándares como los que se usan en el mercado (JPG, GIF, PNG, SVG, etc.)

Formatos de vectores y recomendación para la web

Es claro que comúnmente el estudiante habrá creado algunos diseños basados en vectores, estos vectores son independientes de la resolución – gran ventaja – pero lo más común es que la salida de estos programas sea un archivo de mapas de bits.

Si el usuario puede disponer del archivo fuente de los vectores y puede generar nuevamente el archivo de salida, entonces habrá ganado una batalla importante ya que al no depender de la resolución, cuando se genera el archivo de salida, el usuario puede escoger a que resolución y tamaño se exportará.

Algunos software de edición de mapas de bits soportan la importación de vectores para ser incorporados en sus diseños, la recomendación es tener disponibles nuestros vectores en formato eps y pdf, de manera que garantizamos que haya más posibilidades de éxito en nuestra importación.

Finalmente para la web, el formato vectorial que ha tomado fuerza y es soportado es el llamado SVG (Scalable Vector Graphics) o gráfico vectoriales redimensionables, es posible insertarlo de dos maneras, como código XML dentro del archivo, pero la más común es como archivo directo enlazado.

Aunque se recomienda para gráficos sencillos, existen ejemplos como la llamada Galería de arte SVG - como referencia la imagen "eleven below" realizada enteramente en inkscape en marzo 2 de 2008 por Brian Lukis.

Formatos de mapas de bits

En cuanto a los mapas de bits ocurre algo importante, un mapa de bits es un archivo compuesto por pixeles con información de color (profundidad de color) y cada pixel conforma una malla de puntos que finalmente conforman una imagen.

Visto desde ese punto de vista es claro que si aumentamos la imagen de tamaño de manera desproporcionada siempre llegaremos a un punto donde se verán los pixeles y aparecerá un efecto desagradable donde las líneas continuas se verán “serruchadas” a esto se le conoce como pixelación.

Por ende, en la web se debe buscar ese balance entre el tamaño optimizado (tamaño del archivo) tamaño de representacíon - el tamaño en que será mostrado en diversos dispositivos y las necesidades del cliente - velocidad de descarga, visualización correcta y adecuada, etc.

Formato BMP

Microsoft ® creó este formato para su programa Microsoft Paint ® que viene de serie con el sistema operativo Microsoft Windows ®, este programa fue creado para editar de manera básica los mapas de bits, es bastante antiguo en términos de edad informática, es ampliamente soportado por los software de edición, sin embargo es desaconsejado ya que la forma en que guarda la información genera archivos inmensos - simplemente guarda pixel a pixel, sin compresión de datos y generará documentos no optimizados ni recomendados.

En los principios de la computación gráfica, este formato era suficiente, su proceso consiste en guardar punto a punto cada pixel con la información y profundidad de color, esto significa que tres imágenes con el mismo tamaño en pixeles (digamos 1.000 x 1.000) tendrán el mismo tamaño de archivo, sin importar si en un archivo está un punto negro en un lienzo blanco, en otra esté un logo y en el tercer archivo esté una obra maestra, simplemente los archivos serán iguales en tamaño.

Esto funcionaba perfectamente hace varios años, pero hacía que el tamaño de las imágenes no fuera optimizado, razón por la cual no es soportado en el mundo web, ya que haría que las páginas web se demoraran demasiado en ser visualizadas.

Formato GIF

Posteriormente cuando se comenzaron a transmitir archivos por Internet era necesario comprimir la información o en otro caso, optimizarla, así llegó el formato GIF.

En ese momento la cantidad máxima de colores a mostrar era de 256 colores (hoy en día un monitor convencional muestra millones de colores), razón por la cual el formato GIF soportaba máximo 256 gamas de color, la información de color adicional era desechada, lo que implica que existe una pérdida de calidad, pero para ese momento era suficiente.

Este formato fue evolucionando, posteriormente soportó un canal alpha (transparencia) y revolucionó el mercado ya que al mostrar imágenes siempre eran formas cuadradas o rectangulares y si deseábamos mostrar un círculo, igual el archivo tenía un fondo, con la llegada del canal alpha, el usuario podía seleccionar un color para que actuara como transparente, de manera que la imagen del círculo se visualizaba como tal y el fondo se podía eliminar visualizando la figura correctamente.

En esta figura vemos algunas aplicaciones de formato gif, en la primer imagen se visualiza como un formato sin soporte de transparencia (BMP o JPG), en el segundo caso se utilizó el color blanco como canal alpha, en el tercer y cuarto ejemplo se utilizó con baja cantidad de colores.

Otra de las evoluciones interesantes fue la de permitir guardar varias imágenes en un solo archivo para ser mostrados en secuencia, esto implica que se podían realizar animaciones sencillas, en su momento era el boom visual, ya que se creaban incluso videos en este formato - hoy por hoy se usa en millones de archivos con animación simple y la cultura de internet lo prefiere sobre las imágenes fijas (memes vs memes animados).

Formato JPG

Con el paso del tiempo el formato GIF se quedó corto, así que un grupo de fotógrafos se reunieron para crear un formato que permitiera mostrar imágenes con mayor cantidad de colores (ideal y necesario para el naciente auge de la fotografía digital) de esta manera nació el formato JPEG o JPG.

El problema de la optimización del tamaño de archivo resultante fue resuelto mediante fórmulas matemáticas que revisan la proximidad de los pixeles, de manera que en vez de grabar pixel por pixel la imagen se divide en áreas cuadradas, posteriormente se revisan los pixeles contiguos y se determina si se graba o no los cambios (esto se determina por el grado de compresión aplicada) y de esta manera se crean archivos menores en tamaño.

Imagen - Wikipedia foto - Foto con diversos grados de compresión de imagen JPG - imagen simulada, pues no es tan simple guardar una misma imagen con estos factores, pero permite entender el concepto de guardar información con pérdida de calidad.

En el mercado de las imágenes digitales (cámaras fotográficas por ejemplo) era necesario mostrar imágenes de una gran cantidad de millones de colores – como un atardecer en una playa por ejemplo.

Para solventar el problema, matemáticamente se analiza la imagen, se divide en trozos y bloques, estos bloques analizan entre sí los cambios que se presenten, si se presentan cambios se guarda la información, en el caso de un cielo azul profundo, no será necesario grabar mucha información, mientras que en una foto de una ciudad repleta de transeúntes el archivo será mucho mayor.

Imagen simulación - Wikipedia - el algoritmo Jpeg divide una imagen en zonas cuadradas - entre más pequeña la zona, menor compresión, por ende, mayor tamaño de archivo, pero mayor calidad, una vez divididas las zonas, se analizan los pixeles y sus diferentes y se decide su permanencia basada en promedios, así se determina si se elimina o nó - con lo cual es una compresión con pérdida de calidad.

Una de las pegas que posee este formato es que no soporta canales alpha, es decir, no existe transparencia en este formato.

Sin embargo, hoy por hoy es el formato más utilizado por las cámaras digitales y al ser utilizado ampliamente por la web es una excelente opción de salida, sin embargo como no soporta capas ni transparencia no es la mejor opción para editar, adicionalmente el proceso de optimización con pérdida de información se realiza cada vez que se guarda, es decir, si un archivo JPG se guarda cinco veces, cada vez que se guardó la imagen original habrá sido analizada y optimizada, con la pérdida de información del caso.

Mi consejo: No guardes en formato JPG sino hasta estar seguro que no vas a editar más la imagen.

Formato PNG

El formato GIF se quedó corto con el paso del tiempo y JPG llegó en su intento de reemplazo, sin embargo problemas de patentes no permitían el uso de ese formato sin pagar por él, así que la respuesta a estos problemas y limitaciones fue el formato PNG.

Logo de la Wikipedia ® en formato png sin transparencia, con transparencia sin fondo y con transparencia gradual – 256 niveles de transparencia que permiten que vaya desde opaco hasta totalmente transparente.

PNG soporta millones de colores lo que lo pone a la par de JPG, por otro lado soporta no uno sino 256 niveles de transparencia, es decir, mientras que en GIF un color podía ser definido como transparente, en el caso de PNG se pueden crear archivos que van desde opacos a transparentes en un degradado de transparencia esto también permitía crear diseños con bordes no duros e integrados de manera suave al fondo.

Se ha posicionado como uno de los preferidos de los diseñadores porque comprime la información sin pérdida de calidad, esto sin duda es uno de sus mejores logros - en algunos software propietarios incluso permite manejo de capas, pero no es propio del formato sino del software. Adobe utiliza en su programa Fireworks este formato y soporta capas e información adicional como efectos, sin embargo esta información no se visualiza correctamente en la web, el resto de su información como colores, transparencias y calidad sí.

En resumen, el formato PNG es una de las mejores opciones para trabajar con archivos de salida, ya que al no tener pérdida de calidad por compresión se puede editar directamente y grabar las veces que sean necesarias.

Formato RAW

Su traducción viene siendo algo como “Formato crudo” o “Formato de imagen sin compresión” literalmente “No alternado o de forma natural”. En pocas palabras, si viene de una cámara digital, es un formato que guarda la información tal como ha sido captada por el sensor digital, sin alteraciones, sin compresiones o exportación a formatos.

Esto es sensiblemente importante ya que para los fotógrafos digitales, una frustración común era que las cámaras grababan automáticamente en formato JPG, lo cual de entrada significaba que había pérdida de información, que en términos visuales podría ser nitidez en la imagen, detalles importantes en una foto o escena.

Aunque si debemos decir la verdad totalmente, RAW si comprime la información, pero lo hace sin pérdida de calidad – igual que PNG y Tiff – y soporta mayor profundidad de color pero ello implica también que los archivos en este formato son sensiblemente más grandes – cosa que con el tiempo no es un problema ya que las tarjetas de memoria poseen cada vez más capacidad a menor precio.

Si un fotógrafo captura la misma escena en los dos formatos – JPG y RAW – es posible que a primera vista el formato JPG se vea más vistoso, ya que el software que poseen las cámaras se encarga de aplicar filtros digitales para mejorar la imagen, mientras que en RAW la toma saldrá tal como la capturó el lente. Sin embargo, en el formato RAW se ha guardado mayor profundidad de color, lo que permitirá realizar ajustes más precisos de tonos, brillos, saturaciones entre otros.

RAW entonces se ha presentado como una alternativa más profesional para fotógrafos y editores digitales, aunque debido a que es relativamente nuevo, no es soportado de la misma manera que los demás formatos – no se visualiza en página web – y en este momento algunos software ya comenzaron a permitir leer directamente el formato (Picasa de Google y Photoshop por ejemplo).

Formatos intermedios – el formato TIFF

Uno de los formatos recomendados que asegura el intercambio de información en mapas de bits es el formato TIFF (Tagged Image File Format) que se ha convertido en un puente entre aplicaciones ya que es ampliamente soportado por programas de edición de mapas de bits y entre sus características más importantes es que guarda la información sin pérdida de calidad, soporta capas – incluso permite almacenar varias imágenes en una sola – y adicionalmente el usuario puede seleccionar si desea que se comprima la información.

Este formato también soporta transparencias y millones de colores, aunque hay que decir que no comprime las imágenes con la misma eficiencia que otros formatos, pero al ser soportado por varios software es un formato recomendado - teniendo claro que no funciona para la web.

Exportación entre aplicaciones

Cuando un usuario trabaja en una aplicación para edición de mapas de bits, todas las acciones que realiza, cambios y demás opciones se guardan en un formato propietario, mientras este formato se mantenga, la edición se podrá realizar con mayor soltura. Sin embargo, es claro que el formato de salida debe estar acorde con el medio en que se requiera la información.

Como ya dijimos anteriormente, la resolución es otro punto a tener en cuenta, así que el mejor consejo que se puede entregar - reiterando nuevamente - es que se guarde siempre el archivo original y no se exporta a otros formatos hasta que el diseño esté debidamente terminado, en caso de requerir más modificaciones siempre se puede volver nuevamente al origen con las ventajas que ello conlleva.

Por otro lado, debemos entender que los estándares en la web y el mundo multimedia son JPG, GIF y PNG, así que una vez que el usuario termine su trabajo debería pensar en cuál es el formato adecuado de salida.

Resumen - formatos para la web