En esta ocasión les traigo un par de herramientas para optimizar el peso de las imágenes. Para bien o para mal, reducir el tamaño del contenido en internet es una tarea importante si se intenta brindar una mejor experiencia de navegación a todos nuestros usuarios, ya que no es lo mismo transmitir una imagen de 3kb a una de 231kb a través de redes móviles o lentas conexiones DSL. ¡Te sorprenderá lo mucho que puedes mejorar la carga de tus contenidos!
Antes de comenzar, le pediremos a Google un informe sobre lo que podemos mejorar en nuestra página. Para ello, cargaremos nuestra página en PageSpeed Insights. El informe que nos presenta nos dará un porcentaje acorde a diversos parámetros como la carga de código JavaScript, tamaño de elementos presionables (enlaces y botones) e imágenes que puedan ser optimizadas en peso.
Con informe en mano podemos proceder a optimizar los recursos que allí se mencionen (ojo que solo revisa el enlace que le entreguemos, no el sitio completo). En caso de que lo prefieras, puedes tomar el directorio de imágenes completo y optimizar todo su contenido.
Pero antes de pasar a la optimización del peso, aprovecharemos de redimensionar las imágenes. Si el contenido está pensado para ser visualizado a 300 px de ancho, no tiene sentido presentarle al usuario una versión de mayor tamaño, como podría ser una fotografía de 8 o más megapíxeles. Muchas veces los usuarios ven el contenido tal como es presentado y no lo agrandan. Si encuentras necesario tenga la posibilidad de acceder a una versión de mayor tamaño, puedes tener ambas versiones en el servidor, enlazando desde la miniatura a la versión completa.
Otro punto relacionado a preparar el contenido es seleccionar el formato. Este puede ser jpg para fotografías y contenido de gran cantidad de detalles, png para gráficos de computadora, en especial si cuentan con amplios sectores de color uniforme, y gif en caso de querer presentar animaciones donde la calidad no sea importante.
Pasando a la reducción del tamaño de los archivos, en el caso de las imágenes JPG usaremos jpgtrans. Esta app en Windows es fácil de usar si tienes nociones básicas de la línea de comandos. Para facilitar las cosas, te recomiendo coloques la imagen a tratar en la misma carpeta que el .exe de la aplicación. Estando en la carpeta en la línea de comandos, ejecuta el comando «jpgtran -optimize entrada.jpg > salida.jpg». Donde «entrada» coloca el nombre del archivo a tratar, y en «salida», el nombre del archivo resultante. Esta reducción de tamaño es sin pérdida respecto del archivo con el que trabajes de base (recuerda que jpg es un formato de compresión con pérdida, por lo que la calidad ya se vio algo afectada), aunque perderás los metadatos del fichero. Paint.net las suele comprimir bastante bien, por lo que si las guardaste con ese programa no es necesario las pases por este.
En el caso de los archivos png, pngout realizará el trabajo. En caso de que esta aplicación no pueda comprimir el archivo, no generará cambios al archivo. El comando a utilizar es «pngout /y archivo». Donde «archivo» va el nombre del archivo, y «/y» es para que sobrescriba el original sin consultar. No es necesario coloques la extensión del archivo si este es un png, pero si ingresar un jpg colocando la extensión debida, te generará una versión png sin borrar el original.
Otras herramientas que puedes utilizar, que cuentan con interfaz gráfica, son PNGGaunlet (Windows) RIOT (Windows, avanzado), Trimage (Linux), ImageOptim (Mac).
Para terminar, recomendaría hacer uso de la cache de los navegadores, especialmente si haces uso de una misma imagen en varias páginas de tu web. De esta manera le ahorrarás al usuario el tener que bajar constantemente ese archivo. Para definir la duración de las imágenes en cache debes añadir el siguiente apartado en el archivo .htaccess de tu servidor.
ExpiresActive On
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpg A604800
Un valor de «A604800» es una semana, mientras que «A3600» es una hora y «A2592000» un mes, todos desde el acceso en el cual se guardó en caché el contenido por parte del navegador. Recuerda que si modificas el archivo manteniendo su nombre, los usuarios que tengan una versión en caché anterior no lo verán reflejado hasta que deban renovar la caché.