Problemas y soluciones

¿Cómo optimizar la carga de imágenes en WordPress?

Uno de los requerimientos más comunes a la hora de desarrollar un sitio web de cualquier índole es el uso de imágenes para presentar de mejor manera los contenidos. Por lo general, cada CMS (Content Management System) cuenta con un sistema de administración que hace más fácil la gestión y uso de estos archivos. En el caso de WordPress esto se hace a través de la sección “Multimedia” del panel de administración, el cual se despliega cada vez que asignas una “imagen destacada” o insertas estos elementos en un post o página.

Una de las particularidades de este CMS es que cuando cargas una imagen el sistema la corta y escala para crear un archivo por cada tamaño registrado en el tema. Por defecto estas dimensiones  son cuatro:

• “full” : Completo, sin cortes.
• “large” : Grande, 640 x 640 px máximo.
• “medium” : Mediano, 300 x 300 px máximo.
• “thumbnail” : Miniatura, 150 x 150 px máximo.

Entonces, en la carpeta “uploads” verás:

• imagen-original.jpg
• imagen-original-640×640.jpg
• imagen-original-300×300.jpg
• imagen-original-150×150.jpg

Estas versiones, con la excepción de “full”, son administrables desde el panel de administración bajo el menú ajustes > medios.

Si bien estos estos tamaños bastan para sitios básicos, es posible que te encuentres en escenarios donde necesitarás otras dimensiones o encuadres. En sitios más grandes que usan custom post types para separar contenido específico, esta es una situación común. En estos casos lo mejor es registrar nuevas versiones que se ajusten al diseño de las plantillas. Para esto existe el método add_image_size que funciona al insertar el siguiente código al archivo functions.php:

add_image_size(‘tamano-pequeno’, 300’) // 300px de ancho sin limite de alto
add_image_size(‘tamano-cuadrado-grande’, 1000, 1000, true) // 1000px de ancho, 1000px de alto y la imagen se cortará para alcanzar estas medidas

Sin embargo, es fácil agregar variaciones sin darnos cuenta de todo el espacio que estas usarán en el servidor. Esto podría causarnos un problema crítico en servidores o hostings con espacio limitado. Para evitarlo puedes limitar la creación de archivos a los tamaños que vayas a necesitar para cada página o post type usando el API de filtros de wordpress. Entonces debes incluir el hook “intermediate_image_sizes_advanced” de la siguiente manera:

add_image_size(‘tamano-pequeno’, 300’) // 300px de ancho sin limite de alto
add_image_size(‘tamano-cuadrado-grande’, 1000, 1000, true) // 1000px de ancho, 1000px de alto y la imagen se cortará para alcanzar estas medidas

function filter_image_sizes($sizes) {
    global $post;
    global $post_type;
	
    // chequeamos si es que existe el post, si no existe significa que estamos subiendo la imagen a través de la sección multimedia
    if( !$post || !is_object( $post ) ){ return $sizes; }

    if($post->post_type == 'mi-post-type'){
        unset( $sizes['tamano-cuadrado-grande']);
    }

    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'filter_image_sizes');

En este ejemplo, una vez ingresado el código en el archivo functions.php, cada vez que pongas una imagen en los contenidos del post type “mi-post-type” se crearán todos los tamaños registrados a excepción del tamaño “tamano-cuadrado-grande”.

Esta es una buena solución para sitios grandes y complejos ya que te ayudará a mantener más limpio y organizado tu servidor.

Ten en cuenta que los cambios no serán retroactivos, esto se puede corregir borrando y subiendo la imagen denuevo o usando un plugin para regenerar los tamaños, te recomendamos Regenerate Thumbnails.