¿Alguna vez has pasado horas creando la publicación de blog perfecta, solo para descubrir que las imágenes hermosas y de alta resolución están haciendo que tu sitio sea dolorosamente lento? He estado ahí, y es frustrante saber que los tiempos de carga lentos pueden alejar a los visitantes antes de que siquiera vean tu contenido.
Redimensionar manualmente cada imagen es una pérdida de tiempo enorme, especialmente para sitios web establecidos con grandes bibliotecas multimedia. Afortunadamente, puedes redimensionar cientos de imágenes directamente dentro de WordPress en solo unos pocos clics, lo que ha sido un salvavidas en mis propios proyectos.
En esta guía, te mostraré los pasos exactos para optimizar y redimensionar tus imágenes en bloque utilizando un popular plugin gratuito. Haremos que tu sitio funcione más rápido, mejoraremos la experiencia de tus visitantes y no necesitarás ninguna habilidad técnica especial para hacerlo.
RESUMEN: Antes de empezar, hablemos rápidamente de lo que sucede detrás de escena. Haremos dos cosas clave:
- redimensionar tus imágenes a las dimensiones correctas (como hacer que una foto enorme encaje en el ancho de tu blog) y
- optimizarlas para reducir su tamaño de archivo sin perder calidad.
Piénsalo como empacar una maleta de manera más eficiente. Metes las mismas cosas geniales en un espacio mucho más pequeño. El plugin que usamos hoy se encarga de ambas cosas automáticamente. 👍
¿Por qué optimizar y redimensionar imágenes en bloque en WordPress?
Las imágenes grandes y sin optimizar pueden verse hermosas, pero pueden ralentizar secretamente tu sitio web. Esto se debe a que cada vez que alguien visita tu sitio, su navegador tiene que descargar estos archivos grandes, lo que lleva tiempo y puede ralentizar la carga de la página.
Un sitio lento a menudo genera visitantes frustrados, clasificaciones de búsqueda más bajas e incluso oportunidades perdidas para hacer crecer tu audiencia.
Al redimensionar y optimizar tus imágenes grandes en masa, puedes acelerar tu sitio web, mejorar tu SEO y crear una experiencia más fluida para tus visitantes. Es un paso sencillo que marca una gran diferencia.
En WPBeginner, siempre nos aseguramos de cambiar el tamaño de todas las imágenes grandes que subimos. También nos ceñimos a dimensiones específicas para que todas nuestras imágenes sean consistentes y cohesivas en las diferentes publicaciones.
Dado que ya tenemos este procedimiento para todo el equipo, normalmente no necesito cambiar el tamaño de las imágenes en bloque en WPBeginner, pero definitivamente he tenido que hacerlo cuando trabajaba en otros sitios web.
Si bien cambiar el tamaño de las imágenes grandes es esencial para todo tipo de sitios web, lo recomiendo especialmente para sitios con muchas imágenes. Estos incluyen sitios de fotografía y portafolios, plataformas de comercio electrónico con extensos catálogos de productos, así como sitios de arte y diseño.
Ahora, ¿estás listo para aprender a cambiar el tamaño de las imágenes grandes en bloque en WordPress? Aquí están los pasos que cubriré hoy:
- Paso 1: Instalar y activar el plugin EWWW Image Optimizer
- Paso 2: Configurar los ajustes básicos del plugin
- Paso 3: Optimizar imágenes existentes en bloque
- Paso 4: Probar y revisar tus imágenes
- FAQs About Resizing Images in WordPress
🚨 Nota importante: Una vez que hayas cambiado el tamaño de tus imágenes, esta acción no se puede deshacer. Por lo tanto, antes de cambiar el tamaño de tus imágenes en bloque, te recomiendo que hagas una copia de seguridad de tu sitio de WordPress. De esta manera, podrás convertir rápidamente tus imágenes a su versión anterior si encuentras algún problema.
¡Empecemos!
Paso 1: Instalar y activar el plugin EWWW Image Optimizer
Primero, necesitarás la herramienta adecuada para el trabajo. Usaré el plugin gratuito EWWW Image Optimizer (EWWW IO). En mi opinión, es la mejor opción gratuita para cambiar el tamaño de las imágenes en bloque en WordPress.
Comprime, escala y convierte automáticamente las imágenes a formatos como WebP, lo que puede hacer que tu sitio sea más rápido.
He encontrado que la función de optimización masiva es particularmente útil para sitios grandes con muchos archivos de imagen. Puede ahorrarle mucho tiempo y asegurar que todas las imágenes se optimicen de manera eficiente.
Si desea obtener más información sobre lo que puede hacer, no dude en consultar nuestra reseña completa de EWWW IO.
Ahora, instalemos EWWW IO. En su panel de WordPress, vaya a Plugins » Agregar nuevo plugin y busque 'EWWW Image Optimizer'.
Cuando lo vea, haga clic en 'Instalar ahora' y luego en 'Activar'.
¿Necesita un repaso sobre cómo hacer esto? Puede ver nuestra guía sobre cómo instalar un plugin de WordPress.
Paso 2: Configurar los ajustes básicos del plugin
Antes de redimensionar cualquier imagen, es importante configurar los ajustes básicos de EWWW IO.
Para hacer esto, necesitas ir a Configuración » EWWW Image Optimizer.
Esto abrirá automáticamente el asistente de configuración del plugin.
En la primera pantalla, se te preguntará sobre tus objetivos. ¿Quieres acelerar tu sitio o ahorrar espacio de almacenamiento?
Elige la opción que mejor te describa. Si no quieres comprar el plugin premium, también deberás seleccionar 'Mantenerse en modo gratuito por ahora'. Luego, haz clic en 'Siguiente' cuando estés listo.
En la siguiente página, verás tres casillas para marcar. Te explicaré lo que significan, una por una.
Primero, tienes 'Eliminar metadatos'. Recomiendo marcar esta casilla porque esta opción elimina datos innecesarios de tus imágenes, como la configuración de la cámara y la información de ubicación, lo que hace que tus imágenes sean aún más ligeras.
El siguiente es 'Carga diferida' (Lazy Load). Cuando habilitas esta opción, las imágenes solo se cargarán cuando un usuario se desplace hacia ellas, lo que ayuda a que las páginas carguen más rápido.
Generalmente recomiendo la carga diferida, pero es posible que no necesites habilitarla aquí si estás utilizando un plugin de rendimiento que ya la ofrece.
Luego tienes la opción de ‘Conversión a WebP’. WebP es un formato de imagen moderno creado por Google que ofrece una excelente calidad de imagen en un tamaño de archivo mucho menor en comparación con los JPEGs y PNGs tradicionales.
Recomiendo encarecidamente activar esta opción, ya que convertir tus imágenes a imágenes WebP es una de las formas más fáciles de darle a tu sitio un impulso de velocidad significativo.
No te preocupes si algunos de tus visitantes usan navegadores antiguos porque EWWW IO les servirá automáticamente el formato de imagen correcto.
Debajo de eso, puedes establecer el 'Ancho máximo' y la 'Altura máxima' para tus imágenes.
⚠️ Consejo de experto: Comprender las dimensiones óptimas de las imágenes es clave para mantener la velocidad del sitio sin sacrificar la calidad. Recomendamos establecer el ancho máximo en 1200 píxeles para la mayoría de las imágenes de las entradas del blog. Este tamaño se ve nítido y claro en la mayoría de las pantallas, desde computadoras de escritorio hasta teléfonos móviles, sin ser demasiado grande.
Si necesitas ayuda para decidir estas configuraciones, consulta nuestra guía para principiantes sobre tamaños de imágenes en WordPress.
Finalmente, elige la fuente de copia de seguridad de imágenes. Después de realizar estos cambios, haz clic en el botón 'Guardar configuración' en la parte inferior.
Luego, verás un mensaje que dice que EWWW IO redimensionará automáticamente cualquier imagen nueva que subas, utilizando el ancho y alto máximo que acabas de establecer.
Sin embargo, todavía necesitas redimensionar en lote tus imágenes existentes. Cubriré eso en el siguiente paso. Simplemente haz clic en 'Listo' para continuar.
Paso 3: Optimizar en lote imágenes existentes
¿Listo para optimizar y redimensionar todas esas imágenes grandes de una vez?
Desde tu panel de WordPress, ve a Medios » Optimizar en lote. Aquí verás un botón que dice 'Escanear imágenes no optimizadas'.
Haz clic en el botón y el plugin buscará en tu biblioteca de medios y encontrará todas las imágenes que se pueden optimizar o redimensionar.
Una vez que el escaneo termine, verás el total de imágenes a optimizar.
Haz clic en el botón que dice 'Optimizar X imágenes' para comenzar el proceso.
Dependiendo de cuántas imágenes tengas, esto puede llevar tiempo, pero podrás monitorear el progreso con la útil barra de progreso.
Una vez que eso esté hecho, tus imágenes se redimensionarán de acuerdo con la configuración que configuraste anteriormente, ¡dándole a tu sitio un toque fresco y rápido!
Paso 4: Probar y revisar tus imágenes
Con el redimensionamiento completo, es hora de asegurarse de que todo funcione como se espera y que tus imágenes se muestren correctamente.
Visita tu sitio web y navega por algunas páginas. Observa las imágenes para confirmar que se muestren correctamente y carguen rápido, ya que esto impactará la experiencia del usuario.
A continuación, dirígete a tu Biblioteca de Medios para inspeccionar las dimensiones de las imágenes. Verifica si coinciden con los valores que estableciste anteriormente en la configuración del plugin.
Para hacer esto, ve a Medios » Biblioteca en tu panel de WordPress. Luego, elige una de las imágenes.
En mi ejemplo, verás que las dimensiones de la imagen son 1200 px por 807, lo que refleja correctamente el ancho máximo que elegí anteriormente.
Si todo se ve bien, ¡felicidades! Has redimensionado correctamente tus imágenes grandes de WordPress en bloque y has configurado tu sitio para futuras cargas también.
⚠️ Consejo de solución de problemas: Redimensionar imágenes no siempre es perfecto. A veces, es posible que tus imágenes aparezcan borrosas después de redimensionarlas. Esto suele suceder si las dimensiones establecidas durante la optimización son demasiado pequeñas. Siempre verifica tus configuraciones y no dudes en experimentar con diferentes tamaños. Por eso también es tan importante crear una copia de seguridad de tus imágenes antes de empezar a redimensionarlas.
Preguntas frecuentes sobre el redimensionamiento de imágenes en WordPress
Ahora que sabes cómo redimensionar en masa imágenes grandes en WordPress, es posible que aún tengas algunas preguntas. Repasemos algunas comunes para ayudarte.
¿Cómo redimensionas varias imágenes de WordPress a la vez?
Para redimensionar y optimizar varias imágenes a la vez en WordPress, puedes usar un plugin como EWWW Image Optimizer. Una vez que hayas configurado los ajustes como se muestra en esta guía, navega a Medios » Optimizar en masa en tu panel de WordPress.
Desde allí, haz clic en el botón ‘Escanear imágenes no optimizadas’. El plugin encontrará automáticamente todas las imágenes en tu Biblioteca de medios que necesitan ser redimensionadas o comprimidas. Una vez que el escaneo haya finalizado, puedes optimizarlas todas en un solo lote con un solo clic.
¿Cómo redimensiono imágenes automáticamente en WordPress?
Recomiendo usar un plugin como EWWW Image Optimizer para redimensionar tus imágenes automáticamente. Una vez que el plugin esté instalado y activado, ve a la configuración del plugin Ajustes » EWWW Image Optimizer en tu panel.
Luego, establece las dimensiones deseadas para tus imágenes. Con estas configuraciones, cualquier imagen nueva que subas se redimensionará automáticamente para ajustarse a las dimensiones especificadas.
Recursos adicionales sobre optimización de imágenes en WordPress
Si deseas llevar las imágenes de tu sitio al siguiente nivel, también puedes encontrar útiles estas guías:
- WebP vs. PNG vs. JPEG: El mejor formato de imagen para WordPress
- Cómo optimizar imágenes para el rendimiento web sin perder calidad
- ¿Dónde almacena WordPress las imágenes en tu sitio?
- Herramientas para crear mejores imágenes para las publicaciones de tu blog
- Guía para principiantes de SEO de imágenes – Optimiza imágenes para motores de búsqueda
- Cómo Conectar Google Drive a tu Biblioteca de Medios de WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Herb Baldwin
¿El plugin Imsanity redimensiona automáticamente las fotos sobre la marcha mientras las subo a mi blog? ¿O necesitaría "ejecutar" el plugin periódicamente para redimensionar los archivos más grandes?
Soporte de WPBeginner
El plugin actualmente redimensiona las imágenes automáticamente por ti
Administrador
Chris
¿Este plugin mantiene la relación de aspecto?
Lo único que quiero hacer es redimensionar imágenes que son más grandes de 800px de ancho a 800px de ancho sin distorsionarlas. Así que digamos que tengo imágenes de 2400×1200 px -> deberían redimensionarse a 800×400 px, mientras que las de 1600x900px deberían redimensionarse a 800x450px.
Espero que puedas ayudar. Gracias de antemano.
Brenda Maurah
Desafortunadamente, el plugin no funciona para algunas de mis imágenes que quiero redimensionar
Lisa Wist
Desafortunadamente, este plugin no funciona con la versión actual de WP (4.5.2). Si revisas la pestaña de soporte de este plugin, verás que varias personas informan que dejó de funcionar después de la versión 4.5. ¿Tienes alguna recomendación alternativa?
Soporte de WPBeginner
Probamos el plugin en WordPress 4.5.2, funcionó como se esperaba. ¿Qué problemas tienes con el plugin?
Administrador
shade
Hola
Acabo de instalar el plugin insanity en mi sitio, al ir a la configuración noté que las imágenes que se han cargado dentro de la página/publicación son de 2048x2048 píxeles de ancho/alto. Quiero redimensionar a un tamaño estándar solo para todas mis imágenes destacadas en movimiento y no para las imágenes en publicaciones y páginas. Realmente no sé cómo hacerlo, ¿alguien puede ayudarme porque quiero tener cuidado con las advertencias de ser precavido?
gracias
Roger
Estoy trabajando en un sitio que tiene muchas imágenes con varios cientos de publicaciones de blog. Resulta que el autor simplemente ha estado subiendo las fotos originales y usando el editor de WP para recortarlas y 'redimensionarlas'. Estoy bastante seguro de que esto deja el archivo original subido intacto, y ahora el sitio está muy inflado, casi inmanejable. ¿Este plugin eliminará retroactivamente las imágenes originales grandes?
¡Gracias de antemano!
Carly
¡Me encantaría saber la respuesta a esto también!
Diederik
Otra posibilidad remota: ¿puede la fuente ser la dirección de un sitio web? Es decir, no la imagen sino la página principal del sitio, devolviendo un jpg, por ejemplo?
Daz Owens
Lo he usado antes y es un gran plugin. Tuve que procesar miles de imágenes y funcionó de maravilla.
Cameron Archibald
Gran artículo. Parece un plugin excelente. También leí sobre CDN y aprendí mucho. Muchas gracias.
Travis Pflanz
Uso Imsanity para todos los proyectos.
Este artículo ni siquiera cubre la MEJOR característica de este plugin. Imsanity redimensionará automáticamente tus imágenes grandes cuando las subas, luego descartará la imagen sobredimensionada, guardando la imagen redimensionada como la "original".
Por ejemplo: Tienes una imagen de 5 megapíxeles, de más de 5000px de ancho. No necesitarás una imagen tan ancha en tu sitio web.
Simplemente sube la imagen y Imsanity redimensionará la imagen (no la recortará) y guardará la imagen redimensionada en tu servidor y en tu biblioteca de medios.
Esto también es útil cuando un tema está mal codificado, utilizando el tamaño de imagen original para mostrarlo en el sitio web: todos hemos visto la carga de imágenes súper lenta en los sitios web.
Mis recomendaciones:
Establece las imágenes subidas a la página/publicación al tamaño de tu contenedor de contenido; si usas páginas con y sin barra lateral, asegúrate de usar el ancho para la página sin barra lateral. Cambia el
Establece "Subido a la biblioteca de medios" y "Subido en otro lugar" a ilimitado. Esto permitirá guardar fácilmente imágenes grandes, si es necesario, así como imágenes más grandes para presentaciones, fondos, encabezados, etc.