Añadir elementos visuales a tu sitio web de WordPress es una excelente manera de hacer que tus páginas sean más atractivas. Pero encontrar la imagen perfecta es solo la mitad del trabajo. A veces, tendrás que ajustar cómo se muestra el gráfico para hacerlo más atractivo u optimizarlo para el rendimiento web.
Afortunadamente, es fácil editar tus imágenes en WordPress. Puedes cambiar completamente el tamaño de una foto, recortar secciones irrelevantes e incluso optimizarla para una página de producto de WooCommerce.
En esta guía, te mostraremos cómo editar imágenes en WordPress. Después, hablaremos sobre la optimización de imágenes y cómo puede mejorar tus tiempos de carga. ¡Empecemos!
Cómo editar imágenes fácilmente en WordPress (8 maneras)
Hay varias formas diferentes de editar imágenes en WordPress. Empecemos hablando de editar el tamaño de las imágenes.
1. Cómo cambiar el tamaño de una imagen en WordPress
Es posible que quieras cambiar el tamaño de tus imágenes en WordPress porque las imágenes más pequeñas cargan más rápido. Si solo tienes una o dos fotos en tu sitio, puede que esto no suponga una diferencia apreciable. Pero los sitios con muchas imágenes requieren mucho procesamiento para cargar el contenido.
Además, es posible que quieras cambiar el tamaño de tus imágenes a unas dimensiones específicas por motivos de diseño.
Para cambiar el tamaño de tus imágenes en WordPress, ve a Medios → Biblioteca. Después, sube un archivo nuevo o selecciona uno existente. A continuación, haz clic en Editar imagen.
En Escalar imagen, introduce las nuevas dimensiones, especificando una anchura y una altura exactas. Después, haz clic en Escalar.
Para usar la versión redimensionada de la foto, vuelve a la Biblioteca de medios y selecciónala. Después, copia la URL del archivo.
Por último, pega la URL donde quieras usarla en tu sitio.
O simplemente puedes volver a insertar la imagen en el bloque Imagen de tu página.
2. Cómo recortar imágenes en WordPress
Recortar una imagen elimina parte de la foto sin cambiar su tamaño por completo. Por lo tanto, te permite eliminar las partes menos importantes de la imagen y centrar la atención en un objeto específico dentro del encuadre.
Para recortar una imagen en WordPress, ve a Medios → Biblioteca. Después, sube tu foto. A continuación, haz clic en Editar imagen y selecciona Recortar.
En este punto, podrás arrastrar físicamente el editor para recortar las partes de la imagen que no necesitas.
Cuando estés satisfecho con tu nueva foto, haz clic en Recortar de nuevo para aplicar los cambios. Después, haz clic en Guardar.
3. Cómo voltear una imagen
También es posible que quieras voltear una imagen en WordPress. Aunque no es tan habitual como otras ediciones de imágenes, voltear una imagen puede producir excelentes efectos artísticos.
Por ejemplo, voltear una imagen puede ajustar el foco de la fotografía y dirigir la mirada del visitante hacia elementos importantes. Además, puede reforzar el tema o la intención de una imagen o evocar ciertas emociones.
Para voltear una imagen en WordPress, ve a Medios → Biblioteca → Editar imagen. La siguiente acción depende de cómo quieras voltear la imagen. Puedes elegir Voltear verticalmente o Voltear horizontalmente.
Voltear verticalmente mostrará tu imagen al revés, mientras que la opción horizontal creará un efecto de imagen reflejada. Cuando estés satisfecho con los cambios, haz clic en Guardar.
4. Cómo rotar una imagen
También puedes rotar una imagen en WordPress, ya sea girándola en sentido contrario a las agujas del reloj o en el sentido de las agujas del reloj. Esta es una forma sencilla de solucionar problemas de coincidencia o alineación en tu página.
Para empezar, ve a Medios → Biblioteca → Editar imagen. Allí, haz clic en Girar a la izquierda o Girar a la derecha.
Esta acción rotará tu imagen 90 grados cada vez. Por lo tanto, si quieres girar tu imagen 180 grados, haz clic dos veces en el botón correspondiente.
Es importante tener en cuenta que, si cometes un error al editar tus imágenes, simplemente puedes seleccionar Deshacer para borrar la última acción. Luego, ¡haz clic en Guardar cuando hayas terminado de editar tu foto!
5. Cómo alinear una imagen
Alinear una imagen es una de las formas más sencillas de editar una foto en WordPress. Determina dónde se ubicará tu gráfico en la página en relación con el resto del contenido. Solo puedes aplicar ajustes de alineación una vez que hayas añadido una imagen a una entrada o página.
Primero, inserta la foto en tu página usando el bloque Imagen. Luego, ve a la barra de herramientas situada encima del bloque.
Haz clic en Alinear para abrir las opciones de alineación.
Como puedes ver, puedes alinear una imagen a la izquierda o a la derecha, o centrarla. Además, en esta etapa puedes cambiar las variaciones de ancho, haciendo que tu imagen tenga Anchura completa o Anchura amplia.
6. Cómo restaurar una imagen a su versión original
Al editar una foto en WordPress, es posible que cometas un error accidentalmente o apliques cambios no deseados. Afortunadamente, es fácil revertir cualquier edición y restaurar una imagen a su versión original.
Como mencionamos anteriormente, si solo quieres revertir una acción, haz clic en Deshacer en el editor de imágenes:
Como alternativa, si cambiaste el tamaño de tu foto e introdujiste las dimensiones incorrectas, selecciona Restaurar imagen.
A veces, este ajuste está oculto de forma predeterminada. En ese caso, tendrás que expandir la pestaña Restaurar imagen original para encontrar esta función. Restablecerá tu foto y eliminará los cambios que le hayas aplicado.
7. Cómo cambiar el tamaño de varias imágenes a la vez en WordPress
Actualmente, no existe una forma predeterminada de cambiar el tamaño de varias imágenes a la vez en WordPress. Pero puedes usar un plugin como Imsanity para añadir esa funcionalidad. Es una herramienta gratuita, así que puedes instalarla directamente desde WordPress.
Después, ve a Ajustes → Imsanity.
Al cambiar el tamaño de todas las imágenes de tu sitio, es importante tener en cuenta que esta acción puede alterar drásticamente el diseño de tus entradas y páginas. Por lo tanto, es buena idea crear una copia de seguridad nueva de tu sitio antes de empezar.
Jetpack VaultPress Backup es un excelente plugin de copias de seguridad automatizadas. Puedes restaurar tu sitio con un solo clic usando la aplicación móvil, incluso cuando tu sitio está desconectado. Y lo que es mejor, la herramienta puede hacer copias de seguridad de todos los archivos, de los datos de WooCommerce y de tu base de datos.
Si decides cambiar el tamaño de todas tus imágenes de WordPress con Imsanity, selecciona la altura y anchura máximas para tus fotos. Luego, guarda los cambios.
Como alternativa, haz clic en el icono de Vista de lista de la Biblioteca de medios para cambiar el tamaño de tus imágenes de forma selectiva.
Aquí puedes elegir fotos específicas y luego seleccionar Cambiar tamaño de imagen.
8. Cómo editar y cambiar el tamaño de las imágenes para WooCommerce
Si gestionas una tienda de comercio electrónico, es posible que también quieras editar las imágenes de productos en WooCommerce. Al fin y al cabo, necesitarás fotos de alta calidad para convencer a los clientes de que compren tus productos.
Por suerte, puedes hacer la mayoría de los cambios usando el Personalizador de WooCommerce. Para empezar, ve a Imágenes de Appearance → Customize → WooCommerce → Product.
Aquí puedes ajustar la anchura de la imagen principal y de las miniaturas, y elegir entre cuadrada, personalizada o sin recortar.
Además, los usuarios con conocimientos de programación pueden controlar los tamaños de las imágenes de WooCommerce mediante hooks. Por ejemplo, la función wc_get_image_size modifica las definiciones del tamaño de la imagen.
Además, WooCommerce 3.3 y versiones posteriores proporcionan acceso al cambio de tamaño automático de las miniaturas. Como alternativa, puedes instalar un plugin, como Force Regenerate Thumbnails, para que gestione este proceso por ti.
Cómo optimizar tus imágenes para mejorar la velocidad de carga
Hasta ahora, hemos hablado principalmente de editar fotos por motivos de diseño visual. Sin embargo, hay otro aspecto igual de importante: la optimización de imágenes.
Como mencionamos anteriormente, los archivos de imagen pesados pueden perjudicar la velocidad de carga de las páginas y frustrar a los visitantes. Por eso, es una buena práctica optimizar tus fotos para tu sitio web de WordPress.
A continuación se indican algunos pasos para ayudarte a empezar.
Paso 1: Instala Jetpack y Jetpack Boost
Una de las formas más sencillas de optimizar la entrega de contenido en tu sitio es instalar plugins como Jetpack y Jetpack Boost.
Jetpack tiene una CDN gratuita para imágenes que sirve tus imágenes desde las ubicaciones más cercanas a tus visitantes. Esto puede mejorar los tiempos de carga de los usuarios de todo el mundo. Las CDN son especialmente útiles para sitios web con muchas imágenes que tienden a ofrecer un rendimiento lento.
Pero la tecnología Photon de Jetpack CDN hace mucho más que un CDN normal. Recodifica automáticamente las imágenes a formatos más ligeros y modernos. Cambia automáticamente su tamaño según las necesidades de cada visitante — ofreciendo la mejor experiencia posible tanto en velocidad como en calidad visual.
Jetpack Boost te permite implementar fácilmente la carga diferida de imágenes y también incluye opciones adicionales para mejorar la velocidad, como aplazar JavaScript y generar CSS crítico.
Y lo mejor es que ambas herramientas funcionan en segundo plano en tu sitio y requieren poco o ningún mantenimiento continuo. Además, con Jetpack Boost, puedes acceder a informes rápidos con puntuaciones claras del rendimiento del sitio tanto en ordenadores como en dispositivos móviles.
Puedes instalar Jetpack Boost como plugin gratuito de WordPress o cambiar a uno de los planes de pago, que ofrece funciones de optimización adicionales. Después, ve a Plugins → Añadir nuevo para instalar y activar la herramienta.
Sigue el mismo proceso para descargar el plugin de Jetpack.
Paso 2: Activa la carga diferida y el CDN
La carga diferida es una de las mejores formas de acelerar la entrega de contenido. Esta configuración evita que las imágenes se carguen hasta que los visitantes se desplacen hasta la parte de la página donde se encuentran. Por lo tanto, tu sitio web no tendrá que cargar todo el contenido visual simultáneamente.
Por suerte, esta es una de las funciones gratuitas disponibles con Jetpack Boost. Para empezar a usar el plugin, tendrás que conectarlo a una cuenta de WordPress.com. Si no tienes una cuenta, es completamente gratis crear una.
Después, ve a Jetpack → Boost para configurar los ajustes.
Aquí, usa el interruptor para activar la carga diferida de imágenes.
Para activar la CDN, ve a Jetpack → Ajustes y abre la pestaña de Rendimiento.
Busca la sección que dice Rendimiento y velocidad. Después, activa Activar acelerador del sitio:
Paso 3: Activa ajustes adicionales para obtener mayor velocidad
El primer ajuste que verás en el panel de Jetpack Boost es Optimizar la carga de CSS. Cuando activas este ajuste, Jetpack genera CSS crítico para tus páginas web.
Esto significa que solo se cargará el CSS de la parte visible inicialmente (la parte de la página que los usuarios pueden ver inmediatamente) hasta que los visitantes se desplacen hacia abajo por la página. De esta forma, tu contenido se carga mucho más rápido, especialmente para quienes utilizan dispositivos móviles.
Con un plan de pago de Jetpack Boost, puedes ahorrar tiempo gracias a la generación automatizada de CSS crítico.
De esta forma, puedes seguir haciendo cambios en el sitio según sea necesario. Jetpack vuelve a generar automáticamente el CSS crítico y las puntuaciones de rendimiento de tu sitio web cada vez que actualizas el contenido.
Jetpack Boost también te permite aplazar la carga de JavaScript no esencial. Esto significa que tu sitio cargará primero los elementos más visibles, como los estilos y las imágenes, y retrasará otras tareas hasta más adelante. Este proceso reduce la carga de tu servidor.
Preguntas frecuentes sobre la edición de imágenes en WordPress
Ahora, ¡responderemos algunas de las preguntas más frecuentes sobre la edición y optimización de imágenes en WordPress!
¿Cuáles son los mejores formatos de imagen para WordPress?
La biblioteca multimedia de WordPress actualmente admite imágenes JPEG/JPG, PNG y WebP. JPEG y PNG suelen ser los formatos más populares y utilizan procesos de compresión diferentes.
Los JPEG son una excelente opción para portafolios de fotografía y otros contenidos muy visuales, ya que el tipo de compresión mantiene una alta calidad de imagen.
Por otro lado, los PNG admiten fondos transparentes, por lo que suelen preferirse para fines de diseño gráfico. Además, funcionan muy bien para capturas de pantalla e iconos.
WebP está ganando popularidad. Como formato de imagen diseñado específicamente para su uso en la web, ofrece una mejor compresión que las alternativas y da como resultado un tamaño de archivo menor.
¿Es mejor cambiar el tamaño de una imagen antes de subirla a WordPress?
Para mantener tiempos de carga rápidos, es mejor cambiar el tamaño de las imágenes antes de subirlas a WordPress. De este modo, podrás mantener los tamaños de archivo lo más pequeños posible.
Por supuesto, después puedes cambiar aún más el tamaño de las imágenes dentro de WordPress. Una vez que añadas una foto a tu sitio, podrás aplicar ediciones adicionales desde tu biblioteca multimedia, como cambiar el tamaño o recortar.
¿Son importantes la compresión y la optimización de imágenes?
La compresión de imágenes crea un archivo más pequeño. También puedes optimizar tus imágenes mediante funciones adicionales, como la carga diferida.
Tanto la compresión como la optimización de imágenes son importantes porque mejoran la velocidad de carga de tu WordPress. Esto es esencial, ya que Google utiliza la velocidad como factor de posicionamiento.
Además, un sitio web rápido es más fácil de usar. Puede reducir las tasas de rebote al animar a los visitantes a pasar más tiempo en tu sitio.
La velocidad también es importante para Core Web Vitals. Se trata de un conjunto de métricas estandarizadas que muestran cómo experimenta un usuario una página web. La compresión y la optimización de imágenes te permiten mejorar dos métricas clave: First Contentful Paint (FCP) y Largest Contentful Paint (LCP).
Editar y optimizar imágenes en WordPress
Tomar fotografías hermosas o crear ilustraciones únicas es una excelente manera de mejorar el diseño de tu sitio web. Pero a veces tus imágenes requerirán alguna edición o ajuste.
Por suerte, puedes cambiar el tamaño, recortar, alinear, voltear y rotar imágenes fácilmente en WordPress. Y lo que es mejor, puedes cambiar el tamaño de las fotos en bloque con la ayuda de un plugin. También es muy sencillo cambiar el tamaño de las imágenes de productos y las miniaturas para WooCommerce.
La optimización de imágenes es fundamental para mantener tiempos de carga rápidos y crear una mejor experiencia de usuario. La forma más sencilla de optimizar tus imágenes es con Jetpack Boost. Con este plugin, tendrás acceso a la carga diferida, CSS crítico y la CDN de Jetpack. ¡Consulta hoy los planes de Jetpack para empezar!
Jetpack 