[Resuelto] Optimización y gestión de múltiples tamaños de imágenes con EWWW Image Optimizer  

Hola Maria.

Wordpress crea diferentes tamaños para optimizar la carga de la pagina, es decir, puedes subir imágenes con una resolución de 1500px pero si la imagen a mostrar no supera los 500px las optimiza creando imágenes de ese tamaño para que la carga de la web sea mejor, por eso  crea imágenes con diferentes tamaños y las caga segun la resolucion que necesita.

Aparte de WordPress, los plugin y la plantilla crean también sus imágenes.

Para saber el tamaño de las imágenes que genera WooCommerce puedes acceder Apariencia -> Personalizar -> WooCommerce -> Imágenes de productos 

Si no quieres que se generen los tamaños de las imágenes de WordPress puedes acceder ajustes -> Medios y dejar los tamaños a " 0 "

He leído sobre plugins como Media Cleaner

El plugin Media Cleaner elimina las imágenes que no están insertadas pero como consejo descarga primero la carpeta uploads que se encuentra en wp-conten pero ten en cuenta que en la versión Free solo escanea las imágenes que tienes en uploads, para las que genera la plantilla y los plugin necesitas la versión Pro, de pago.

Un Saludo

Hola @pepesoler

Muchas gracias por tu respuesta.

El caso es que me parece bien que se generen 3 tamaños de imágenes, tal y como se configura en Ajustes -> Medios. Lo que me parece excesivo es que de una imagen se generen de forma automática todas estas versiones diferentes, y en algunos casos, incluso más que las de este listado. Aquí un ejemplo de lo que me encuentro para una sola imagen:

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-100x100.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-100x100.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-150x150.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-150x150.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-226x300.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-226x300.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-300x400.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-300x400.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-350x435.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-600x795.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-600x795.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-620x500.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-620x500.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-768x1018.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-768x1018.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-773x1024.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul-773x1024.jpg.webp

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul.jpg

/wp-content/uploads/2022/05/111-pantalon-corto-pijama-azul.jpg.webp

¿Hay alguna forma de configurar el sistema o el plugin EWWW Image Optimizer para que solo se generen las versiones estrictamente necesarias? Me interesaría mucho saber cómo puedo limitar la creación de formatos y tamaños adicionales que realmente no necesito, para así optimizar el uso de recursos en mi servidor.

Muchas gracias de nuevo por tu ayuda

Un saludo.

Que tal Maria,

El ajustar los tamaños de las miniaturas que se generan en tu sitio en WordPress puede ser limitado de varias maneras

Una de ellas y la mas simple es la que te ha comentado mi compañero, sin embargo hay mas tamaños que los reflejados por WordPress los cuales pueden ser generados por otros plugins

Asi que puedes probar usar el siguiente plugin https://es.wordpress.org/plugins/image-sizes/

El plugin sugerido ademas de que permite regenerar las miniaturas puedes activar/desactivar tamaños de thumbnails a gusto

Echale un vistazo

Saludos!

Hola @bruno-vichetti

Muchas gracias por tu respuesta y por la recomendación del plugin. Le echaré un vistazo.

Me surge otra duda respecto a la optimización de imágenes. Cuando se activa la conversión a WebP en estos tipos de plugins, a menudo preguntan si deseo conservar las imágenes originales en JPG. En el contexto actual, ¿consideráis necesario mantener una copia de las imágenes en JPG? Sé que los archivos WebP pueden presentar problemas de visualización en algunos navegadores. No estoy segura si este es un problema residual o si realmente es recomendable conservar ambas versiones.

Gracias de nuevo por la ayuda.

Un saludo.

Hola María,

¿consideráis necesario mantener una copia de las imágenes en JPG? Sé que los archivos WebP pueden presentar problemas de visualización en algunos navegadores. No estoy segura si este es un problema residual o si realmente es recomendable conservar ambas versiones.

La opción por lo general esta presente por un lado para tener respaldo de las imagenes en su formato original y, por otro lado, tal como mencionas en caso de una incompatibilidad al momento de visualizar una imagen en formato webp siempre podra ser mostrada en su versión original

El conservar las imágenes en su versión original ya es a consideración de cada quien, lo ideal es que antes de hacer la migración a convertir las imagenes a formato webp se realice un respaldo del sitio web

Saludos!

Hola de nuevo @bruno-vichetti

Muchas gracias por tu respuesta.

Para evitar utilizar otro plugin que controle los tamaños de las imágenes que se suben, estoy considerando usar el siguiente script para definir específicamente los tamaños de imagen que quiero que mi sitio genere. Aquí está el código que planeo utilizar:

-------------------------------------------

function custom_image_sizes($sizes) {

foreach ($sizes as $size => $details) {
unset($sizes[$size]);
}

$allowed_sizes = [
 'shop_single' => array(920, 920, false),
'shop_catalog' => array(350, 474, true),
'thumbnail' => array(150, 150, true),
'medium' => array(300, 300, false),
'large' => array(1024, 1024, false)
];

foreach ($allowed_sizes as $size => $details) {
add_image_size($size, $details[0], $details[1], $details[2]);
}

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

-------------------------------------------

¿Crees que este enfoque es adecuado para controlar de manera efectiva los tamaños de imagen sin la necesidad de un plugin adicional? ¿Hay algo que debería considerar para asegurar que el script funcione como espero?

Agradezco de antemano cualquier sugerencia.

Saludos.

Hola Maria,

Si bien no podemos validar el correcto funcionamiento de este fragmento de codigo puede funcionar para lo que deseas

Recuerda que debes colocarlo en el archivo functions.php de un tema hijo para no perder los ajustes o usar un plugin como el siguiente 

https://es.wordpress.org/plugins/code-snippets/

Saludos!

Hola de nuevo,

Tengo algunas preguntas sobre el plugin Media Cleaner comentado con @pepesoler:

¿Cómo determina Media Cleaner qué imágenes no están siendo usadas? ¿Considera solo las referencias directas en las páginas o también detecta imágenes usadas en scripts, como JavaScript?
En relación con el script que os he comentado en la anterior respuesta, ¿influirá en cómo el plugin identifica las imágenes no utilizadas?
¿Podré filtrar imágenes por nombre de archivo u otro criterio dentro del plugin después de ver el listado?

Muchas gracias por vuestra ayuda.

Saludos.

Hola María

Media Cleaner revisa las imágenes y comprueba si están incrustadas en alguna página o entrada. Cada vez que añades una imagen, esta deja un rastro en la base de datos y eso es lo que revisa el plugin.

 ¿Considera solo las referencias directas en las páginas o también detecta imágenes usadas en scripts, como JavaScript?

Si la imagen la subiste desde el media de WordPress si ya que deja un rastro y se almacena en la tabla wp_posts

 ¿influirá en cómo el plugin identifica las imágenes no utilizadas?

No, por lo que veo en el código solo afectara a la imagenes que subas ahora y lo único que hace es no generar algunos tamaños.

¿Podré filtrar imágenes por nombre de archivo u otro criterio dentro del plugin después de ver el listado?

Puedes filtra por nombre de carpeta, por ejemplo 2024 o por nombre de archivo

Ten en cuenta que la versión Free solo escanea la carpeta Uploads, si la plantilla o los plugins tienen alguna carpeta de imagenes estas no las mostrará, para eso hace falta la versión Pro del plugin.

Puedes revisar su documentación:

-> https://meowapps.com/media-cleaner/tutorial/

Un Saludo

Hola @pepesoler

Gracias por tu respuesta anterior.

He instalado el plugin Media Cleaner y realizado un primer escaneo. Observo que en la pestaña "Issues" se listan imágenes que el plugin considera no utilizadas, indicando que cada una tiene "+17 files", por ejemplo.

En la pestaña "References", puedo ver todas estas versiones y filtrarlas por nombre de archivo, lo cual me facilita identificar las imágenes con tamaños específicos creados por el plugin EWWW Image Optimizer. Esto me ayudaría a eliminar las versiones excesivas de manera más eficiente. Sin embargo, me surgen un par de dudas:

- Si elimino versiones específicas de imágenes de esta manera, ¿existe el riesgo de que en alguna resolución no se cargue la imagen adecuada? ¿El sistema sustituirá automáticamente esas imágenes por otras versiones más adecuadas que sigan existiendo?

- En la pestaña "References", no encuentro un botón para eliminar imágenes, a diferencia de lo que sucede en la pestaña "Issues". ¿Es necesario tener una versión de pago del plugin para eliminar imágenes desde "References"?

Muchas gracias de nuevo por vuestra ayuda.

Un saludo.

Hola Maria

 ¿existe el riesgo de que en alguna resolución no se cargue la imagen adecuada? ¿El sistema sustituirá automáticamente esas imágenes por otras versiones más adecuadas que sigan existiendo?

En Principio si no existe la imagen en ese tamaño la sustituirá por la original, siempre tienes que tener en cuenta de no eliminar la imagen original.

¿Es necesario tener una versión de pago del plugin para eliminar imágenes desde "References"?

En la versión Pro tienes la opción de poder Filtrar por tamaños, incluso filtrar solo las miniaturas:

El filtro de directorios y el filtro de archivos  pueden restringir el escaneo a carpetas y/o archivos específicos dependiendo de una expresión regular (expresada entre dos barras diagonales) . Si no sabes cómo escribir una expresión regular, puede que te resulte interesante aprenderla. Hay muchos tutoriales en línea y luego puede probarlos en sitios web como  Regex101 . Aquí están algunos ejemplos:

• Filtro de directorios:  /^$/ (solo escanea la raíz de tu directorio /uploads)
• Filtro de directorios:  /^2018/ (escanee solo los archivos de 2018)
• Filtro de directorios:  /^[0-9]{4}\/02/ (escanee solo los archivos en los directorios de febrero)
• Filtro de directorios:  /^((?!wp-slimstat|woocommerce-pdf-invoices|wpo_wcpdf|arprice|mk_assets|fvm).)*$/ ( evite escanear directorios específicos)
• Filtro de archivos:  /400×400.jpg/ (escanee solo los archivos con resolución 400×400)
• Filtro de archivos:  /.jpg|.png/ (escanee solo los archivos png y jpg)

Sólo miniaturas . Solo escaneará sus miniaturas y evitará las imágenes originales (en tamaño completo). Esto también se podría haber hecho con una expresión regular, pero es para hacer la vida más fácil a la mayoría de los usuarios. Consulte los Procedimientos recomendados para el uso habitual de esta opción.

 

Un saludo

Hola @pepesoler

Gracias por tu respuesta.

Tengo una duda específica acerca de la pestaña "References" en Media Cleaner. Cuando entro en esa pestaña y selecciono un archivo, a diferencia de lo que ocurre en la pestaña "Issues", no veo ninguna opción para eliminar los archivos seleccionados. No entiendo la utilidad de la pestaña "References" si no permite realizar acciones directas sobre los archivos listados.

No he podido encontrar información al respecto en tutoriales ni en la documentación del plugin. ¿Podrías explicarme cuál es el propósito de esta pestaña? Me sería de gran utilidad poder eliminar los archivos desde ahí, especialmente porque esa pestaña muestra todas las variantes de tamaños de imagen desglosados y con un filtro operativo, lo cual facilitaría enormemente la gestión de imágenes sobrantes.

Gracias de nuevo por la ayuda.

Un saludo.

Hola Maria,

La referencia es como una descripción de la información de ese archivo, por ejemplo en la captura indica que blusa sin mangas está en la biblioteca mientras que barber shop se encuentra en el constructor en uso, incluso puedes hacer clic en el para ir a la página que lo está utilizando.

Son como su mismo nombre lo indica referencias para que puedas saber alguna información adicional de las imágenes.

Un saludo 🖐️ 

Hola @argenis

Gracias por tu respuesta.

Comentarte que en la pestaña "References" del plugin Media Cleaner no parece posible hacer clic en los archivos para ir a la página donde están siendo utilizados, al menos en mi experiencia.

Además, me resulta extraño que se puedan seleccionar los archivos en esta pestaña sin que haya una opción para realizar acciones sobre ellos, como eliminarlos. Estoy buscando una manera eficiente de eliminar todas las versiones de tamaños que no necesito conservar de una misma imagen, y me gustaría saber si existe alguna funcionalidad dentro del plugin que me permita hacer esto, especialmente ahora que he adquirido la versión Pro.

¿Hay alguna forma de gestionar esto directamente desde Media Cleaner o debo buscar una solución alternativa?

Agradecería cualquier información al respecto.

Un saludo.