Aprende a usar las miniaturas en WordPress

A día de hoy como contamos en su mayoría con dispositivos cada vez más potentes dejamos a un lado las buenas prácticas para mejorar el rendimiento de nuestro sitio web. En casi todos los sitios webs «normales» el talón de Aquiles en cuanto a velocidad son sus medios (especialmente las imágenes).

Una de las mejores soluciones para solventar esto es utilizar las miniaturas dentro de WordPress. Esto hará que la optimización mejore muchísimo y le ahorres tanto al servidor como al cliente tiempo de carga y espera.

¿Cómo funcionan las miniaturas?

Su principal función es generar diferentes versiones de una imagen (diferentes tamaños) según la miniatura deseada y así conseguir (según la resolución de pantalla de ese momento) imprimir por pantalla una imagen u otra.

Te pongo un poco en contexto para que me entiendas mejor. Imagina que tienes una imagen con unas dimensiones de 1200×1200 pero en la página en la que la quieres poner su tamaño será de 400×400, es cierto que con CSS la puedes limitar en cuanto a tamaño y aspecto, seguro que lo haces y te queda genial. Pero por detrás te estás trayendo una imagen mucho más grande de lo que realmente necesitas, por ende más carga de la que realmente necesitas.

¿No sería mejor que se generara una imagen de las dimensiones que vas a usar a partir de esa que ya habías subido a tus medios? Pues así es exactamente como funcionan las miniaturas en WordPress.

De hecho si inspeccionas elemento en tus imágenes (con miniatura) dentro de tu sitio web verás como a la etiqueta <img> de tu imagen en concreto se le habrá generado una propiedad «srcset» con parámetros y diferentes enlaces de imagen dependiendo de la resolución de pantalla en la que se encuentre.

¿Cómo registrar o añadir miniaturas?

Las miniaturas, para poder seleccionarlas o elegirlas primero deberíamos de registrarla. Esto podemos hacerlo dentro de nuestro ya conocido «functions.php», el que se encuentra en la carpeta de nuestro tema. (No confundir con el functions.php que se encuentra en la raíz de WordPress)

El código a añadir sería el siguiente:

add_image_size('nombre-miniatura', 600, 600, false)

Te lo explico un poco para que entiendas su estructura:

• Empezamos llamando a la función «add_image_size».
• El primer parámetro de la función es el nombre de la miniatura para poder identificarla.
• Como segundo parámetro tenemos la anchura de la imagen (width).
• El tercero sería la altura (height).
• Y por último tenemos el crop, que no es más que el comportamiento de una imagen cuando sufre un recorte. Por defecto siempre viene en false, en caso de ponerla en true la imagen se recortará directamente a las dimensiones especificadas utilizando posiciones centrales.

Como usar las miniaturas ya registradas

El uso más típico y general para las miniaturas que generamos nosotros y creamos desde el código se realiza desde el mismo código a la hora de llamar una imagen con las distintas funciones que WordPress ya nos proporciona. Dentro de estas funciones uno de los parámetros siempre es el de la miniatura.

Por ejemplo, aquí tenemos la función de traer la imagen destacada de un post: get_the_post_thumbnail()

Como podrás ver uno de los parámetros es size, justo ahí se añadiría el nombre que le pusimos a nuestra miniatura.

Miniaturas genéricas

Estas son las comunes y las que vemos desde el editor, por ejemplo cuando subimos una imagen:

En ese desplegable visualizaríamos las miniaturas de las que nos dispone WordPress sin necesidad de registrarlas nosotros mismos.

Estas miniaturas podríamos modificarlas desde nuestro panel de administración en «Ajustes» y «Medios».

¡Y eso es todo! Espero que te haya sido interesante el post y sobretodo que la información te sea de valor para tu conocimiento y tus proyectos. Sin más, nos vemos en el siguiente post 😄