Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
limite tamaño imagenes

Limita el tamaño en píxeles en la subida de imágenes

¿Quien no se ha encontrado alguna vez con algún cliente o colaborador que sube imágenes a máxima resolución y calidad recién salidas de su cámara reflex de un hipermegalón de pixeles?

Este hecho puede repercutir de forma muy negativa en los tiempos de carga de tu web, por ende en la experiencia de usuario e incluso el posicionamiento SEO. Subir imágenes de grandes dimensiones es un error, conocido como Serve Scaled Images.

Debemos pensar en el diseño que tiene nuestro sitio. Si tenemos un diseño en el que las imágenes más grandes tienen un ancho máximo de por ejmplo 1.024 pixeles, subir imágenes por encima de ese tamaño es un error. El navegador cargará una imagen de más peso inútilmente. Por lo tanto, ¿no sería ideal avisar al usuario que sube una imagen grande a WordPress de que está sobrepasando el límite?

 

Evita el Serve Scaled Image limitando el tamaño de imagen permitido

Vamos a evitar que un usuario pueda subir imágenes superiores en tamaño a unas dimensiones definidas. En este ejemplo limitaremos para que no pueda subir imágenes superiores a 1.024 x 768px. Simplemente añadimos en el functions.php de nuestro tema:

function check_valid_image_size( $file ) { $allowed_mimetypes = array('image/gif', 'image/jpeg', 'image/png', 'image/bmp'); if (!in_array($file['type'], $allowed_mimetypes)){ return $file; } $image = getimagesize($file['tmp_name']); $maximum = array( 'width' => '1024', 'height' => '768' ); $image_width = $image[0]; $image_height = $image[1]; $too_large = "Image dimensions are too large. Maximum size is {$maximum['width']} by {$maximum['height']} pixels. Uploaded image is $image_width by $image_height pixels."; if ( $image_width > $maximum['width'] || $image_height > $maximum['height'] ) { //add in the field 'error' of the $file array the message $file['error'] = $too_large; return $file; }else { return $file; } } add_filter('wp_handle_upload_prefilter', 'check_valid_image_size');

Actuamos sobre el filtro wp_handle_upload_prefilter. Lo primero que hacemos es establecer un array de mime-types, y en caso de que el archivo a subir no corresponda a una imagen, siga el proceso por su camino y no se ejecute el resto del código.

A continuación comprobamos que la imagen no sea más ancha de 1024px o más alta de 768px. En caso de producirse una de estas dos condiciones, devolvemos un error y el archivo no se subirá. Además el usuario verá un aviso en pantalla advirtiéndole de esto.

 

Evitar que las imágenes se estiren y se pixelen

El caso contrario también puede ser malo. Es decir, si se suben imágenes más pequeñas de lo que deberían ser, la imagen puede estirarse y perder calidad. No influirá en los tiempos de carga pero si en dar una imagen mala de tu sitio. Podríamos añadir al código anterior una comprobación para no permitir subir imágenes inferiores a 300 x 300 por ejemplo:

function check_valid_image_size( $file ) { $allowed_mimetypes = array('image/gif', 'image/jpeg', 'image/png', 'image/bmp'); if (!in_array($file['type'], $allowed_mimetypes)){ return $file; } $image = getimagesize($file['tmp_name']); $minimum = array( 'width' => '300', 'height' => '300' ); $maximum = array( 'width' => '1024', 'height' => '768' ); $image_width = $image[0]; $image_height = $image[1]; $too_small = "Image dimensions are too small. Minimum size is {$minimum['width']} by {$minimum['height']} pixels. Uploaded image is $image_width by $image_height pixels."; $too_large = "Image dimensions are too large. Maximum size is {$maximum['width']} by {$maximum['height']} pixels. Uploaded image is $image_width by $image_height pixels."; if ( $image_width < $minimum['width'] || $image_height < $minimum['height'] ) { // add in the field 'error' of the $file array the message $file['error'] = $too_small; return $file; }elseif ( $image_width > $maximum['width'] || $image_height > $maximum['height'] ) { //add in the field 'error' of the $file array the message $file['error'] = $too_large; return $file; }else { return $file; } } add_filter('wp_handle_upload_prefilter', 'check_valid_image_size');

De este modo podremos controlar que nadie suba imágenes más pequeñas o más grandes de lo que definamos, evitando que las imágenes se puedan pixelar o pesen demasiado respectivamente.

Puede que también te interese

Añade el código de Google Analytics a tus páginas AMP en WordPress
Añade el código de Google Analytics a tus páginas AMP en WordPress
Las páginas AMP cada día adquieren mayor importancia por su relevancia en los resultados de búsqueda en dispositivos móviles. Hace unos meses escribí un post…
Insertar un anuncio entre el contenido de un post
Insertar un anuncio entre el contenido de un post
Seguro que has visto en más de una ocasión páginas web que insertan anuncios o contenidos relacionados entre medias del propio contenido. De hecho yo lo tuve…
WP-CLI Parte 8, Scaffold: genera esqueletos de código para post types, taxonomías, plugins, child themes…
WP-CLI Parte 8, Scaffold: genera esqueletos de código para post types, taxonomías, plugins, child themes…
1. Instalación y primeros pasos 2. Instalando WordPress y primeros pasos y configuraciones 3. Trabajando con posts 4. Trabajando con usuarios 5. Trabajando con la…
Sanitizando: cómo validar y escapar datos en WordPress
Sanitizando: cómo validar y escapar datos en WordPress
En éste artículo vamos a aprender a hacer un tratamiento de datos correcto en WordPress. Éste punto es imprescindible para cualquier desarrollo a medida que…