Optimizando imágenes

Las imágenes son recursos muy importantes en una página web. Pero limitan y condicionan la velocidad de carga de la página. Si son de pequeño tamaño y se usan en muchas páginas podemos agruparlas en Sprites CSS. Pero en todo caso con cualquier imagen lo mínimo que podemos hacer es optimizar el tamaño del archivo.

Los formatos PNG o JPG son los más utilizados en la web. Los segundos son preferidos para fotografías y para el resto es mejor usar PNG. Los GIF pueden usarse cuando se requieran imágenes con animación. Todos estos formatos están ya comprimidos, pero puede que contengan un exceso de datos cuya eliminación no quita información a la imagen. Es decir, podemos eliminarlos sin que la imagen modifique un sólo píxel al presentarla en pantalla. Para esta optimización sin pérdida (lossless) podemos usar muchas herramientas.

Una de ellas es la extensión PageSpeed Insights para Chrome, que nos ofrece reglas de optimización entre las que incluye las relativas a las imágenes. Podemos ver más detalles sobre esta regla en la página de información de Google Developers (Make the Web Faster). En la captura de pantalla anterior está el resultado de un test pasado a una página de este sitio, exponiendo la sugerencia para optimizar algunas imágenes de una página. Si pinchamos sobre ese enlace nos dará una relación de imágenes a optimizar como se observa en la siguiente imagen.

PageSpeed nos informa imagen por imagen del ahorro en bytes que podríamos conseguir. Y además nos da otro enlace que lleva a la imagen optimizada. Pinchando ahí se abrirá esa imagen optimizada en una nueva pestaña, desde la cual podemos salvarla a nuestra carpeta del ordenador sobrescribiendo la original.

Esta herramienta nos puede servir cuando tenemos pocas imágenes que optimizar. Pero es un engorro cuando son muchas. Por ahora PageSpeed no nos permite descargar de una sóla vez todo el lote de imágenes de una página web. Además sólo optimiza las imágenes presentes en la página en el momento de ejecutar el test. Puede que hayan otras que no están presentes en ese momento pero sí en otro cuando el usuario lo solicite. En definitiva, para ser eficientes hemos de buscar una herramienta que nos pueda optimizar todo un lote de imágenes, por ejemplo todas las imágenes de una determinada carpeta.

Herramientas para optimizar imágenes

En la documentación de reglas de PageSpeed que mencioné antes expone algunas herramientas de uso libre que podemos utilizar. Para PNG podemos descargar pngout.exe (para Windows buscar PNGOUT.EXE WIN32 command line). Otro para PNG es optipng.exe (para Windows buscar en esa página The Windows (32-bit) build). Para JPG tenemos jpegtran.exe (para Windows buscar Windows binary compilation). Son programas libres (ver autores y licencias al final de esta página) pero para ejecutar desde la línea de comandos. Existen otras herramientas pero estas son muy sencillas de usar y a la vez muy eficientes.

Podemos descargar estos tres optimizadores y guardarlos en una carpeta del disco duro, por ejemplo en la carpeta C://aimg. Para ejecutarlas sobre un determinado archivo que esté ubicado en cierta RUTA podemos hacerlo desde la línea de comandos con acciones como alguna de las siguientes (las dos primeras para PNG y la última para JPG):

C://aimg/optipng.exe -force -o7 RUTA
C://aimg/pngout.exe RUTA
C://aimg/jpegtran.exe -optimize -progressive -copy none -outfile RUTA RUTA   
    

Algunos de estos ejecutables tienen argumentos para optimizar varios archivos o incluso toda las imágenes de una carpeta. Pero la mejor forma de aprovechar estas ejecuciones desde la línea de comandos es automatizarlas con algún archivo batch (archivo de procesamiento por lotes) o incluso con PHP. La función de PHP exec nos permite ejecutar un programa externo, ejecutándolo como si fuera desde la línea de comandos. Usando el marco de herramientas que presenté hace tiempo he construido una nueva herramienta para optimizar imágenes. Es una utilidad sólo para usar en modo localhost dado que no podemos sobrecargar el servidor en producción con estas tareas.

La captura de pantalla del inicio de este apartado es de esa herramienta. Hay una lista de ejecutables y luego seleccionaremos de esa lista los que la herramienta ejecutará. Podemos seleccionar todas las imágenes de una o más carpetas, incluso de forma recursiva. El proceso se hace mediante paginado configurable, lo que permite salvar los Timeout de PHP y Apache (30 y 300 segundos por defecto respectivamente). Al final de cada paginado de proceso nos dará un informe de la reducción conseguida como el siguiente:

PROCESO DE PAGINADO iniciado 22/06/2014 22:24:03
--------------------------------------------------------------------------------
Proceso finalizado.
RESUMEN:Procesados 2 de un total parcial de 2 pendientes de procesar (2 en total
para toda la lista), desde la posición 0 hasta la posición 1.
Procesados = 2
Con error apertura = 0

Duración proceso: 0.511 segundos
================================================================================
[0 PNG] /no-publicable/tools-web/piezas/optimizar-imagenes/samples/img1.png
        OPTIPNG [png]:  Variación -88.6% de 5091 a 581 bytes
[1 JPG] /no-publicable/tools-web/piezas/optimizar-imagenes/samples/img2.jpg
        JPEGTRAN [jpg]:  Variación -6.7% de 12268 a 11451 bytes    
    

En la lista de ejecutables podemos incluir todos los que queramos y luego seleccionamos los que se van a ejecutar. Tras la optimización de las imágenes de una página podemos pasar el test de la extensión PageSpeed para comprobar si alguna imagen puede aún reducirse más. Entonces podemos seleccionar otro ejecutable de la lista para intentar conseguirlo.

Por último hay un par de cosas que anotar sobre esta herramienta:

1. La ejecución sobrescribe el mismo archivo, por lo que no está de más hacer una copia de seguridad de los originales antes de iniciar el proceso de optimización.
2. Los programas externos convierten otros formatos. Por ejemplo, OPTIPNG convierte gif, bmp, pnm y tiff a png y luego lo optimiza. Pero en esta herramienta esta posibilidad no se contempla. Si seleccionamos OPTIPNG sólo optimizará archivos de imagen cuya extensión sea png.

Descarga de la herramienta para optimizar imágenes

Previamente debe instalar, si ya no lo ha hecho, el marco de herramientas. Luego debe descargar esta herramienta en un ZIP de 195 KB y volcar su contenido en las carpeta del marco de herramientas. Los archivos de la descarga contienen:

• Carpeta includes:
  • Script paginador.php
  • Script paginar-optimizar-imagenes.php
  • Script rutas.php
• Carpeta piezas:
  • Carpeta listador-rutas
  • Carpeta optimizar-imagenes

En includes encontraremos el script paginador.php que permite ejecutar procesos largos evitando los Timeout de PHP y el servidor, como dije antes. Es de uso genérico para esta herramienta y otras que estoy usando pero que aún no he presentado en este sitio. El siguiente script paginar-optimizar-imagenes.php ejecuta los programas de la línea de comandos mencionados en el apartado anterior.

Las interfaces para trabajar con cada herramienta están en la carpeta piezas. Una es nueva, el listador-rutas que, mediante el script rutas.php, nos permite seleccionar archivos de determinadas extensiones en una carpeta y, recursivamente, en carpetas hijas si así lo indicamos. Ahí obtendremos una lista de archivos de imagen que luego pasaremos a la interfaz optimizar-imagenes que procesará los ejecutables de la línea de comandos.

Espero que esto le interese a alguién. Si es así y tiene alguna duda con la instalación o ejecución puede consultarme sin compromiso alguno. Termino recordando las licencias de uso y otros detalles:

• Para el software de desarrollo propio puede ver la página de aviso legal de este sitio.
• Esta herramienta usa PHP para ejecutar programas externos de forma equivalente a como si lo hiciéramos con un archivo batch o desde la línea de comandos, no suministrándose dichos programas externos con la descarga anterior. Los que se mencionaron más arriba y otros deberá descargarlos e instalarlos por su cuenta. Algunos detalles sobre autores y licencias de esos optimizadores recomendados:
  • PNGOUT.EXE es una utilidad de Ken Silverman cuya versión para línea de comandos tiene una licencia de software libre para propósito comercial o no comercial. Existe una versión de pago para interfaz gráfica de Windows.
  • En OPTIPNG.EXE contribuyen muchos autores. Sólo tiene versión de línea de comandos y tiene una licencia de software libre también.
  • JPEGTRAN.EXE se encuentra en la página de JPEGclub.org que desarrolla nuevas características JPEG y mantiene el grupo de software Independent JPEG Group, grupo que se encarga de mantener el estándar JPEG.