Optimización de imágenes para carga rápida

---

Erdosain84 dijo:

Nota: este artículo es un copy/paste de un tema que hice para la Comunidad Dibujante, por lo tanto su redacción está enfocada al tema del dibujo. Sin embargo lo transcribo en este post ya que considero que su información puede serle útil a cualquier usuario de Taringa.

¡Hola, compañeros!

En los últimos meses he notado como muchos usuarios suben imágenes muy pesadas (sobretodo escaneos) a temas que suelen durar cargando una eternidad, esto puede afectar la exposición de tu trabajo ya que muchos usuarios impacientes (como yo a punto de salir para el trabajo) no van a esperar a que el tema cargue por completo y probablemente se pierdan de tu talento.

¿Cómo solucionar esto?

Pues bien, existen varios métodos y soluciones que podemos emplear (algunas más obvias, otras más complejas), vamos a enumerar y a explicar algunas:

1 ● Un tamaño consecuente

Esta es quizá la manera más sencilla y obvia de acelerar el tiempo de carga de tus dibujos. Taringa desplega imágenes en los temas a una anchura máxima de 700px, por lo tanto si subís a un servidor, por ejemplo, un escaneo de tu dibujo a 2000px de ancho vas obtener el mismo resultado cuando lo agregués al tema que si hubieras subido la imágen a un tamaño menor... excepto por el hecho de que tu tema va a tardar muchísimo más cargando.

Ejemplo:

A continuación se presentaran dos barras negras. Las dos lucen del mismo ancho pero sin embargo un archivo tiene 2000px de ancho y el otro tan solo 700px, si no me creen, le dan click derecho a las imágenes las guardan y las comparan en sus computadoras (la imágen que luce más pequeña paradójicamente pesa más que la que luce más grande, por lo tanto, tardó más en cargar).



2 ● Uso de thumbnails o vistas previas/Uso eficiente de BBCode

¿Qué sucede si deseamos exponer nuestro trabajo a un mayor tamaño para mostrar los detalles? Pues aquí les traigo una solución: crea dos versiones de tu imagen: una pequeña y una grande. Agrega en el tema la imágen pequeña y luego crea un enlace sobre esta hacia la imagen a tamaño completo. Ahora solo ponle un rotulito que diga algo así como: "click en la imagen para ver a tamaño completo" y listo.

Ejemplo:

Este código (lo que está en gris no tiene mucha importancia):



Queda así:



3 ● El formato adecuado

La mayoría de los editores gráficos Adobe Photoshop, Corel PaintShop Pro, GIMP, etc, te ofrecen diferentes herramientas para modificar algunos atributos de formato de nuestras imágenes, algunos se pueden aplicar desde las herramientas de los menús del programa y otras por medio de optimizadores u opciones disponibles a la hora del guardado.

Dando por descontado los archivos flash y los formatos de vectores para web, vamos a hablar de los tres formatos de imágenes más populares en internet: GIF, JPG y PNG.

GIF (Graphics Interchange Format) ● Permite gráficos animados, pero en su versión de imagen estática suele ser el más ligero de los tres (pero solo para imágenes no muy grandes). Posee una paleta de 256 (o menos) colores indexados por lo que sirve solo para imágenes con grandes áreas de un mismo color (de lo contrario puede haber gran pérdida de calidad). Permite transparencia de un canal (o sea, un pixel puede ser transparente o no, pero no puede ser "medio transparente" ).

JPG/JPEG (Joint Photographic Experts Group) ● Este es por mucho el formato con el que todos hemos tratado. El JPG no permite paletas de color indexado, por lo tanto los códigos de color se guardan pixel por pixel, pero utiliza algoritmos de compresión que reducen notablemente el tamaño de la imágen a costa de una relativa pérdida de calidad, por lo tanto mientras más comprensión le pidas al archivo más calidad se va a perder (lo normal es un 20% de comprensión). Este formato no permite animación ni ningún tipo de transparencia.

PNG (Portable Network Graphics) ● Este es el formato más versatil de los tres ya que se puede configurar de diversas maneras. La información de color se puede guardar como color indexado o pixel por pixel, soporta transparencia y lo más importante: soporta transparencia de canal alfa ¿Esto que quiere decir? Que los pixeles pueden tener diferentes niveles de transparencia, por ejemplo, si dibujás un círculo azul a un 50% de transparencia en photoshop, lo guardás en formato PNG y lo publicás en una página con fondo blanco se va a ver celeste pero si lo publicás en una página con fondo amarillo se va a ver verde. Este formato no soporta animación y si no lo sabés configurar bien es mejor solo usarlo si necesitás transparencia de canal alfa, de lo contrario, puede hacer tus imágenes más pesadas de lo necesario.

Si sentís que esto de elegir el formato y la configuración correcta es un tanto complicado, te anuncio que existen programas y servicios que te harán la vida más fácil a la hora de optimizar una imágen. Podemos citar los siguientes:

Optimizadores para web de Adobe y Corel ● Estos optimizadores vienen incluidos en el software Photoshop y Paintshop Pro respectivamente. Se accesa a ellos mediante las opciones guardado y exportado del menú archivo.

Optimizadores de imágenes online ● Existen sitios web que te ayudan paso a paso en el proceso de optimizar una imágen o, en el mejor de los casos, lo hacen por vos. Dos muy buenos son los siguientes:
▪ Optimizador de imágenes de DynamicDrive
▪ Optimizador de imágenes de SiteReportCard
▪ Smush.it de Yahoo!

Software para la optimización de imágenes ● De internet podés descargar diversas utilidades especializadas en la optimización de imágenes, de bajo peso y licensia gratuita. Los sitios oficiales de algunas de estas utilidades son:
▪ SuperPNG (extensión para Adobe Photoshop)
▪ RIOT - Radical Image Optimization Tool ◄ Recomendado
▪ PNGGauntlet

Ejemplos:

Las siguientes imágenes están guardadas en diferentes formatos y diferentes configuraciones de estos. Si las observan con detenimiento encontraran las diferencias. Debajo de cada una pongo algunos datos de formato, configuración y peso del archivo para que las comparen. Todas las imágenes tienen el mismo tamaño: 230x230px.



4 ● Sentido común

Nuestra última y mejor arma contra los largos tiempos de carga de las imágenes es nuestro sentido común. Si queremos, por ejemplo, mostrar el proceso de un dibujo y tenemos 20 imágenes de proceso y un dibujo terminado, una buena manera de mostrarlo sería tomar las 20 imágenes de proceso, reducirles el tamaño, guardarlos en un formato de color indexado y mostrar solo en tamaño grande y en un formato exigente nuestro dibujo terminado... o en todo caso armar un video y subirlo a YouTube. Si somos creativos para el dibujo de fijo que podemos ser creativos para mostrar nuestro trabajo de una manera más accesible para nuestros espectadores virtuales.





Nota: todas las imágenes usadas en este tema son de mi propia autoría.