Las imágenes de alta calidad influyen enormemente en la presentación de un sitio web. A medida que tu sitio envejece, actualizar las imágenes es fundamental para mantenerlo fresco, actual y relevante.
Afortunadamente, reemplazar imágenes en WordPress es un proceso sencillo. Solo tienes que seguir algunas pautas. En esta página, aprenderás a reemplazar una imagen en WordPress sin causar problemas mayores en tu sitio web y a reducir su tamaño al mismo tiempo.
Qué hacer antes de reemplazar una imagen en WordPress
Si solo buscas reemplazar imágenes en WordPress para mejorar el rendimiento de tu sitio, recorrer cada página y entrada, eliminar las fotos antiguas y subir otras nuevas resulta bastante poco realista.
En su lugar, puedes optimizar todos los archivos de imagen de forma mucho más eficiente mediante un plugin. Ahorrarás tiempo y tus imágenes se optimizarán automáticamente.
Jetpack Boost es la mejor opción para esto.
Instala una herramienta como Jetpack Boost
Jetpack Boost es una excelente forma de ahorrar tiempo, ya que automatiza el proceso de cambiar el tamaño de las imágenes (¡y mucho más!).
La función de Imagen CDN sirve archivos multimedia desde la red global de Jetpack, una red de distribución de contenido. Redimensiona automáticamente las imágenes, las convierte a formatos más eficientes y las entrega desde el servidor más cercano a cada visitante.
La herramienta Image Guide corrige automáticamente el tamaño de los archivos, las resoluciones subóptimas y las proporciones de aspecto de tus imágenes, lo que mejora tanto la experiencia del usuario como el tiempo de carga.
Para instalar Jetpack Boost, ve a Plugins → Añadir nuevo plugin en el panel de WordPress. Busca Jetpack Boost. Localízalo entre las opciones y haz clic en Instalar → Activar.
Activa «Image Guide» e «Image CDN»
Una vez instalado y activado Jetpack Boost, te pedirá que elijas qué versión quieres: gratuita o premium.
La versión gratuita puede ayudarte a:
- Optimizar la carga de CSS crítico
- Almacenar en caché las páginas del sitio
- Retrasar el JavaScript no esencial
- Concatenar JavaScript y CSS
- Aprovechar la potencia de un CDN de imágenes
- Corregir errores de tamaño de imagen
La versión Premium añade funciones como:
- Optimización automática de CSS
- Análisis automático del tamaño de las imágenes
- Puntuaciones históricas de rendimiento
- Configuración de calidad de Image CDN
- Asistencia exclusiva por correo electrónico
Para este tutorial, usaremos la versión gratuita. Para comenzar, haz clic en Comenzar gratis.
Cuando la página se actualice y muestre la pantalla de ajustes, desplázate hacia abajo hasta Image CDN y Image Guide. Activa ambos interruptores. Tanto Image CDN como Image Guide están listos para optimizar tus imágenes.
La opción Optimize Critical CSS Loading está activada de forma predeterminada. Genera automáticamente el CSS crítico. Permanece en esta página hasta que finalice el proceso.
Usa Jetpack Boost para cambiar el tamaño y optimizar las imágenes automáticamente
Image CDN e Image Guide funcionan en segundo plano. No es necesario ajustar ninguna configuración. Una vez activados, Boost proporciona una puntuación general para tu sitio.
Puntuación general
La puntuación general muestra resultados individuales para móviles y ordenadores. Esto refleja la velocidad y el rendimiento histórico de tu sitio. La puntuación forma parte de las funciones gratuitas, mientras que para desbloquear el rendimiento histórico necesitas la versión premium. Para ver tu puntuación, ve a Jetpack → Boost y selecciona Actualizar para ver la puntuación más reciente.
La puntuación varía según el contenido y la optimización de tu sitio. Supongamos que un sitio de prueba obtiene 87 en dispositivos móviles y 90 en ordenadores antes de activar Boost. Después de activar el plugin, obtiene 93 y 95, respectivamente. Ahora el sitio carga más rápido y utiliza menos recursos del servidor.
Image Guide
Image Guide muestra información en la interfaz pública del sitio web. Haz clic en Image Guide en el menú superior para activarlo o pausarlo. Cuando está activo, la información aparece dentro de círculos verdes en la esquina superior izquierda de cada imagen.
Pasa el cursor sobre ellos para ver información sobre las imágenes. Una ventana emergente muestra información sobre la extensión del archivo, el tamaño de la imagen, el ahorro potencial y un enlace para aprender a optimizar las imágenes.
Este ejemplo muestra que la imagen es 1,14 veces más pequeña de lo esperado para esta pantalla, por lo que podría verse borrosa. También proporciona las dimensiones del archivo, el tamaño en pantalla y el tamaño del archivo.
Cómo reemplazar una imagen en WordPress (cuatro formas)
Hay varios métodos para reemplazar una imagen en WordPress sin causar errores, ya sea que reemplaces la imagen en la biblioteca multimedia de WordPress o dentro de un contenido específico. Veamos cuatro formas de reemplazar una imagen en WordPress.
Método 1: usar el editor de bloques
Este método deja la imagen antigua en la biblioteca multimedia de WordPress mientras la reemplaza en el contenido. Cualquier otro contenido que utilice la imagen antigua seguirá haciéndolo. Es ideal si solo quieres reemplazar la imagen en una o dos ubicaciones y conservar la original para otras entradas.
Abre el contenido y selecciona la imagen que quieres reemplazar. Esto abre un menú encima del bloque de imagen. Haz clic en Reemplazar para ver una pequeña ventana emergente. Selecciona Abrir biblioteca multimedia.
Busca en la biblioteca multimedia de WordPress la imagen que quieres usar y selecciónala. Para ello, haz clic en Seleccionar en la esquina inferior derecha de la biblioteca.
La nueva imagen reemplazará a la antigua en el bloque de WordPress. La imagen original seguirá existiendo en la biblioteca multimedia y todas las demás páginas o entradas que la utilicen continuarán mostrándola con normalidad.
Reemplazar manualmente una imagen en unas pocas entradas no lleva mucho tiempo, pero se vuelve lento si necesitas reemplazar varias imágenes en muchas entradas. También es posible pasar por alto alguna entrada y dejar la imagen antigua en su lugar en vez de cambiarla en todas las ubicaciones.
Por eso, es mejor reemplazar la imagen en la biblioteca multimedia si se utiliza en varias entradas y quieres cambiarla en todas las ubicaciones.
Método 2: usar la biblioteca multimedia de WordPress
Este método reemplaza la imagen antigua dentro de la biblioteca multimedia de WordPress. Cualquier contenido que use la imagen antigua tendrá la nueva imagen en su lugar. Este método es ideal si la imagen se usa en muchas entradas del sitio web y no quieres conservar la imagen antigua. Mantiene intacta la URL, lo que reduce los errores de enlaces dentro del sitio web.
Instalar un plugin
Utiliza un plugin para añadir la opción de reemplazar una imagen dentro de la biblioteca multimedia. El plugin reemplaza la imagen sin causar errores en tu contenido. Hay varios buenos plugins entre los que elegir. El plugin Enable Media Replace es el más popular. Te da control sobre el proceso de reemplazo.
Para instalar el plugin Enable Media Replace, ve a Plugins → Añadir nuevo plugin en el panel de WordPress. Busca «Enable Media Replace». Busca el plugin entre las opciones de la lista y haz clic en Instalar ahora, y después en Activar. Una vez instalado, Reemplazar medios será una opción de tu biblioteca multimedia.
Reemplazar una imagen en la biblioteca multimedia en vista de lista
Reemplazar una imagen de la biblioteca multimedia con el plugin Enable Media Replace es muy sencillo. En el panel de WordPress, ve a Medios → Biblioteca. Selecciona el icono de lista, busca la imagen que quieras reemplazar, pasa el cursor sobre ella y haz clic en Reemplazar medios.
Se abre una nueva ventana con opciones de reemplazo. Elige las opciones en la parte inferior de la pantalla antes de seleccionar la nueva imagen. Este plugin tiene dos opciones de reemplazo, entre ellas:
- Reemplazar el archivo. Usa un archivo multimedia del mismo tipo y conserva el nombre del archivo. Esto solo reemplazará el archivo.
- Reemplaza el archivo, usa el nombre del nuevo archivo multimedia y actualiza todos los enlaces. Reemplaza el nombre del archivo y actualiza todo el contenido para mostrar el nuevo archivo. Sin embargo, esto no actualizará los sitios web externos que enlacen directamente a la nueva imagen, por lo que esos enlaces dejarán de funcionar.
Independientemente de las opciones de reemplazo que elijas, también puedes seleccionar opciones para la fecha del nuevo archivo. Las opciones incluyen:
- Reemplazar la fecha original por la fecha actual.
- Conservar la fecha original.
- Usar una fecha personalizada.
En la parte superior de la pantalla de Enable Media Replace, verás un área llamada Seleccionar medios de reemplazo. Muestra el archivo actual a la izquierda y un área para el nuevo archivo a la derecha. Haz clic en Nuevo para abrir una ubicación en tu ordenador o arrastra el nuevo archivo desde el escritorio hasta el área.
Previsualiza la nueva imagen y compara el antes y el después antes de subirla. En este ejemplo, se está subiendo la imagen redimensionada con un tamaño de 510 KB, mucho menor que el original de 5 MB. La imagen se redimensionó y comprimió manualmente con un editor de imágenes.
Haz clic en Subir en la parte inferior de la página.
Una vez completada la carga, un mensaje te informa de que el archivo se ha reemplazado y se te lleva a un editor de imágenes. Si quieres, sube una nueva imagen desde este editor y desplázate hacia abajo para elegir el tamaño de imagen que quieres usar como miniatura en la barra lateral derecha.
Reemplazar una imagen en la biblioteca multimedia en vista de cuadrícula
Selecciona la imagen que quieres reemplazar para abrir los detalles del adjunto. Selecciona el icono de cuadrícula si no está activo.
En el lado derecho de la ventana emergente, haz clic en el botón llamado Subir un archivo nuevo.
Esto te lleva a la pantalla Carga de reemplazo de medios donde puedes reemplazar la imagen como se describe en el ejemplo anterior.
Método 3: usar el editor del creador de páginas
Este método funciona de forma similar al proceso que utiliza el editor de bloques. Reemplaza la imagen antigua dentro del contenido, pero la conserva en la biblioteca multimedia. De este modo, el resto del contenido que usa la imagen antigua sigue utilizándola. Es ideal si quieres reemplazar imágenes en unas pocas entradas, pero conservar la original en la biblioteca para usarla en otras entradas.
Elementor es uno de los creadores de páginas más populares, así que veamos cómo reemplazar imágenes con él.
Para reemplazar imágenes en Elementor, haz clic en la imagen del contenido que quieras reemplazar. Se abre un menú en el lado izquierdo de la pantalla. Este menú incluye todas las opciones del bloque de imagen. Debería haber tres pestañas en la parte superior del menú.
Selecciona la pestaña Contenido, si aún no está seleccionada. Pasa el cursor sobre la imagen en el menú. Aparece un pequeño botón en la parte inferior de la imagen del menú; haz clic en el botón llamado Elegir imagen para abrir la biblioteca multimedia.
Elige la nueva imagen y haz clic en el botón Seleccionar en la esquina inferior derecha de la pantalla de la biblioteca multimedia.
La nueva imagen reemplazará a la antigua en el contenido, pero la imagen original seguirá existiendo en la biblioteca multimedia para usarla en otro contenido.
Método 4: mediante FTP o el administrador de archivos de tu alojamiento
Otra opción es usar FTP o el administrador de archivos de tu proveedor de alojamiento para reemplazar una imagen antigua de la biblioteca multimedia por una nueva, manteniendo intacta la URL de la imagen. Este método es ideal si no quieres usar un plugin para reemplazar imágenes en todas las ubicaciones en las que se utilizan.
Necesitarás un cliente FTP o el administrador de archivos proporcionado por tu empresa de alojamiento. La navegación por los archivos es la misma en ambos casos. Para este tutorial, usaremos el administrador de archivos.
Inicia sesión en tu cPanel y selecciona Administrador de archivos en las opciones del menú.
Si tienes varios sitios web, haz clic en la carpeta del sitio que quieras modificar. Si tienes un solo sitio web o quieres modificar el sitio principal, haz clic en public_html.
Abre la carpeta wp_content.
Luego abre la carpeta uploads. Esta carpeta contiene todos los archivos que has subido a tu sitio web de WordPress.
Los archivos están organizados en carpetas por año. Selecciona la carpeta correspondiente al año en que subiste la imagen y, después, la del mes.
Dentro de esta carpeta, verás todas las imágenes que hayas subido ese mes. Puedes subir una imagen nueva con el mismo nombre que la imagen que quieras sobrescribir o eliminar los archivos antiguos antes de subirla. Si quieres sobrescribirla, haz clic en Subir.
Si quieres eliminar los archivos antiguos, selecciona todas las versiones de la imagen y elimínalas. Esto garantiza que todos los tamaños se actualicen a la nueva imagen. WordPress crea automáticamente varias versiones de la nueva imagen en distintos tamaños.
Haz clic en Confirmar para eliminar los archivos.
A continuación, selecciona Subir en la parte superior de la pantalla.
Si decides sobrescribir los archivos antiguos en lugar de eliminarlos, selecciona Sobrescribir archivos existentes en la pantalla de subida. Sube una imagen nueva con el mismo nombre que la anterior. Todas las entradas que usaban la imagen antigua usarán ahora la nueva.
Prácticas recomendadas para reemplazar y gestionar imágenes
Es importante seguir algunas prácticas recomendadas al reemplazar archivos multimedia y gestionarlos en WordPress. De lo contrario, la biblioteca multimedia de WordPress se vuelve pesada y las imágenes cargan lentamente. Esto también hace que la propia biblioteca multimedia cargue lentamente en el área de administración mientras intentas trabajar en tu sitio.
Elige los formatos de imagen adecuados
Hay muchos formatos de archivo disponibles y cada uno tiene sus ventajas. No existe un formato perfecto para todas las necesidades. Sin embargo, elegir el formato de archivo correcto es importante, así que selecciona uno que equilibre la calidad y el tamaño del archivo según lo que mejor se adapte al contenido.
Aquí tienes algunas pautas que te ayudarán a decidir.
- JPEG. Usa JPEG para fotografías detalladas e imágenes con degradados. Este formato rasterizado ofrece compresión con pérdida y archivos de pequeño tamaño. Se pierde un poco de calidad, pero es menos perceptible en imágenes pequeñas.
- PNG. Elige PNG para texto, logotipos y gráficos con bordes nítidos y transparencia. Este formato rasterizado proporciona compresión sin pérdida, conserva la calidad de la imagen, pero da lugar a archivos de mayor tamaño.
- SVG. Es un gráfico vectorial con compresión sin pérdida que permanece nítido al cambiar de escala. Es ideal para logotipos e iconos que deben mantenerse nítidos en cualquier tamaño.
- WebP. Considera formatos más recientes como WebP para obtener una compresión alta. Este formato ofrece imágenes de calidad moderada con archivos de menor tamaño. Sin embargo, asegúrate de comprobar la compatibilidad de los navegadores al usar formatos nuevos.
Mantén una calidad de imagen uniforme
Mantén una calidad de imagen uniforme en todo tu sitio web. Una calidad de imagen inconsistente parece poco profesional. La uniformidad ayuda a consolidar la identidad de marca de un sitio y mantiene una apariencia profesional en general.
Actualiza y revisa las imágenes periódicamente
Actualizar las imágenes periódicamente también ayuda a mantener la uniformidad. Además, te permite actualizar imágenes antiguas que quizá ya no se ajusten a la identidad de marca o no tengan el nivel de calidad deseado. Realizar una auditoría de imágenes de forma periódica también puede acelerar los tiempos de carga y reducir el uso de almacenamiento.
Cómo Jetpack Boost ayuda a automatizar estas prácticas recomendadas
Boost proporciona las herramientas necesarias para aplicar estas prácticas recomendadas de forma sencilla. Cambia automáticamente el tamaño de las imágenes y las convierte a los mejores formatos con los tamaños adecuados. Boost supera a los cinco principales plugins de rendimiento, por lo que es una excelente opción para optimizar sitios web.
Herramientas como la Guía de imágenes y la CDN de imágenes eliminan las conjeturas al identificar qué imágenes deben mejorarse y acelerar los tiempos de carga. La optimización automatizada del código agiliza aún más los archivos de tu sitio para ofrecer un rendimiento de nivel superior.
Por último, todo lo relacionado con Jetpack Boost está pensado para ayudarte a mejorar tu puntuación de Core Web Vitals, lo cual es clave para mejorar tu posicionamiento en los motores de búsqueda.
Si quieres acelerar tu sitio sin sacrificar tu tiempo ni tu dinero, Jetpack Boost es el plugin que estabas buscando.
Preguntas frecuentes
Aquí se ha explicado mucho sobre cómo reemplazar imágenes en WordPress, pero si alguna de tus preguntas aún no ha sido respondida, lo siguiente debería resolverla.
¿Qué tipos de archivo de imagen puedo usar en WordPress?
WordPress admite de forma nativa los tipos de archivo de imagen JPEG, PNG, GIF e ICO (el formato utilizado para los favicons). WordPress puede admitir tipos de archivo multimedia como SVG, BMP y WebP, pero estos requieren un plugin.
¿Dónde puedo encontrar la biblioteca multimedia en WordPress?
Para encontrar la biblioteca multimedia en WordPress, ve al panel de administración y haz clic en Medios → Biblioteca. Aquí se muestran todas las imágenes de tu biblioteca. Puedes ordenarlas, buscarlas o seleccionar una imagen. Para añadir un archivo de imagen nuevo, ve a Medios → Añadir nuevo archivo multimedia.
¿Puedo reemplazar imágenes en lote en WordPress?
No puedes reemplazar imágenes en lote en WordPress sin un plugin. De forma predeterminada, la biblioteca multimedia solo tiene una función de selección masiva para eliminar imágenes.
¿Qué debo hacer si elimino accidentalmente una imagen de mi sitio de WordPress?
Si eliminas accidentalmente una imagen, puedes volver a subirla o restaurar una copia de seguridad reciente. Lo mejor es utilizar un servicio que proporcione copias de seguridad en tiempo real para que no se pierda nada.
Para obtener copias de seguridad de la mejor calidad, utiliza un plugin como Jetpack VaultPress Backup. Este es un plugin premium con copias de seguridad en la nube en tiempo real, 10 GB de almacenamiento para copias de seguridad, un historial de archivos de 30 días y restauraciones en un clic.
¿Por qué es importante optimizar las imágenes para la velocidad del sitio web?
La optimización de imágenes es importante para la velocidad del sitio web porque los archivos multimedia grandes cargan lentamente, lo que provoca mayores tasas de rebote, menos visitas recurrentes y un peor posicionamiento en los motores de búsqueda. Los archivos de mayor tamaño también requieren más espacio de almacenamiento y ancho de banda.
¿Cómo puedo saber si una imagen es demasiado grande para mi sitio web?
La función Guía de imágenes de Jetpack Boost proporciona herramientas para comprobar de un vistazo el tamaño de las imágenes. Muestra resoluciones, proporciones y tamaños subóptimos.
¿Qué es un CDN y cómo ayuda a distribuir imágenes?
Una CDN (red de distribución de contenido) es una red que comprime y almacena imágenes hasta que un usuario las solicita. Después, las imágenes se descomprimen en tiempo real y se entregan según la ubicación del usuario. Una CDN entrega las imágenes más rápido y reduce la carga del servidor del sitio web. Jetpack Boost proporciona un CDN de imágenes, lo que ayuda a entregar imágenes optimizadas de forma eficaz.
¿Cuáles son las ventajas de usar imágenes WebP en mi sitio de WordPress?
Desarrollado por Google, el formato de imagen WebP mejora la velocidad de carga de los sitios web y mantiene una calidad de imagen aceptable con tamaños de archivo reducidos. Esto se traduce en una carga de páginas más rápida, una mejor experiencia de usuario y una mejor clasificación en los motores de búsqueda. Afortunadamente, Image CDN en Jetpack Boost convierte automáticamente las imágenes de WordPress a WebP.
¿Puedo automatizar el proceso de optimización de imágenes en WordPress?
Sí. Jetpack Boost ofrece optimización automatizada de imágenes.
¿Qué otras funciones de optimización de WordPress ofrece Jetpack Boost?
Jetpack Boost está disponible en una versión gratuita y otra premium. La versión gratuita incluye optimización crítica de CSS, almacenamiento en caché de las páginas del sitio, la posibilidad de posponer JavaScript no esencial y la concatenación de JavaScript y CSS.
La versión premium incluye optimización automática de CSS, análisis del tamaño de las imágenes, puntuaciones históricas de rendimiento, un CDN de imágenes, cambio automático del tamaño de las imágenes y soporte dedicado por correo electrónico.
¿Dónde puedo obtener más información sobre Jetpack Boost?
Puedes obtener más información sobre Jetpack Boost y sus funciones en la página del producto de Jetpack Boost.
Jetpack 