TruquiTrucos Dev – Controlar el tamaño de las imágenes de tu biblioteca de medios

En casi todas las webs del mundo las imágenes son las que se llevan la mayor parte del ancho de banda… Bueno, miento: en portales como YouTube lo que más pesa son los vídeos ? y en muchas otras páginas web lo que más pesa son los malditos anuncios de publicidad ?. Pero si hablamos de una web «normal», coincidirás conmigo en que lo que más pesa y, por lo tanto, una de las primeras cosas que deberíamos optimizar son las imágenes ?.

Buscando información sobre el tema encontré este artículo sobre la optimización de imágenes en Google. En el artículo explican un montón de técnicas sobre qué podemos hacer para reducir el número de bytes que enviamos a nuestros usuarios, detallando el funcionamiento de cada una de ellas y recomendando cuándo usar una u otra. Una gozada de artículo, vamos. Y, encima, lo tienes en perfecto castellano. ¿Qué más se puede pedir?

Según podemos ver en la entrada enlazada, existen básicamente dos mecanismos para reducir el tamaño de las imágenes:

1. Eliminarlas de tu web. Obvio, ¿no? Si te cargas la imagen, ya nadie va a tener que descargarse los bytes que ocupa ?. Lo sé, lo sé, estoy planteando una solución demasiado radical. Pero es que, en realidad, no se trata de eliminar la imagen y ya está, sino que hay que sustituirla por el formato adecuado. Aunque si hubiera empezado por ahí, ¿dónde estaría el drama? Hay que crear un poco de tensión para despertar tu interés por la mañana. Por ejemplo, en los primeros compases del mundo web era muy habitual tener títulos (es decir, texto) en formato imagen, ya que de esta forma podíamos usar tipografías chulas con efectos curiosos. Y lo mismo con los botones, las esquinas redondeadas, las sombras… todos estos efectos visuales los conseguíamos a través de imágenes prediseñadas. Hoy en día, con el advenimiento de las fuentes web y los estilos CSS3, todo eso es innecesario y, de hecho, el resultado que obtenemos con las nuevas tecnologías es infinitamente mejor al que teníamos hasta la fecha.
2. Seleccionar el formato adecuado. No siempre es posible eliminar la imagen como tal. En muchísimos casos necesitamos sí o sí meterla en nuestra web. Piensa, por ejemplo, en las imágenes destacadas de tus entradas. O en esos fantásticos GIFs de gatitos tocando el piano. En aquellos casos en los que sencillamente no podemos prescindir de la imagen tenemos que seleccionar el formato adecuado. Si la imagen es dinámica necesitaremos un GIF. Si es una fotografía, probablemente sea un JPG. Una captura de pantalla puede verse mejor (y ocupar menos) en formato PNG. Ilustraciones, logos y demás funcionan muy bien (¡y encima escalan!) en SVG.

Hasta aquí confío en que no te he descubierto nada nuevo, ¿no? La idea general es que uses imágenes cuando toque con el formato adecuado. Pero, claro, esto no es ningún truquitruco, no te estoy enseñando nada nuevo ni interesante…

El problema

El problema al que normalmente nos enfrentamos el equipo de Nelio en nuestro blog es siempre el mismo: aunque somos plenamente conscientes de la importancia que tiene limitar el tamaño de las imágenes que subimos a nuestra biblioteca de medios, hay veces en las que nos despistamos y subimos imágenes de varios megas.

Por ejemplo, echa un vistazo a la imagen que encabeza esta entrada. Como tantas otras en nuestro blog, la imagen la hemos obtenido de Unsplash, una web con más de 200.000 imágenes en alta resolución totalmente gratuitas y cuya licencia te permite usarlas como quieras (de hecho, ni tan siquiera es necesario poner un enlace para dar crédito al fotógrafo que tomó la foto, aunque nosotros siempre lo hacemos al final de nuestras entradas). Si descargas la imagen destacada directamente, descubrirás que ocupa ¡más de 2MB! Y es que su resolución es, ojo al dato, de 4.672 x 3.104 px.

Obviamente, no podemos usar una imagen tan, tan grande en nuestra web; no tiene ningún sentido. Y el problema es aún mayor si nos hacen hotlinking. Tenemos que hacer algo para arreglarlo. Pues bien, el proceso que seguimos en Nelio para añadir una imagen destacada a nuestras entradas es siempre el mismo:

1. Buscamos una imagen que esté más o menos relacionada con el contenido de nuestra entrada en Unsplash (o seleccionamos una que sencillamente nos guste).
2. La descargamos a nuestro ordenador local.
3. La escalamos y recortamos según nos convenga. Por norma general, las dejamos de 1.200 x 800 px.
4. Guardamos una copia de la imagen con la nueva resolución y modificamos los parámetros de compresión JPG para que ocupe aún menos espacio. A veces, incluso, usamos servicios como compressjpeg.com para realizar dicha compresión sin tener que pensar demasiado.
5. Subimos la imagen a la biblioteca de medios de WordPress y la usamos.

Pero, claro, somos humanos, entran tickets de soporte o llamadas que interrumpen tu flujo de trabajo y… ¡vaya! estás subiendo una imagen de Unsplash sin haberla escalado ni comprimido ??‍♂️. ¡Dos megas y medio que van directos a tu biblioteca de medios!

Nelio Popups

¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.

Juan Hernando

WordPress.org

Descarga gratis

Versión premium

La solución

La solución pasa por reconocer que nos vamos a equivocar queramos o no y, por lo tanto, que necesitamos establecer un mecanismo de control que evite el error. En otras palabras, necesitamos que WordPress no nos permita subir imágenes tan grandes a la biblioteca de medios. ¡Así de sencillo! Si limitamos el tamaño máximo de imagen que WordPress nos permite subir a la biblioteca, ya nunca más subiremos imágenes excesivamente grandes (porque sencillamente no podremos). ¿Cómo? Con este sencillo código:

Como puedes ver, tenemos una función que se «engancha» al hook wp_handle_upload_prefilter. Tal y como podemos leer en la documentación de WordPress, se trata de un filtro que se ejecuta justo antes de que la imagen se guarde en la biblioteca de medios, permitiéndonos hacer cosas como cambiarle el nombre o determinar el directorio en el que la guardaremos. En nuestro caso, lo que hacemos es:

1. Recuperar el tamaño del fichero en kilobytes (líneas 4 y 5)
2. Comprobar que se trata de una imagen (líneas 6 y 7)
3. Comprobar que las imágenes no exceden el tamaño máximo que hemos establecido (líneas 8 a 13).
4. Si se excede el tamaño máximo, añadimos un error a la variable de entrada $file, con lo cual impediremos que la imagen se pueda crear.

Con ello, si intentamos subir la imagen de 2,5 MB de Unsplash, veremos el siguiente error:

Y eso es todo por hoy. ¡Por cierto! Si no sabes dónde tienes que poner el fragmento de código que acabo de compartir, lee este truquitruco que publicamos hace unas semanas sobre cómo personalizar tu WordPress con tu propio plugin; allí encontrarás la respuesta ?

Imagen destacada de Ksenia Makagonova en Unsplash.