Evitando el uso de imágenes demasiado grandes en WordPress
Cuando desarrollamos una web en WordPress, lo hacemos pensando en la optimización de la misma web. Esa optimización pasa por ofrecer un buen rendimiento al usuario final de la página web.
Pero existe una realidad, tu entregas la web a tu cliente, le explicas que tamaños de imagen debe usar, pero muchas veces, luego hacen lo que quieren.
Seguro que te ha pasado más de una vez, que al cabo de un par de meses, el cliente te contacte para decirte que la web ahora es lenta, y tu entras y resulta que esta usando imágenes que son mucho más grandes de lo que la web necesita (yo he llegado a encontrarme imágenes de varios GB).
Si bien es cierto que con WordPress, al pintar la imagen podemos decirle que tamaño queremos que use, incluso podemos definir todos los tamaños que queramos con add_image_size()
. Eso implica que por cada imagen que se suba se creará una copia en cada uno de los tamaños definidos. Y eso solo hace engordar el espacio del servidor con imágenes que nunca se van a usar.
Es por esto que intento limitar más esta práctica en mis proyectos. Primero lo hice usando las imagenes en «full» y diciéndole a mis clientes que medidas tenían que usar, pero como decía antes, esto no siempre funciona.
Cuando creas módulos o bloques con ACF puedes limitar el tamaño de las imágenes que soporta. ¿Pero qué pasa cuando no puedes limitarlo así?
Lo que se me ha ocurrido es crear una función que valide el tamaño de la imagen. Te explico cómo.
Desglosando el código para limitar el tamaño de las imágenes en el frontend de WordPress
Función Principal tms_validate_image_size()
La función tms_validate_image_size()
permite validar si una imagen cumple con ciertas dimensiones específicas en términos de ancho y alto.
- Recibe 3 parametros:
$attachment_id
el ID de la imagen a comparar-
$width
, es un array opcional, soporta los valoressize
yoperator
. -
$height
, es un array opcional, soporta los valoressize
yoperator
.
-
Obtención de Metadatos de la Imagen: Se obtienen los metadatos de la imagen utilizando la función
wp_get_attachment_metadata()
.
$image_meta = wp_get_attachment_metadata( $attachment_id );
- Verificación de Dimensiones Proporcionadas: Se verifica si se han proporcionado valores para el ancho y el alto. Si están presentes, se comprueba si la imagen cumple con los requisitos dados.
if ( $width !== null && $height !== null ) :
elseif ( $width !== null ) :
elseif ( $height !== null ) :
endif;
-
Comparación de Ancho y/o Alto: Se compara el ancho y/o el alto de la imagen con los valores proporcionados utilizando la función auxiliar
tms_compare_size_with_operator()
.- Ancho y Alto
$width_check = tms_compare_size_with_operator( $image_meta['width'], $width['size'], $width['operator'] ); $height_check = tms_compare_size_with_operator( $image_meta['height'], $height['size'], $height['operator'] ); if ( $width_check && $height_check ) : return true; endif;
- Solo ancho
$width_check = tms_compare_size_with_operator( $image_meta['width'], $width['size'], $width['operator'] ); if ( $width_check ) : return true; endif;
- Solo alto
$height_check = tms_compare_size_with_operator( $image_meta['height'], $height['size'], $height['operator'] ); if ( $height_check ) : return true; endif;
Función Auxiliar tms_compare_size_with_operator()
La función tms_compare_size_with_operator compara el tamaño real de la imagen con un tamaño objetivo utilizando un operador específico.
Esta función recibe 3 parametros:
$actual_size
el tamaño de la imagen a comparar.-
$target_size
el tamaño que queremos comprar. -
$operator
es opcional, acepta diversas opciones(>, >=, <, <=, ==
) y por defecto usa==
. -
Comparación de Tamaño: Se realiza la comparación entre el tamaño real de la imagen y el tamaño objetivo utilizando el operador seleccionado, y se devuelve el resultado de la comparación.
Optimizando el rendimiento de WordPress limitando el Tamaño de las imagenes en el frontend
El codigo completo para copiar.
function tms_validate_image_size( $attachment_id, $width = null, $height = null ) {
$image_meta = wp_get_attachment_metadata( $attachment_id );
if ( $image_meta ) :
if ( $width !== null && $height !== null ) :
$width_check = tms_compare_size_with_operator( $image_meta['width'], $width['size'], $width['operator'] );
$height_check = tms_compare_size_with_operator( $image_meta['height'], $height['size'], $height['operator'] );
if ( $width_check && $height_check ) :
return true;
endif;
elseif ( $width !== null ) :
$width_check = tms_compare_size_with_operator( $image_meta['width'], $width['size'], $width['operator'] );
if ( $width_check ) :
return true;
endif;
elseif ( $height !== null ) :
$height_check = tms_compare_size_with_operator( $image_meta['height'], $height['size'], $height['operator'] );
if ( $height_check ) :
return true;
endif;
endif;
endif;
return false;
}
function tms_compare_size_with_operator( $actual_size, $target_size, $operator = '==' ) {
switch ( $operator ) :
case '>':
return $actual_size > $target_size;
case '>=':
return $actual_size >= $target_size;
case '<':
return $actual_size < $target_size;
case '<=':
return $actual_size <= $target_size;
case '==':
return $actual_size == $target_size;
default:
return false;
endswitch;
}
Limitando el tamaño de las imagenes en el contenido de WordPress
Cuando uno edita y publica una página o artículo en WordPress, puede elegir el tamaño de la imagen que se va usar, entre las medidas estandares, el tamaño original o incluso uno a medida.
Mediante el filtro the_content
podemos usar las funciones explicadas para limitar su uso.
add_filter( 'the_content', function( $content ) {
preg_match_all( '/<img[^>]+>/i', $content, $matches );
foreach ( $matches[0] as $img_tag ) :
preg_match( '/src="([^"]+)"/i', $img_tag, $src );
$attachment_id = attachment_url_to_postid( $src[1] );
if ( tms_validate_image_size( $attachment_id, array( 'size' => 820, 'operator' => '<=' ), null ) ) :
$content = str_replace( $img_tag, '', $content );
endif;
endforeach;
return $content;
} );
Hay que tener en cuenta que esto solo afectará al frontend, en el backend tu cliente va a ver la imágen.