¿Por qué WordPress recorta automáticamente todas mis imágenes?
Soy nuevo en WordPress, cuando subo cualquier imagen, WordPress la recorta automáticamente en sus propios tamaños que no he especificado en la sección de medios (Ajustes » Medios).
La configuración que guardé en medios es:
Y cuando reviso en el directorio, se recorta automáticamente en estos tamaños:
¿Cómo está sucediendo esto?
WordPress por defecto está diseñado para generar 3 tipos de recorte para cualquier imagen subida (Medios):
- Miniatura (normalmente 150px × 150px)
- Mediano (normalmente 300px × 300px)
- Grande (normalmente 1024px × 1024px)
Esto es para garantizar la velocidad del sitio con diferentes tamaños donde sea necesario. Entonces, al subir la imagen Original habría al menos 4 archivos:
- El Archivo Original (sin recortar),
- Grande,
- Mediano, y
- Miniatura.
Como ya sabrás, desde /wp-admin/options-media.php
, también puedes cambiar las dimensiones predeterminadas de los tamaños. Así que aún puedes usar los tamaños predeterminados para tu propósito personalizado. Pero si aún necesitas un nuevo tamaño además de los tres, WordPress también te permite agregar nuevos tamaños de imagen.
Usando la función add_image_size()
con tus parámetros deseados, puedes agregar un nuevo tamaño para tu sitio. Usa la función en tu functions.php
para agregar el tamaño de imagen que desees:
add_image_size( $name, $width, $height, $crop );
Donde —
$name
: string escribe el nombre entre comillas simples, ej. 'portfolio'
$width
: integer escribe el ancho que deseas, ej. 500
(en px)
$height
: integer escribe el alto que deseas, ej. 300
(en px)
$crop
: boolean escribe true
si deseas un recorte fijo de la imagen, de lo contrario usa false
Normalmente podemos llamar diferentes Imágenes Destacadas en cualquier lugar de nuestro tema usando:
the_post_thumbnail( 'medium' ); //mostrará solo el tamaño mediano de la imagen original
Si deseas usar tu nuevo tamaño, usa:
the_post_thumbnail( 'portfolio' ); //como nombré mi tamaño como 'portfolio'
ADVERTENCIA: Como, por defecto WordPress genera 3 tamaños de imagen personalizables, está creando 4 archivos por cada imagen. Usar más tamaños nuevos aumentará el número de archivos en tu alojamiento del sitio. Por lo tanto, usar más tamaños de imagen puede ser un problema para el espacio de alojamiento de tu sitio— consumirá más espacio.
EDITAR
Y después de agregar cada nuevo tamaño de imagen, un plugin muy importante es:
» Regenerate Thumbnail — Plugin de WordPress
En realidad, el nuevo tamaño de imagen asignado solo estará disponible para las imágenes recién subidas. Entonces, para obtener el nuevo tamaño para todas las imágenes subidas anteriormente, necesitarás instalar el plugin y regenerar todas las miniaturas nuevamente. Sería una medida única que duraría para siempre*.
Y tu respuesta principal debería ser:
Velocidad del Sitio: WordPress recorta imágenes para aumentar la velocidad del sitio. Si usas Google PageSpeed, sabrás que sugiere:
Servir imágenes escaladas
Dimensionar correctamente las imágenes puede ahorrar muchos bytes de datos.
Aprende Más
EDITAR 2
Como ya te han sugerido, si tu plugin usa una función similar add_image_size()
, puede crear un nuevo tamaño de imagen. Entonces, después de desactivar tus plugins, si usas el plugin Regenerate Thumbnails para regenerar las miniaturas, obtendrás los tamaños reales. Si eso no ayuda, revisa el archivo functions.php
de tu tema o cualquier archivo de funciones agregado en busca de dicha función add_image_size()
, y ahora sabes qué hacer.

Sí, WordPress redimensiona y recorta todas las imágenes dependiendo de lo que tu tema haya definido, como @Gerard ya explicó en su respuesta. Así que el último argumento booleano en add_image_size()
es para recortar o no. Ten en cuenta que esto no define la posición del recorte. Para modificar ese comportamiento, mira esta respuesta como ejemplo.
¿Qué pasa dentro del núcleo?
Como ya has visto en el código fuente de add_image_size()
, WP usa la global $_wp_additiona_image_sizes
para almacenar y manejar los ajustes para la generación de tus imágenes. Ahora, cuando subes una imagen, entra en juego la clase WP_Image_Editor
y - dependiendo de las extensiones de PHP habilitadas en tu servidor - llama a WP_Image_Editor_GD
o a WP_Image_Editor_Imagick
. Ambas clases Singleton tienen un método resize()
que llama a image_resize_dimensions()
. Al final, image_resize_dimensions()
no redimensiona ni recorta la imagen. Solo calcula los valores.
Esto se hace mediante el método crop()
en la clase Imagick y usando la función nativa de PHP imagecopyresampled()
dentro de la clase GD.
¿Cómo deshabilitar el recorte?
Primero, tenemos muchas posibilidades:
- Detectar qué clase está en uso (qué extensión de PHP es soportada) y luego interceptar lo que sea que se use para recortar (ver arriba).
- Cortocircuitar todo el proceso y dejar que
image_resize_dimensions()
haga su trabajo.
Usaremos el segundo método aquí. Siéntete libre de añadir tu propia solución como una respuesta separada. Esto es lo que el núcleo nos ofrece: Un filtro que contiene todos los parámetros.
$output = apply_filters( 'image_resize_dimensions', null, $orig_w, $orig_h, $dest_w, $dest_h, $crop );
El primer argumento es null
, lo que le indica al núcleo en la siguiente línea si queremos sobrescribir lo que esta función hace internamente - y reemplazarlo con nuestro propio comportamiento - o no. Así que si devolvemos cualquier cosa aparte de null
, entonces esto es lo que el núcleo usará. Ten en cuenta que puedes poner cualquier cosa allí, pero aún así el núcleo esperará el mismo valor de retorno que image_resize_dimensions()
usa por defecto. De los comentarios en el código:
El array de retorno coincide con los parámetros de
imagecopyresampled()
:
int dst_x, int dst_y,
int src_x, int src_y,
int dst_w, int dst_h,
int src_w, int src_h
Ahora, para simplemente deshabilitar el recorte tendríamos que reemplazar (en otras palabras: clonar) todo el funcionamiento interno - algo que queremos evitar. Por lo tanto, usamos un "filtro de una sola vez" que se deshabilita a sí mismo. Hacemos esto para usar el funcionamiento interno, pero simplemente deshacernos de lo que no necesitamos.
<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#124009) Deshabilitar recorte de imágenes */
add_filter( 'image_resize_dimensions', 'wpse124009DisableCrop', 10, 6 );
function wpse124009DisableCrop( $enable, $orig_w, $orig_h, $dest_w, $dest_h, $crop )
{
// Deshabilita instantáneamente este filtro después de la primera ejecución
remove_filter( current_filter(), __FUNCTION__ );
return image_resize_dimensions( $orig_w, $orig_h, $dest_w, $dest_h, false );
}
Ahora el recorte está deshabilitado en todas partes. Si estás ejecutando multisitio o no quieres pensar si este plugin está activado, simplemente úsalo como un mu-plugin.
Por favor ten en cuenta que lo anterior no está probado, sino escrito de memoria después de leer el código fuente del núcleo.
Información adicional
Más información sobre las clases de manejo de imágenes en las diapositivas de Marko de WordCamp Europe y el video de la presentación se puede encontrar en WordPress.tv.

Kaiser, ¿quién te enseñó estas cosas? ¿Quién es tu tutor? Quiero convertirme en tu estudiante devoto. :)

@MayeenulIslam ¿en serio eres uno de sus estudiantes? Yo también quiero convertirme en un ninja de WP. Si Kaiser (gran maestro) está ocupado, ¿me aceptarías como estudiante?

@abhishek360 ¡Ups! ;) Aquí en esta plataforma, todos somos estudiantes o maestros de todos. Todos estamos tratando de aprender algo desde dentro. Nadie puede enseñar, pero el aprendizaje viene desde dentro. Quédate en esta plataforma, sirve a los demás, practica más, hay muchos como Kaiser, que son nuestros maestros. Yo todavía soy un bebé en WP - y ellos son mis mentores. ;)

Normalmente es porque un tema de Wordpress utiliza las miniaturas en su código: en bucles, galerías, etc. Se define en el archivo functions.php:
add_image_size( $name, $width, $height, $crop );
Por ejemplo, así:
add_theme_support('post-thumbnails');
add_image_size('custom-thumbnail', 80, 80, true );
add_image_size('medium-thumbnail', 180, 120, true );
add_image_size('large-thumbnail', 571, 300, true );
No te recomiendo eliminar el código si realmente quieres mantener el buen funcionamiento de tu tema. Si deseas eliminarlo, necesitarás borrar las llamadas en los otros archivos donde se utiliza; comúnmente en el archivo loop.php.

así que si elimino las llamadas de las páginas de loop y galerías, ¿usaría solo el tamaño que definí? ¿es posible hacer esto sin afectar mi tema?

Sí, es posible. El tamaño definido en tu primera captura de pantalla se usará cuando insertes una imagen en una publicación. Los otros tamaños definidos en functions.php se usan como miniaturas/imágenes para la estructura del tema, por lo que es muy probable que también necesites ajustar el CSS.

ohh, no soy un tipo muy técnico que pueda editar donde quiera. ¿Puedes sugerirme qué debo hacer para lograrlo fácilmente? Y el código que has pegado arriba, no estaba en mi functions.php. He pegado todo eso y definí el tamaño. Espero que funcione.

Bueno, si no está en functions.php, es porque ese archivo tiene 'includes' o 'requires' de otros archivos, separando su contenido en varios archivos. Necesitas revisar los otros archivos para eliminar la función que contiene add_image_size. Si agregaste el código que pegué antes, tu tema generará más recortes que antes. PD: Por cierto, la mayoría de los temas generan recortes como este, y solo es un problema si necesitas optimizar la memoria del servidor. Si lo necesitas, las imágenes recortadas se guardan en el directorio 'Uploads'. ¿Podrías pegar el functions.php en Pastebin? Le echaré un vistazo :)

He desactivado todos los plugins excepto (akismet) y estoy usando el tema twenty thirteen. ¿Podrías ayudarme más? ¿Qué debo hacer para que solo recorte el tamaño que he definido?

Para desactivar el recorte automático, inserta el siguiente código en el archivo disable-automatic-image-crop.php
dentro de tu carpeta mu-plugins:
<?php
/*
Plugin Name: Desactivar Recorte Automático de Imágenes
Author: Comunidad de WordPress
Description: https://gist.github.com/czenzel/0f5888cbbfa4a857e56361dd3bc19b39
*/
add_action( 'init', 'czc_disable_extra_image_sizes' );
add_filter( 'image_resize_dimensions', 'czc_disable_crop', 10, 6 );
function czc_disable_crop( $enable, $orig_w, $orig_h, $dest_w, $dest_h, $crop )
{
// Desactiva este filtro inmediatamente después de la primera ejecución
// remove_filter( current_filter(), __FUNCTION__ );
// return image_resize_dimensions( $orig_w, $orig_h, $dest_w, $dest_h, false );
return false;
}
function czc_disable_extra_image_sizes() {
foreach ( get_intermediate_image_sizes() as $size ) {
remove_image_size( $size );
}
}
?>
