¿Sabías que WordPress crea al menos 7 versiones en distintos tamaños de cada imagen que subes? Vamos a aprender cómo controlar e incluso evitar esto…
Por ejemplo, si subes una imagen de 2560×1600 px como la de la siguiente captura, con un tamaño de archivo de 1,9 Mb.
Se crearán copias de otros tamaños, que puedes ver en el mismo editor:
Y que, por supuesto, existen físicamente en tu alojamiento, ocupando un precioso y caro espacio en disco.
Vamos, que en el ejemplo has subido 1 imagen de 1,9 Mb y el resultado es que tienes 7 imágenes que, en conjunto, ocupan más de 6,8 Mb. Ahora haz el simple ejercicio de multiplicar esto por todas las imágenes que subas.
Tremendo ¿verdad?
Índice de contenidos
¿Por qué crea WordPress estas copias de la imagen que subes?
Parece una locura, pero tiene bastante sentido, ten en cuenta que WordPress es una aplicación de creación y publicación web que puedes utilizar desde cualquier ordenador, solo accediendo a tu web con tu usuario y contraseña, y como no siempre tendrás a mano un editor de imágenes para cambiar tamaños o resoluciones, pues WordPress crea copias a distintos tamaños (más pequeños) de cada imagen que subes.
En realidad es una estrategia de optimización, para que siempre tengas tamaños más óptimos y menores que utilizar en tus contenidos, la contrapartida es que llena el disco de tu alojamiento de copias.
Para ello utiliza, por una parte, la pantalla de ajustes de medios de la administración de tu web, donde puedes especificar los tamaños del formato grande, mediano y miniatura (algo es algo).
Pero ahí solo salen 3 tamaños ¿y el resto?
Efectivamente, WordPress no solo crea esos tamaños adicionales que ves en los ajustes de medios, la lista completa es esta:
| Tamaño de imagen | Dimensiones |
|---|---|
| Miniatura | (Tamaño basado en los ajustes de medios) |
| Medio | (Tamaño basado en los ajustes de medios) |
| Grande | (Tamaño basado en los ajustes de medios) |
| Medio Grande | 768px |
| Medio-grande x2 | 1536px |
| Grande x2 | 2048px |
| Escalado | 2560px |
Unas cuantas ¿eh?
Bueno, tampoco son tantas … ¡Ah no, que hay más!
Pues sí, no solo WordPress hace copias en distintos tamaños de cada imagen que subas, también el tema activo creará varios tamaños adicionales, para sus propias miniaturas, diseños en cuadrícula y vete a saber.
Pero la cosa no acaba aquí, también hay plugins que crean nuevos tamaños, el mismo WooCommerce por ejemplo.
De este modo, te vas a encontrar temas y plugins que usan las siguientes funciones de WordPress para añadir imágenes adicionales:
set_post_thumbnail_size()— Crea un tamaño personalizado para las imágenes destacadasadd_image_size()— Crea imágenes adicionales en los tamaños especificados
Vamos, que es un no parar. Además de WordPress, también el tema y los plugins crean sus propios tamaños personalizados de tus imágenes.
¡Esto es una locura! ¿qué hago?
Hay varias posibles estrategias, y algunas ya las hemos visto:
Pero lo más efectivo sería evitar que se creen los tamaños que no necesites ¿no?
Evita que se creen los tamaños de los ajustes de medios
Una estrategia rápida y sencilla, si ya el tema y plugins generan los tamaños que necesitan, es evitar que WordPress cree los tamaños grande, mediano y miniatura.
Y esto lo puedes conseguir de un modo tan sencillo como poner a cero los selectores, así:
Con esto ya te has quitado 3 archivos adicionales, pero todavía quedan más, como hemos visto en la tabla de arriba.
Evita que WordPress cree todos los tamaños adicionales con un código
Si tienes claro que no necesitas ninguno de los tamaños adicionales que crea WordPress puedes añadir este código al archivo functions.php del tema activo o a tu plugin de utilidades:
/* Evitar que WP cree tamaños de imagen adicionales */
function ayudawp_desactiva_medios_adicionales_wp($sizes) {
unset($sizes['thumbnail']); // desactivar tamaño miniatura
unset($sizes['medium']); // desactivar tamaño medio
unset($sizes['large']); // desactivar tamaño grande
unset($sizes['medium_large']); // desactivar tamaño medio-grande
unset($sizes['1536x1536']); // desactivar tamaño medio-grande x2
unset($sizes['2048x2048']); // desactivar tamaño grande x2
return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'ayudawp_desactiva_medios_adicionales_wp');
/* Evitar que se creen los tamaños escalados */
add_filter('big_image_size_threshold', '__return_false');Guarda y ya no se crearán estos tamaños cuando subas una nueva imagen.
Evita que WordPress cree todos los tamaños adicionales con un plugin
También puedes hacer lo anterior ayudándote de un plugin, en concreto Disable Media Sizes.
Una vez instalado y activo tienes una nueva página de ajustes con el nombre del plugin desde la que desactivar alguno o todos los tamaños adicionales generados por WordPress.
A partir de este momento (no con las imágenes ya subidas), mientras tengas activo el plugin ya no se generarán los tamaños que hayas desactivado.
Evita que se creen «otros» tamaños adicionales de tus imágenes
Si, además, quieres evitar que se creen otros tamaños adicionales generados por plugins o el tema, un código como el siguiente puede ayudarte:
/* Evitar que se creen otros tamaños de imagen */
function ayudawp_desactiva_otros_medios_adicionales() {
remove_image_size('post-thumbnail'); // desactiva imágenes añadidas mediante set_post_thumbnail_size()
remove_image_size('otro-tamaño-adicional'); // desactiva cualquier otro tamaño de imagen adicional
}
add_action('init', 'ayudawp_desactiva_otros_medios_adicionales');Bueno, espero haber aportado algo de luz y paz en esta locura de la generación de tamaños adicionales de imágenes, para que seas tú quien controla WordPress y no al revés.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Si pones botones sociales nos facilitas las cosas para visualizar tus contenidos. Al menos Twitter y Facebook. UX. ¡Gracias!
Están puestos, al final de cada entrada
Ok Gracias. No los había visto. Un abrazo Master.
Yo uso un metodo similar, y para generar las miniaturas en las plantillas que creo para el listado de posts, cabeceras, y de mas, uso el plugin Fly Dynamic Image Resizer. Es genial ya que asi se crean los tamaños adecuados segun las visitas, y solo mantengo un mes las versiones generadas por el plugin, con lo que ahorro espacio y mejoro un poco la carga de la web.
Tengo que probar Flying Images by WP Speed Matters, que hace algo parecido, pero a traves de un cdn. No me convence del todo la idea, ya que no se si puedo tener el mismo control que con Fly Dynamic Image Resizer, pero probar es gratis, y es bueno conocer alternativas.
Ese no lo he probado, y mira que he probado varios de la gente de WP Speed Matters, le echaré un vistazo 😉
hola fernando exite algo para eliminar las copias de imagenes que no sirven hoy hay que hacerlo manualmente conectandose por ftp??? las que estan subidas ya???
Sí claro, así: https://ayudawp.com/como-eliminar-las-imagenes-sin-adjuntar-de-entradas-borradas/
Gracias Fernando… Yo creía que los tamaños adicionales eran creados de cara al visitante que visualiza el sitio a través de múltiples dispositivos… pero si he entendido bien, se crean para el webmaster que trabaja desde diferentes dispositivos… ¿Es correcto?
Entonces, si yo solo voy a trabajar desde un PC, podría eliminar los tamaños pequeño y medio creados por WP?
Los tamaños creados por el tema (Divi) supongo que los necesitara para mostrarlos al visitante… ¿No es así?
Gracias de nuevo…
No, es más para el editor, para no insertar en las entradas y páginas imágenes completas que luego el tema redimensione, pero sigan manteniendo el peso, sino para que el peso sea menor, y la carga de página más rápida. Lo que pasa es que luego el tema pasa de esos tamaños y usa los suyos.
Sobre los tamaños adecuados para Divi escribí una guía aquí: https://ayudawp.com/tutorial-divi-todo-lo-que-debes-saber-sobre-los-tamanos-y-uso-de-imagenes/
Excelente articulo Fernando, pero sigo pensando que es más importante preparar y optimizar bien las imágenes a fondo en tamaño y dimensiones y para SEO con alt y nombre de fichero antes de subirlas a WordPress! 😉
Mucha gente no hace eso y las carga tal cual desde cámaras de fotos y luego no saben porqué va tan lenta la web jeje
Un abrazo
Son tácticas diferentes y compatibles entre ellas. Primero sube las imágenes al tamaño menor posible, a la resolución adecuada, pero si además evitas la creación de copias innecesarias mucho mejor 😉
Cuando dices «Evita que se creen los tamaños de los ajustes de medios» y después dices «Si tienes claro que no necesitas ninguno de los tamaños adicionales que crea WordPress…» no me queda claro si esas 7 imágenes son prescindibles y no ocurre nada si deshabilitamos su creación automática o si luego algo no va a funcionar por no haberlas creado.
Un saludo
Normalmente el tema ya crea sus tamaños adicionales, o sino aplica el responsive a las imágenes para que no se salgan del bloque del contenido.
Lo que hay que evitar es que WordPress cree tamaños adicionales que no necesites, o los pones a cero o – también puede hacerse – los personalizas a tamaños que sí te venga bien tener.
Articulo muy interesante Fernando. Como todos !
Gracias por tus consejos.
Estoy enganchado a «Tu dosis diaria de WordPress»
Un saludo
Muchas gracias 🙂
Fernando, excelente post y muy útiles tus tips! A propósito de imágenes, tengo un pequeño problema: cuando comparto el enlace de mi sitio web se agregan automáticamente el logo o una imagen de la pagina de inicio y además el primer párrafo. De verdad, que no causa buena impresión. ¿A que se debe esto? ¿Cómo lo corrijo? Gracias por tu ayuda!
Eso debes controlarlo con el plugin de SEO, en los ajustes sociales generales, y luego puedes personalizarlo en cada entrada. Es algo que explico en detalle en mi curso de SEO para WordPress
Gracias, Fernando. Excelente tema, en el que no había pensado. Mi duda es: si Wordpress y los themes crean esas copias de imágenes para optimizar la carga del sitio, ¿al eliminar esas copias no nos cargaremos algo de la web? ¿o esta abrirá más lento? Gracias y un abrazo
No y no, solo si cambias de tema hay que regenerar miniaturas con el plugin Regenerate Thumbnails. https://ayudawp.com/regenerar-miniaturas-de-wordpress/
hola fernando esto repercute al feed cuando se envían mails de cada entrada???
Negativamente en nada
es que tengo un problema ahora se ven mas grandes las imagenes en feed pero no se como ajustar al tamaño que quiero para los mails tienes algún tutorial???
Muchas gracias, Fernando por compartirlo.
Conocía todos excepto el de poner 0 en el tamaño de las imágenes. Gran aporte!
No te acostarás sin saber una cosa más 🙂
Hola Fernando, gracia por aportar luz a este mundo que es WordPress.
Mi duda, despues de leer estas fantásticas líneas, es, después de tener imágenes subidas a la web, hago estos cambios para evitar que WordPress haga tantas copias, ¿tengo que borrar de manera manual las que ya tiene creadas?
Puedes hacerlo. Si borras la original te borra las copias, pero si la necesitas para una entrada desaparecería. Sino, por FTP o gestor de archivos del hosting puedes borrar las copias manualmente, trabajo arduo donde los haya
Hola Fernando, como siempre excelentes tus post. Gracias a ello tengo un plugin de funciones bien configurado con todos tus tips los cuales funcionan de maravilla. Algo que me ha extrañado con este tema de las imágenes es que he agregado el código completo que mencionas a dicho plugin y con los ajustes a 0 desde siempre en ajustes de medios, veo que WP me sigue generando imágenes. Debo aclarar que utilizo el tema Extra de Divi. Por ejemplo ahora las imagenes subidas por ej. de 799x518px me generan 7 imágenes de: 150×150, 400×250, 400×284, 400×516, 400×264, 400×440 y 627×376 es normal esto?
Como comento en la guía, no solo WordPress crea copias, también el tema, WooCommerce si lo tienes, algunos plugins. Hay que revisar los functions.php del tema y alguno más para ver qué copias hacen
Realizando una búsqueda, porque acabo de salir de un problema similar, te sugiero utilizar este plugin: Disable Generate Thumbnails
https://wordpress.org/plugins/disable-generate-thumbnails/
Funciona muy bien(como Disable Media Sizes), aparte de los que mencionan en el Post(7 thumbails), también te muestra cada medida de los generados por temas o Plugins para un mejor control, y hace un muy buen dúo con «Regenerate thumbails» para un control preciso (agregar o eliminar).
En prueba el código Amigo Fernando,
Lo estoy utilizando en localhost y me esta funcionando muy bien hasta ahora. Con las entradas de blog solo me queda la que cargo como foto de portada. Por ahí esta bien…
Seguiré en prueba con el resto del sitio.
Gracias por tomarte el tiempo de solucionar estos problemas.