Aunque atareao.es está montado sobre WordPress, lo cierto es que no siempre ha sido así. Ha sido un largo camino hasta llegar hasta este CMS, y entender que esto era realmente lo que estaba buscando. He pasado por otros gestores de contenido como Jommla o Drupal, y en su momento tuve mis escarceos con Pelican, aunque finalmente, no llegó a cuajar. En todo este camino, algo que siempre me ha preocupado ha sido la velocidad y respuesta del sitio. Pero no tanto por Google, si no mas bien por ti, porque tu experiencia de usuario fuera lo mejor posible. Aunque en esto, evidentemente coincido con Google, en tanto en cuanto ambos buscamos exactamente lo mismo. En este sentido una de mis preocupaciones era el peso de las imágenes. Y de ahí mi incursión en webp y mi preocupación en reducir imágenes para aumentar la velocidad de este sitio. Y no me refiero a reducir las imágenes de tamaño sino mas bien de peso.

Así, en este nuevo episodio del podcast quiero tratar precisamente sobre la solución que he adoptado, es decir, webp y como reducir imágenes y aumentar la velocidad.

Sobre webp, reducir imágenes y aumentar velocidad

Algo que siempre me ha llamado la atención es esa obsesión de poner imágenes de tamaños descomunales y sin ningún tipo de optimización. Mas si cabe, cuando hay determinados sitios que mayoritariamente se consumen desde el móvil. Yo no quiero decir, nada, pero tanta agudeza visual no tiene el ser humano, y que yo sepa, vamos a peor.

En este sentido, es importante tener el cuenta el peso de las imágenes, no solo por el espacio que ocupan en nuestro hosting, sino por la experiencia de usuario de quien las consume. En este sentido, puede llegar a cansarse y abandonar tu sitio si ve que tarda mucho tiempo en descargarse las imágenes.

Pero no solo esto, también está el consumo de datos. Que entre descargar una imagen de 100KB a descargarla de 10MB hay una diferencia considerable, y aunque actualmente, hay quien disfruta de datos ilimitados, tampoco es cuestión de gastar como si no hubiera un mañana.

Por último y no menos importante está el impacto medioambiental. Y es que un mayor peso de tus imágenes, necesitan mas disco, necesitan mayor consumo de datos, y necesitan mas de todos… ¿Para que? Sinceramente, para al final no apreciarlo. Pensemos un poco en estas asuntos.

Un poquito de historia

Además de mi paso por distintos CMS, como Joomla o Drupal, también he utilizado diferentes estrategias a la hora de almacenar las imágenes. Por un lado, para optimizar el espacio que tengo en el hosting, y por otro para optimizar la velocidad de carga.

De Picasa a Google Fotos

En este sentido, como te digo, he pasado por distintas soluciones. La que mas recuerdo y con la que mas tiempo he estado era Picasa. Si ese servicio de Google al que dejaron de dar soporte para centrarse en Google Fotos.

Fíjate hasta que punto tenía clara la estrategia que llegué a desarrollar una aplicación nativa para Linux, que me permitiera trabajar de forma sencilla y cómoda con estas imágenes.

Con la llegada de Google Fotos y las nuevas APIs, todo se fue complicando, cada vez, mas y finalmente, y a costa de un mayor espacio en el hosting me decanté por esta solución.

Optimización de imágenes

Actualmente, como seguramente ya te habrás dado cuenta, la mayoría de las imágenes que utilizo para la portada de artículos, tutoriales y podcasts, provienen de Unsplash. Sin embargo, estas fotos tienen tamaños considerables, y sus pesos, son considerables también.

Por esta razón, realizo dos operaciones, una de reducción de las dimensiones de la imagen, y por otro lado las optimizo para página web. Para ambas cosas utilizo un complemento que hay disponible para GIMP, que permite exportar para la web, consiguiendo imágenes que se adaptan a mis estándares. Básicamente, imágenes de unas dimensiones de 1200×800 pixel y de un peso en torno a los 100KB.

Esta misma imagen es la que añado a los mp3 para que vayan con su correspondiente carátula como mandan los cánones.

Webp y WordPress

Antes de hablarte sobre Webp te tengo que explicar porque no lo he utilizado todavía en atareao.es. La razón es sencilla, y es que hasta el momento no estaba soportada. Sencillamente así de claro. Era un problema de la operación de redimensionamiento que realiza WordPress.

Sin embargo, en el lanzamiento de la última versión de WordPress, la 5.8, entre otras características, se ha añadido este soporte, con lo que me he decidido a ir cambiando las imágenes comunes, que se encuentran en todas las páginas a este nuevo formato.

El resto de imágenes, las que se refieren a las portadas, al menos de momento, se van a quedar en el formato en el que se encuentren, y ya veremos si esta tarea la emprendo algún día.

Sin embargo, para el caso de los nuevos artículos, tutoriales, y podcasts, estos ya incorporarán este nuevo formato webp. Por supuesto, no me refiero a la carátula que incorporo en los mp3 que seguirán en JPEG, hasta nueva orden.

Sobre Webp

Ahora que ya te he hablado de mi evolución toca que cuente algo sobre webp. Se trata de un nuevo formato desarrollado pensando en la Web, que proporciona mayores tasas de compresión tanto con como sin pérdida. Para que te hagas una idea,

• Comparando webp con PNG y sin pérdida, webp es del orden de un 26% inferior a PNG.
• Por el otro lado, para el caso de con pérdida, y comparando con JPEG, la reducción va de un 25 a un 35%.

Pero además en el caso de utilizar una reducción con pérdida y transparencia, es posible conseguir imágenes de una tercera parte del peso de una PNG.

Webp en Linux

El siguiente problema con el que te podrías encontrar, y digo podrías, porque en principio no te lo encontrarás, es como trabajar con webp en Linux. Así que le damos un repaso a las herramientas que utilizo con frecuencia,

• GIMP está perfectamente adaptado, en el sentido que te permite tanto leer como exportar a webp, sin necesidad de ningún complemento adicional. Eso si, te tengo que dar una mala noticia, y es que la herramienta de guardar para la web, no te permite esta opción. En mi caso, no es mayor problema, porque como te comentaba anteriormente, las portadas del podcast las tengo que mantener, al menos de momento, en JPEG.
• Miniaturas o thumbnails. Puedes previsualizar o tener las miniaturas utilizando el thumbnailer que implementé hace ya algún tiempo y que puedes encontrar en el artículo sobre miniaturas de archivos webp en Ubuntu. En este artículo te explico como puedes crear tu tu propio miniaturizador o bien utilizar directamente el que implementé en su momento.
• CLI. Para la línea de comandos tienes cwebp. La instalación es muy sencilla, tan solo tienes que ejecutar sudo apt install webp, y punto. A partir de este punto, para convertir,

cwebp <archivo de entrada> -o <archivo de salida>

Tan sencillo como esto.

Sobre mi uso

Como te decía, yo lo estoy utilizando para todos los iconos que aparecen en la página web. Todos estos iconos estaban en formato PNG con trasparencia, con lo que pasarlo a Webp, parecía lo mas recomendable, aunque ha sido un trabajo un poco cansado, porque no decirlo.

Todas estas imágenes se encuentran directamente en la página web, o en algunos casos, en la hoja de estilo.

Así el caso de que esté en la hoja de estilos tiene este formato,

background-image: url("data:image/webp;base64,XXXXXXXXX")

Donde XXXXXX es la imagen codificada en base 64. Mientras que en el caso que estén en el propio HTML es algo similar a lo que te muestro a continuación,

<img src="data:image/webp;base64,XXXXX>"

Como te digo, antes estaban en formato PNG. Algunas las he renovado, mientras que otras las he convertido directamente de PNG a webp, utilizando el siguiente script

entrada=$1
if [ ! -z "${entrada}" ]
then
    echo "${entrada}" | base64 -d > temporal.png
    cwebp temporal.png -o temporal.webp
    cat temporal.webp | base64 | xclip -sel clip
    rm -rf temporal.png temporal.webp
fi

Con este simplemente me quedaba pegarlo en la hoja de estilos o en el propio HTML desde el portapapeles.

En el caso de utilizar un archivo PNG, la operación es muy similar, tal y como te muestro a continuación,

archivo=$1
if [ -f "${archivo}" ]
then
    temporal="${archivo/.png}.webp"
    cwebp "${archivo} -o "${temporal}"
    cat "${temporal}" | base64 | xclip -sel clip
    rm -rf "${temporal}"
fi

Los he ido haciendo uno a uno, aunque realmente podría haber utilizado un bucle para hacerlos todos de un golpe. Sin embargo, ha sido una labor mas artesanal y de curado en tanto en cuanto, quería revisar todos los iconos y ver si tenía que cambiar alguno.

Conclusión

Esto es lo que he estado haciendo estos últimos días, venga a convertir, venga a convertir. También en algunos casos, a renovar algún que otro icono, para lo que he utilizado en todo caso, los iconos de Material Design, que son los que mas me gustan y me llaman la atención para el proyecto atareao.es. Al menos de momento.

Lo cierto es que después de esto, no he visto la mejora de rendimiento en la página. Si que he revisado el Google Page Speed y está espectacular, de 99 para móviles y de 100 para ordenadores… ¿que mas se puede pedir?

---

Espero que te haya gustado este nuevo episodio del podcast. Si puedes, te agradecería una valoración en iVoox y/o en Apple Podcast.

La entrada Sobre webp, reducir imágenes y aumentar velocidad aparece primero en Atareao.