Secciones 
Recientemente tuve la necesidad de forzar la disminución de tamaño en KB de una imagen PNG para ser presentada en un sitio web, existen diversas herramientas de diseño gráfico que pueden ayudarnos a hacer esto, el mismo GIMP
tiene un buen compresor para PNG (seguramente Photoshop también) pero hay ocasiones en que esto no es suficiente.
Me di a la tarea de escribir este artículo porque frecuentemente escucho a mis clientes (propietarios de sitios web) opinar sobre la gran importancia que tiene una imagen con la mejor calidad. No dudo que en el mundo real, en la opinión de un fotógrafo o publicista esto sea o deba ser considerado de suma importancia, pero creo que tiene que haber una adaptación ya que no estamos en el mundo real!, esto es un ambiente web y las imágenes, textos y todo lo que publicamos aquí debe ser realizado pensando en que estará aquí, en algún lugar de la red en el que todos necesitamos la información de manera rápida.
Tanto a mis clientes como para cuaqluier otra persona que solicita mi opinión sobre un sitio web siempre recomiendo tener extremo cuidado al seleccionar las imágenes que se desplegarán. Es cierto que a veces no hay muchas más opciones que hacer esperar al usuario a que las imágenes se descarguen y también que hoy en día nos ayuda mucho la velocidad de las conexiones a internet pero sin duda hay que tomar decisiones importantes sobre lo que ofrecemos a nuestros usuarios antes de publicar un sitio web, y creo que antes de colocar una etiqueta <img src="/x"> en nuestro código, vale la pena justificar su existencia y tamaño para realmente hacer el sitio para quien es creado, los usuarios.
Casi siempre intento y recomiendo tener un máximo de 250kb de imágenes fijas en un sitio web, con esto me refiero a las cabeceras, iconos, viñetas, fondos, etc. Cuando se trata de presentación específica de material gráfico la situación se vuelve muy subjetiva por ejemplo, si tienes un sitio web donde muestras o vendes fotografías/pinturas probablemente, y con mucha razón, tendrás tus imágenes con buena resolución y seguro en archivos de gran tamaño. Pero seamos realistas, este tipo de sitios web no son la mayoría en internet entonces al querer agregar una pequeña imagen para amenizar un artículo, como lo hice en este, vale la pena optimizarla para que no sea una carga, simpelmente una ayuda visual al usuario.Y siempre está la buena opción de ofrecer alternativas al usuario, presentando una muestra de la imagen (comunmente llamadas miniaturas o thumnails en inglés) y permitiendo ver (al hacer clic o deslizar el mouse encima de la imagen) una versión de mayor resolución y seguramente mayor tamaño del archivo, aquí afortunadamente el usuario está consciente de que una posible perdida de tiempo y espera frente al monitor se acerca, pero esto no lo podemos impedir, el lo pidió.
Como todo en la web, se vuelve un total dilema, y siempre quedará impregnada en el sitio web la última palabra de su propietario. El dilema que yo veo es: Calidad de gráficos o calidad de navegación y usabilidad para los usuarios. Si eres un webmaster y lees esto estoy casi seguro que normalmente optarás por la calidad en la navegación, si eres el propietario o futuro propietario de un sitio web, te recomiendo que pienses detenidamente en que el sitio es para tus clientes, los usuarios, y quisiera convencerte de que apuestes por la usabilidad en tu presencia web. Entonces, intentemos tener la mejor imagen posible dentro del margen de la menor resolución posible (una vez más, esto es subjetivo).
Ahora un poco de cuestiones técnicas. Existen muchos formatos de imagen, los más utilizados para su publicación en web son PNG, JPG y GIF. Todos son buenos y nos pueden servir para diferentes cosas, en este caso escribiré un poco sobre el tratamiento que se le puede dar a los PNGs para optimizarlos antes de publicarlos en la red. Las herramientas que aquí menciono las probé en un ambiente Linux (Ubuntu 8.10 Intrepid Ibex) pero la mayoría tienen su versión para Windows.
Podemos utilizar pngcrush, una herramienta de código abierto que funciona en línea de comandos (unix, linux, ms-dos) que sirve para optimizar imágenes PNG reduciendo su tamañoo a través de filtros de compresión (sin pérdida de calidad). Primero, para descargarla podemos hacerlo en Ubuntu a través de synaptic o en línea de comandos con:
$ apt-get install pngcrush
Una vez instalado vamos a la línea de comandos y preferentemente a la carpeta donde tenemos la imagen a optimizar y para realizar una optimización general escribiríamos algo como:
$ pngcrush imagen_original.png imagen_resultante.png
Existen muchos más comandos que se pueden utilizar para optimizar imágenes con pngcrush (-rem, -reduce, etc). Cada uno de estos tiene una serie de parámetros que pueden afectar pero si describo muchos este artículo sería demasiado grande, en este caso utilizaremos una opción que automáticamente realiza la prueba de compresión con 136 filtros y elige la mejor obtenida. El comando -brute, la sintáxis de uso es:
Otra herramienta de gran utilidad para reducir tamaño de PNG's es pngquant, lo malo de esta es que si existe perdida de información. Su objetivo es disminuir la paleta de colores que utiliza, yo lo he utilizado en PNGs transparentes y en algunas ocasiones provoca el efecto de ser un GIF. La paleta máxima de colores que se puede asignar con este comando es de 256, para instalarlo en Ubuntu podemos utilizar synaptic o desde línea de comandos:
$ apt-get install pngquant
Después en la carpeta que contiene la imagen en cuestión escribimos algo como:
$ pngquant 56 imagen.png
El resultado de este comando creará en la misma carpeta un archivo imagen-fs8.png con la paleta de colores especificada (en este caso 56 colores). Aquí la comparación de una imagen en su versión normal y su versión en 256 colores (clic en las miniaturas para ver imagen real):
 | Original maggie.png 227.2 KB |  | pngquant (256) maggie-fs8.png 78.6 KB |
Lo normal no es hacer zoom, por lo tanto, no es tan grave el cambio ¿verdad?. Vale la pena (148.6 Kb de reducción) tomarse el tiempo para optimizar nuestras imágenes.
Una herramienta de gran ayuda para reducir el tamaño de varias fotos a la vez es mogrify, proximamente hablaré de esta herramienta en otro artículo.
Tadek Chávez es el editor principal de este sitio. Ingeniero en sistemas computacionales especializado en ciencias de la computación con enfoque en sistemas abiertos. Director de tadzioTek.
Comparte este artículo en tu red social preferida.
Comentarios