Cómo reparar imágenes rotas en WordPress: consejos prácticos

Las imágenes desempeñan un papel fundamental en la mejora de la experiencia y la interacción de los usuarios . Ver imágenes rotas en tu sitio de WordPress devalúa tu marca, por lo que es crucial aprender a solucionar este problema.

Además de la interacción, las imágenes también juegan un papel importante en el posicionamiento web, por lo que las imágenes rotas pueden ser una mala noticia para la reputación general de tu sitio web. Pero no te preocupes, hay muchas maneras de detectar y corregir imágenes rotas.

Si bien siempre puedes asegurarte de que los enlaces de tu sitio web de WordPress estén correctos con la ayuda del soporte técnico, es importante comprender los conceptos básicos para solucionar problemas con imágenes rotas. Hoy, exploraremos cómo solucionar fácilmente este problema en WordPress.

TL;DR: Guía rápida para solucionar problemas con imágenes de sitios web dañadas

• Analiza tu sitio web con un plugin para encontrar rápidamente archivos multimedia que falten o no estén disponibles.
• Compruebe cuidadosamente las rutas, los nombres y las extensiones de los archivos para asegurarse de que coinciden exactamente.
• Vuelva a subir o reemplace los archivos dañados o eliminados directamente desde la biblioteca multimedia.
• Evite los enlaces externos a imágenes y mantenga los archivos en su propio servidor para una mayor fiabilidad y velocidad.

¿Qué es una imagen rota y por qué es importante repararla?

En pocas palabras, las imágenes rotas llevan a un enlace que ya no está disponible o está dañado. Cuando los usuarios hacen clic en una imagen rota, reciben un error 404 o un icono de imagen rota, lo que indica que la imagen no está disponible. Es uno de los errores más comunes de WordPress.

Como se mencionó al principio, una imagen rota es un problema grave en tu sitio web. Por ejemplo, si tienes una tienda online o un sitio web de hostelería que depende en gran medida de las imágenes de los productos, los usuarios esperan imágenes de alta calidad.

Si encuentra una imagen rota, puede afectar negativamente a su negocio y perjudicar la experiencia del usuario. No solo los usuarios, sino también los bots de Google pueden escanear su sitio web en busca de enlaces rotos y marcarlo como poco fiable o spam debido a las imágenes rotas. Esto también afecta al diseño web adaptable de WordPress.

Por lo tanto, tener imágenes o enlaces rotos en tu sitio web puede dañar su credibilidad e imagen de marca. Es importante que realices un mantenimiento regular del sitio web, revises si hay imágenes o enlaces rotosy los soluciones de inmediato.

Muchos propietarios de sitios web también tienen problemas con las imágenes JPEG, especialmente cuando estos archivos se corrompen o se renombran accidentalmente.

¿Cómo detectar imágenes rotas en WordPress?

Ahora que comprende los enlaces rotos y cómo pueden afectar la reputación de su sitio web de WordPress, es imperativo detectar imágenes rotas.

Aunque existen muchas maneras de comprobar los enlaces rotos en su sitio web, la más sencilla es utilizar el plugin de WordPress Broken Link Checker.

Con este plugin, puedes comprobar fácilmente si tu sitio web tiene imágenes rotas o enlaces caídos, y corregirlos en WordPress. El plugin cuenta con una versión gratuita y otra premium. La versión gratuita permite detectar problemas mediante un escaneo manual, mientras que la versión premium ofrece funciones más avanzadas.

Para comenzar a detectar las imágenes y enlaces rotos:

• Instalar y activar el complemento de verificación de enlaces rotos en WordPress

• Después de instalar el complemento, vaya a la página del verificador de enlaces rotos, seleccione "escanear enlaces rotos" y haga clic en "iniciar un nuevo escaneo"

• El plugin comenzará a escanear tu sitio web en busca de todos los enlaces rotos. Podrás ver el número de páginas y entradas en la barra de progreso mientras el escaneo continúa

• Una vez finalizado el escaneo, obtendrás una lista de todos los enlaces rotos para que puedas corregir las imágenes que no funcionan en WordPress.

Estos escaneos le ayudan a identificar rápidamente archivos de imágenes faltantes que pueden haberse movido, eliminado o vinculado incorrectamente durante actualizaciones o migraciones.

Como alternativa, puede utilizar el comprobador de enlaces rotos de Seahawk Media, que forma parte de nuestras herramientas de prueba gratuitas, o contratar a nuestros desarrolladores de WordPress para obtener resultados rápidos.

Relacionado: Cómo optimizar imágenes y mejorar la velocidad del sitio web

¿Cómo arreglar imágenes rotas en WordPress?

Antes de adentrarnos en cómo solucionar los problemas de imágenes rotas en WordPress, veamos algunas de las razones que hay detrás de este problema.

Analicemos los problemas que pueden provocar que las imágenes se vean rotas en WordPress:

• Ruta de archivo incorrecta a la ubicación de la imagen.
• Archivo de imagen dañado.
• Falta de coincidencia en el formato de la imagen (por ejemplo, el archivo de imagen es .jpg, pero el código lo identifica como .png).
• Cambios en el nombre del archivo de imagen.
• Los archivos se han eliminado o faltan en el servidor (esto suele ocurrir durante la migración del sitio).

Las anteriores son algunas de las razones por las que las imágenes de tu sitio web pueden estar rotas. Veamos cómo podemos solucionar estos problemas, corregir las imágenes rotas en WordPress y reducir la tasa de rebote.

Leer: ¿Por qué tu WordPress es lento?

Ruta de archivo incorrecta

WordPress genera una ruta de archivo para especificar la ubicación de una imagen cuando la agregas a tu sitio web. Los navegadores web utilizan esta ruta en el atributo `src` de la imagen para localizarla y mostrarla. Si la ruta es incorrecta, las imágenes no se mostrarán y el tiempo de carga aumentará.

Un simple error tipográfico en la ruta de un archivo JPEG puede dañar la imagen al instante, así que revise cuidadosamente la estructura de directorios antes de actualizarla. Para solucionar este problema, busque la publicación o página con el icono de imagen dañada y reemplácelo por otra imagen.

Aquí te explicamos cómo:

• Inicie sesión en su panel de WordPress.
• Navegue hasta la publicación o página con la imagen rota.
• Coloca el cursor sobre la publicación y selecciona “Editar”
• En el editor de publicaciones, desplácese hasta la sección con la imagen rota.
• Haz clic en la imagen rota y luego selecciona "Reemplazar"
• Elija una imagen de su biblioteca multimedia o cargue una nueva imagen.
• Haz clic en “Actualizar” para guardar los cambios.

Reemplazo de imágenes HTML personalizadas

Si agregas una imagen usando HTML o CSS personalizado, debes asegurarte de que la ruta sea correcta. Aquí te mostramos cómo verificarla y corregirla, especialmente si se encuentra en el bloque CSS adicional:

• Inicia sesión en tu panel de WordPress. Ve a Apariencia ⟶ Personalizar.

• Seleccione el bloque CSS adicional o el menú CSS personalizado.

• En el editor de código, ubique la línea de código donde se agregó la foto y resalte la ruta de la imagen.

• Haz clic con el botón derecho y selecciona "Ir a la ruta del archivo". Si la imagen no está disponible, verás un error 404 (No encontrado).

• Vuelve a subir la imagen a tu sitio web: Ve a Multimedia ⟶ Añadir nuevo. Haz clic en «Seleccionar archivos» y elige el archivo de imagen. Una vez completada la subida, haz clic en «Copiar URL al portapapeles»

• Vuelve a la página de personalización y reemplaza el enlace de imagen roto con la nueva URL que copiaste. Haz clic en «Publicar» para guardar los cambios.

Los archivos de imágenes rotos agregados a través de HTML o CSS personalizados son especialmente comunes, así que asegúrese siempre de que el archivo exista en la carpeta de cargas correcta.

No te pierdas: Tareas de mantenimiento de WordPress

Verifique los nombres de los archivos

Una causa común de imágenes rotas y problemas de carga son los nombres de archivo incorrectos. Debes verificar la ortografía del archivo de imagen en tu código para asegurarte de que coincida exactamente con el de la biblioteca de medios y así solucionar los problemas de imágenes rotas en WordPress.

Veamos cómo podemos solucionar este problema:

• Inicie sesión en su panel de WordPress.
• Ve a Multimedia ⟶ Biblioteca.
• Utilice el cuadro de búsqueda para encontrar la imagen que desea comparar.
• Coloca el cursor sobre la imagen y selecciona “Ver”
• Consulta la barra de direcciones para ver la ruta de la imagen. La parte resaltada es el nombre del archivo.

Ahora, pasemos a la publicación con la imagen rota:

• Abra la página en su navegador.
• Haz clic con el botón derecho en la imagen rota y selecciona "Abrir imagen en una pestaña nueva"
• Compare el nombre del archivo en la barra de direcciones con el de la biblioteca multimedia.

Si aún existen discrepancias en los nombres de archivo, es posible que la imagen no se muestre, lo que resultará en un 404 Not Found error.

Esto suele ocurrir con un archivo JPEG al que se le cambió el nombre manualmente sin actualizar la referencia del archivo en WordPress.

• Editar la publicación con la imagen rota.
• Reemplace el nombre de archivo incorrecto con el correcto de la biblioteca de medios
• Actualiza la publicación para guardar los cambios.

Si la imagen sigue sin mostrarse, vuelve a subirla y añádela a tu publicación. Asegúrate de actualizar la publicación para guardar los cambios. Esto debería resolver el problema y la imagen debería mostrarse correctamente.

Aprende: Cómo solucionar un problema de lentitud en el backend de WordPress

Extensiones de archivo incorrectas

Es importante verificar cuidadosamente las extensiones de archivo de tus imágenes. Incluso si el nombre del archivo es correcto, una extensión incorrecta puede causar problemas.

Comprueba siempre si tu archivo JPEG utiliza la extensión “.jpeg” o “.jpg”, ya que las extensiones incompatibles pueden impedir que el navegador cargue la imagen.

Por ejemplo, podrías subir un archivo de imagen .jpg, pero el código lo reconoce como un archivo .png. Esta discrepancia impedirá que la imagen se cargue.

Otro problema común se presenta con las extensiones "jpg" y "jpeg". Si bien estos formatos de imagen son iguales, usar uno en lugar del otro puede provocar un error de imagen rota.

Asegúrate de que la extensión del archivo en tu código coincida exactamente con la de tu biblioteca multimedia para evitar problemas.

Utilice una ruta de archivo relativa

Usar una ruta de archivo relativa enlaza a un archivo según su ubicación con respecto a la URL de la página principal. En WordPress, una ruta relativa omite el nombre de dominio y solo usa la ruta después del dominio.

Por ejemplo, en el atributo “src”, en lugar de usar

“https://example.com/wp-content/uploads/image.png”, puedes usar “/wp-content/uploads/image.png”

Este enlace más corto seguirá funcionando bien para tus imágenes.

Una ventaja de usar una ruta relativa es que tus imágenes seguirán funcionando incluso si cambias tu nombre de dominio, siempre y cuando los archivos permanezcan alojados en el mismo servidor. Este método ofrece flexibilidad y garantiza que tus imágenes sigan siendo accesibles tras un cambio de dominio.

Lectura sugerida: Cómo mover un sitio de WordPress a un nuevo dominio

Verificar si la imagen existe

En ocasiones, es posible que enlaces a una imagen alojada en otro sitio web. Si ese sitio deja de funcionar o se traslada a un servidor diferente, tus imágenes ya no estarán disponibles.

Además, enlazar directamente a otro sitio aumenta el uso del servidor del sitio que aloja la imagen. Si el sitio web que aloja la imagen desactiva el enlace directo, la imagen no se mostrará.

• Para evitar estos problemas, lo mejor es subir todas las imágenes a tu sitio web antes de añadirlas a una página.

• Además, evite usar imágenes de sitios web de terceros a menos que tenga permiso para hacerlo. Esto garantiza que sus imágenes estén siempre disponibles y reduce el riesgo de enlaces rotos.

Aunque no es común, pueden ocurrir problemas de transferencia. En ocasiones, el servidor se satura y no puede cargar todos los recursos de la página con la suficiente rapidez antes de que se agote el tiempo de espera de la solicitud. Este problema es más frecuente en servidores web de bajo costo.

Considera aumentar la capacidad de tu servidor o migrar a un proveedor de alojamiento web más fiable para solucionar este problema. Además, habilitar la carga diferida para tus imágenes puede ser útil.

Cuando la carga diferida está habilitada, el servidor carga las imágenes solo cuando el usuario se desplaza a esa sección. Esto reduce la carga del servidor y acelera el sitio web.

Causas comunes de imágenes rotas en WordPress

Veamos algunas de las razones más comunes por las que las URL de imágenes no se cargan y cómo solucionarlos.

• URLs de imagen incorrectas: Una de las causas más comunes de imágenes rotas son las URLs de imagen incorrectas o desactualizadas. Esto suele ocurrir después de migrar tu sitio web o cambiar el dominio. Si la estructura de URLs de tu sitio ha cambiado, pero los enlaces de las imágenes no se configuraron correctamente, es probable que falten imágenes.

• Problemas de permisos de archivo: Si tus archivos de imagen no tienen los permisos correctos, los navegadores no podrán acceder a ellos. Esto puede provocar que las miniaturas no se muestren correctamente o que las imágenes de los productos no se carguen. Asegúrate de que el servidor pueda leer tus imágenes; normalmente, el permiso 644 está configurado correctamente para los archivos de imagen.

En ocasiones, su servidor puede bloquear el acceso a los archivos de imagen cuando los permisos son demasiado estrictos, lo que provoca que las miniaturas de su sitio web no se muestren correctamente.

• Configuración de medios incorrecta: A veces, el problema radica en la configuración de medios dentro de los ajustes de WordPress. Si la ruta de la carpeta de subida es incorrecta o no coincide con la estructura de tu sitio, las imágenes no aparecerán donde deberían.

• Problemas con el archivo .htaccess: El archivo .htaccess controla muchos aspectos del funcionamiento de tu sitio web. Un error, como una redirección mal configurada o reglas de acceso bloqueadas, puede provocar fallos en la carga de imágenes. Realiza siempre una copia de seguridad antes de editar este archivo y revisa cuidadosamente cualquier cambio.

• Configuración de CDN incorrecta: ¿Utilizas una red de distribución de contenido (CDN)? Es ideal para la velocidad, pero solo si la configuración de tu CDN es correcta. Si apunta a rutas antiguas o incorrectas, o si las versiones en caché están desactualizadas, es posible que las imágenes no se muestren.

Las versiones en caché de un archivo JPEG almacenadas en su CDN también pueden causar problemas de visualización hasta que se borre por completo la caché.

Leer: Los mejores servicios de optimización de velocidad de WordPress

Envolver

Mantener tu sitio web libre de imágenes dañadas es importante para mantener una buena reputación, atraer a los usuarios y mejorar tu posicionamiento en buscadores. Como se explicó anteriormente, existen varias maneras de detectar y reparar imágenes dañadas en WordPress.

Si prefieres reparar tú mismo las imágenes dañadas en WordPress, comienza por identificar la causa. Podría tratarse de una ruta de archivo dañada o incorrecta. Una vez que conozcas la causa, puedes solucionarlo restaurando, reemplazando o eliminando la imagen.

Mantener tu sitio web libre de imágenes dañadas no solo mejora la experiencia del usuario, sino que también contribuye a tu posicionamiento en los motores de búsqueda. Incluso un solo archivo JPEG corrupto puede alterar el diseño de la página, ralentizar la carga o generar marcadores de posición defectuosos que afectan la confianza del usuario.

Preguntas frecuentes sobre cómo reparar imágenes rotas en WordPress