¿Intentas averiguar cómo cambiar el tamaño de una imagen en WordPress sin romper tu diseño o ralentizar tu sitio?
Me he encontrado con este problema más veces de las que puedo contar. Ya fuera al añadir imágenes al blog, fotos de productos o logotipos, las imágenes sobredimensionadas siempre ralentizaban la página y se veían mal. Fue entonces cuando empecé a usar el editor de imágenes integrado de WordPress: es más rápido que la mayoría de los plugins y hace bien su trabajo.
En esta guía, te mostraré exactamente cómo cambiar el tamaño, recortar, voltear y rotar imágenes en WordPress, y cómo deshacer esos cambios si es necesario. No necesitarás herramientas ni código adicionales. Solo unos pocos clics dentro de tu panel.
Empecemos con un resumen rápido de lo que puedes hacer dentro de la Biblioteca de Medios de WordPress.
Resumen rápido: WordPress te permite cambiar el tamaño, recortar, rotar, voltear y restaurar imágenes directamente en la Biblioteca de Medios, sin necesidad de herramientas adicionales. Estas funciones integradas pueden ayudarte a acelerar tu sitio, mejorar la experiencia del usuario y reducir el espacio de alojamiento.
- Cambiar tamaño: Usa 'Escalar imagen' para reducir imágenes grandes sin recortar.
- Recortar: Haz clic y arrastra para recortar imágenes visualmente.
- Rotar: Gira las imágenes 90° a la izquierda o a la derecha.
- Voltear: Refleja las imágenes horizontal o verticalmente.
- Restaurar: Restablece la imagen original con un solo clic.
Tabla de Contenidos
¿Empezamos?
¿Por qué debería cambiar el tamaño de las imágenes en WordPress?
Cambiar el tamaño de las imágenes que añades a WordPress es importante por 2 razones:
- Para asegurarte de que tu sitio no se ralentiza por la carga de imágenes grandes.
- Para ahorrar espacio en el servidor de alojamiento de tu sitio.
Si aún no has tomado medidas para mejorar el rendimiento de tu sitio web, la compresión de imágenes es un buen punto de partida.
Si utilizas fotos de stock de alta calidad o trabajas con imágenes tomadas de tu cámara, es probable que tus imágenes tengan tamaños de archivo bastante grandes. Si bien estos archivos de imagen grandes pueden ser geniales para imprimir, los tamaños de imagen más pequeños funcionan mejor en la web porque los navegadores tardan menos en cargarlos.
La mayoría de los temas de WordPress están optimizados para un conjunto específico de tamaños de imagen que suelen ser:
- Grande
- Medio
- Pequeño
- Miniatura
Decidir qué tamaños de imagen se requieren en tu tema y cambiar el tamaño de tus imágenes subidas para que coincidan es una excelente manera de asegurar que tus imágenes se carguen rápidamente.
¿No estás seguro del tamaño que deben tener tus imágenes?
Primero, averigua el ancho de tu área de contenido en WordPress. Tu área de contenido es donde se muestran los textos o imágenes que añades a tu sitio.
Puedes comprobarlo usando la Herramienta de Inspección de Chrome. Haz clic derecho en cualquier lugar de tu sitio y selecciona Inspeccionar. Luego, pasa el cursor sobre tu área de contenido para ver su ancho en píxeles; no necesitas tocar el código.
Aparecerá una ventana con código. No te preocupes por lo intimidante que parezca, no tendrás que hacer nada con el código.
Mueve el cursor sobre el código hasta que veas una columna resaltada, normalmente en azul. Notarás una información emergente en la parte superior del área resaltada. El primer número es el ancho del contenido de tu tema.
En nuestro caso, el ancho es de 695 píxeles. Esto significa que cualquier imagen que subamos no debería superar los 695 píxeles de ancho.
Ahora que tienes el punto de partida para el tamaño de tu imagen, puedes crear una imagen destacada o redimensionar tus imágenes existentes en WordPress.
Veamos más de cerca cómo puedes usar WordPress para redimensionar imágenes.
¿Cómo cambio el tamaño de una imagen en WordPress?
Usar WordPress para redimensionar imágenes es bastante sencillo.
Para empezar, ve a Medios » Biblioteca desde tu panel de administración de WordPress.
Ahora, sube o haz clic en la imagen que te gustaría redimensionar en WordPress.
Desde aquí, haz clic en Editar imagen.
Debajo del encabezado Escalar imagen, puedes redimensionar la imagen introduciendo nuevas dimensiones. Esta herramienta reduce la imagen sin recortar nada, y WordPress mantiene automáticamente la proporción correcta.
Si solo introduces un ancho, la altura se calculará automáticamente basándose en la proporción de la imagen o viceversa.
En el primer cuadro, introduce el ancho de tu área de contenido. En nuestro caso, eran 695 píxeles.
Cuando hayas terminado, haz clic en Escalar para redimensionar la imagen.
Para usar la imagen redimensionada, vuelve a la página de detalles de la imagen y copia la URL como se muestra en la siguiente captura de pantalla.
¡Eso es todo! Ahora has usado WordPress para redimensionar una imagen, y puedes usarla donde quieras.
Para darte una idea de cómo redimensionar una imagen puede afectar la velocidad de tu página, veamos la velocidad de página de la imagen original en comparación con la imagen redimensionada.
Usamos la herramienta de prueba de velocidad de sitios web de Blog Tyrant para este ejemplo.
Aquí está el resultado de la prueba del tamaño de imagen original cuando se añade a una entrada de blog estándar.
Y aquí están los resultados para la imagen redimensionada.
Incluso pequeñas diferencias en el tamaño de la imagen pueden sumar rápidamente. Por ejemplo, nuestra imagen original era de 2,5 MB; después de redimensionarla, se redujo a 280 KB. Eso es una reducción del 90%. En un sitio con docenas de imágenes, estos ahorros pueden hacer que tus páginas carguen más rápido y evitar que los visitantes reboten.
Pero imagina un sitio web con cientos de imágenes. Incluso la más pequeña diferencia en los tiempos de carga puede tener un gran impacto en la probabilidad de que los visitantes permanezcan en tu página.
Aún así, WordPress ofrece más que un simple redimensionamiento de imágenes. También puedes usarlo para recortar, rotar y voltear imágenes. ¿Descubrimos cómo?
¿Cómo puedo recortar una imagen en WordPress?
Para recortar una imagen en WordPress, seguiremos los mismos primeros pasos que al redimensionar una imagen.
Ve a Medios » Biblioteca, haz clic en la imagen que deseas recortar y haz clic en Editar imagen.
A continuación, haz clic y arrastra el ratón sobre la imagen para empezar a recortar. Recortar significa cortar los bordes no deseados para centrarse en una parte específica de la imagen.
Puedes hacer clic en cualquiera de los pequeños cuadrados para ajustar el área recortada o mover el área por la imagen. Una vez que estés satisfecho, haz clic en el icono Recortar como se muestra a continuación.
Ahora haz clic en Guardar.
¡Así de simple, has recortado tu imagen!
Selecciona de nuevo la URL en la página de detalles de la imagen para usar la imagen recortada.
¿Pero qué pasa si quieres rotar tu imagen en una dirección diferente? No te preocupes, WordPress también puede hacerlo. Te mostraremos cómo a continuación.
¿Cómo roto una imagen en WordPress?
Para aprender a rotar una imagen en WordPress, sigue estas instrucciones.
Primero, ve a Medios » Biblioteca, elige tu imagen y haz clic en Editar imagen.
Ahora haz clic en los botones Rotar a la izquierda o Rotar a la derecha para rotar tu imagen 90 grados cada vez.
Si te equivocas, no entres en pánico. Haciendo clic en el botón Deshacer se restablecerá la imagen al último paso.
Haz clic en Guardar cuando estés contento.
¡Buen trabajo! Rotar una imagen en WordPress es bastante fácil, ¿verdad? Ahora veamos cómo voltear una imagen.
¿Cómo volteo una imagen en WordPress?
Voltear una imagen en WordPress sigue los mismos pasos básicos que rotarla.
Primero, ve a Medios » Biblioteca desde tu panel de WordPress, selecciona tu imagen y luego haz clic en Editar imagen.
Para voltear tu imagen, haz clic en el botón Voltear verticalmente o Voltear horizontalmente. Voltear refleja la imagen: verticalmente significa boca abajo, horizontalmente significa de izquierda a derecha.
Haz clic en Guardar cuando hayas terminado.
Con todos los cambios que has hecho en tu imagen, ¿qué pasa si quieres volver a la imagen original y empezar de nuevo? Sigue leyendo para descubrir cómo puedes hacer esto.
¿Puedo deshacer ediciones de imágenes en WordPress?
Todos nos equivocamos de vez en cuando. Somos humanos, ¿verdad?
Si te equivocas al usar WordPress para redimensionar tus imágenes, te cubrimos las espaldas. Hay una forma fácil de volver a la imagen original.
En la imagen de abajo, claramente hemos recortado la imagen en el lugar equivocado y hemos escalado la imagen a unas dimensiones demasiado pequeñas.
Mira en el lado derecho de la pantalla de edición de imágenes, y verás un encabezado llamado Restaurar imagen original.
Hacer clic aquí revela un botón que te permite restaurar la imagen a su tamaño original.
Haz clic en Restaurar imagen para restablecer todos tus cambios. Esto devuelve la imagen exactamente como estaba cuando la subiste por primera vez, eliminando cualquier recorte, volteo, rotación o cambio de tamaño que hayas hecho.
Ahora, tu imagen está exactamente como estaba cuando la subiste por primera vez. Muy útil, ¿verdad?
¡Ahí lo tienes!
Hoy has aprendido a usar WordPress para redimensionar imágenes. Además, cómo voltearlas, recortarlas, rotarlas y restablecerlas.
También has descubierto cómo encontrar el tamaño de imagen ideal según el área de contenido de tu tema de WordPress. Ahora, cuando los visitantes accedan a tu sitio web, sus navegadores cargarán tus imágenes más rápido sin perder calidad.
Esperamos que hayas disfrutado aprendiendo a cambiar el tamaño de las imágenes en WordPress. Si buscas más ayuda, consulta las siguientes guías:
- Cómo añadir una galería a las páginas de WordPress
- Cómo Cambiar el Diseño del Blog en WordPress
- Cómo crear una página personalizada en WordPress
- Cómo incrustar vídeo en WordPress
- Cómo cambiar las fuentes en los temas de WordPress
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
Hola, estoy intentando cambiar el tamaño de una imagen y probé a usar la opción Editar imagen como muestras arriba. Desafortunadamente, WordPress dice 'No se puede crear una imagen nueva'. ¿Podrías ayudarme con eso?
Hola,
La razón más probable es no tener instalado mod-gd.
Si estás trabajando en línea con una empresa de hosting y tienes Cpanel como plataforma de hosting, puedes habilitar este módulo en Cpanel a través de
PHP Selector—> extensiones—> gd.
Avísame si tienes alguna otra pregunta.
Saludos cordiales,
El cambio de tamaño no hizo nada. A menos que me haya saltado un paso, seguí tus instrucciones y la imagen se mantuvo del mismo tamaño que antes.
Sí, lo intenté de nuevo. Esto no está cambiando el tamaño para mí.
Hola Travis,
Para que podamos ayudarte más, ¿te importaría decirnos si recibes algún error al editar/guardar una imagen?
Gracias,
Esto ya no funciona en wp.com. Cuando hago clic en la imagen, "editar imagen" está en la parte superior. Cuando hago clic en eso, solo me permite rotar, recortar o voltear. He estado usando wp durante años y siempre he encontrado una manera de sortear esto. Ahora, parece que el único método es editarlo sin conexión antes de subirlo.
¿Me estoy perdiendo algo?
Hola Scott,
Primero, ¿puedo confirmar si estás usando la versión gratuita de WordPress.com o la versión autoalojada de WordPress.org? Esta guía está dirigida a las versiones autoalojadas de WordPress. También es una buena idea verificar que tu instalación de WordPress esté actualizada para cualquier problema.
Hola, estoy intentando añadir imágenes a través de un widget en la parte inferior de mi página web, pero en la página web aparecen más grandes que la imagen original importada, lo que hace que la imagen sea menos nítida. Redimensioné las imágenes aproximadamente 190/50 y 90/90 (para logotipos redondos) antes de añadirlas a mi biblioteca. ¿Cómo puedo ajustar la imagen en la página web para que aparezca como el tamaño de la imagen original importada? ¿Lo ajusto en el tema de la página web? ¿Qué me falta aquí?
Hola Dann,
Si subes una imagen, puedes editarla aquí: https://a.supportally.com/oCDtrF
La opción de subir una imagen usando tamaños como miniatura/mediana/grande, etc. ya no está presente usando los bloques de Gutenberg. Puedes instalar el editor clásico para que aparezca esta opción: https://a.supportally.com/OZ9Pyz
Saludos cordiales,
Hola. He estado usando la versión gratuita de WordPress durante más de 10 años y puedes imaginar que he estado muy descontento con su nueva interfaz últimamente. Entonces, una pregunta rápida: ¿se deshicieron de la opción para establecer tamaños de imagen como Grande, Mediana, Pequeña y Miniatura? Juro que ya no la encuentro en el menú habitual ni manipulando los "bloques" de imagen/galería.
Hola Emerson,
Si entiendo correctamente tu pregunta. Los bloques a los que te refieres son los bloques de imagen/galería de Gutenberg de WordPress y no sobre el plugin SeedProd, ¿correcto? Si es así, sí, la opción no está disponible usando los bloques de Gutenberg. Puedes cambiar el tamaño de la imagen usando el enlace Editar. Mira aquí: https://a.supportally.com/oCDtrF
O puedes instalar el plugin Classic Editor. La opción de subir imágenes usando diferentes tamaños todavía está disponible.
Saludos cordiales,
Intenté redimensionar un jpg que actualmente es de 850 x 369. Cuando intento reducirlo, dice que el archivo está restringido a 800 de ancho. La imagen aparece demasiado grande a 850 y 800. ¿Qué puedo hacer?
Hola Brenna, podrías intentar editar la imagen en un editor de imágenes en línea o en un software de edición de imágenes para reducir el tamaño del archivo y luego volver a subirla a tu sitio web.
Sé que debería haber empezado mi blog con imágenes más pequeñas, pero ahora la página carga muy pequeña. ¿Hay alguna forma de subir nuevas imágenes (que sean más pequeñas) sin necesidad de reformatear cada publicación?
Hola Adam. Puedes probar uno de estos plugins de compresión de imágenes. Muchos optimizan automáticamente las imágenes sin que necesites volver a subirlas.
8 de mayo de 2023
No hay "escalar imagen" en la función de editar imagen, ni hay nada que se pueda ajustar con respecto al tamaño de la imagen. Tampoco parece que pueda editar el tamaño de la imagen en un editor de publicaciones usando html. Parece que simplemente no hay forma visible de hacerlo... PERO sé que debe haber una manera o muchos abandonarían wp. ¿Puedes ayudarme a resolver esto? Tu publicación puede estar desactualizada porque wp no quiere permitir a los usuarios redimensionar o escalar imágenes. Pero, ¿cómo es eso un buen plan de negocios? Frustrada en Massachusetts
Hola Michael, la configuración que ves dentro del editor de imágenes puede verse diferente si estás usando WordPress.com, la versión alojada, en comparación con WordPress.org, la versión autoalojada. Puedes aprender la diferencia entre ambas aquí. Si sigues teniendo problemas, te sugerimos que te pongas en contacto con los foros de soporte de la plataforma WordPress correspondiente.
Esto da en el clavo... exactamente lo que necesitaba y cambiaré a .org usando tu tremenda guía. ¡Gracias!
¡Me alegra mucho que esto te haya ayudado! Si necesitas algo más, no dudes en preguntar.
Hola Stacey, ¿hay algún paso después de escalar y "copiar" el enlace? Sigo estos pasos pero mis imágenes no están escaladas en mi publicación.
Saludos
Hola Laura,
Asegúrate de que después de escalar tu imagen, salgas de la publicación en la que estás trabajando y actualices tu página, luego edita la publicación de nuevo y agrega tu imagen. A veces necesita una pequeña actualización para mostrarse con la nueva versión escalada. ¡Espero que esto ayude!