Cómo encontrar y arreglar una imagen rota en WordPress

Probablemente haya visto un ícono de imagen en su sitio web que parece una imagen rota. Esa es una imagen rota y puede afectar negativamente a su sitio web si no la reemplaza .

Las imágenes son importantes para la mayoría de los sitios web. Entre otras cosas, hacen que su página sea más atractiva, transmiten información clave y mejoran su clasificación en los motores de búsqueda.

Por lo tanto, es importante encontrar y reparar imágenes rotas en su sitio web tan pronto como las note. En esta guía, explicaremos qué es una imagen rota y le mostraremos cómo repararla en su sitio de WordPress.

Contenido:

• ¿Qué es una imagen rota?
• Detección de imágenes rotas en su sitio web
• Cómo solucionar el problema de la imagen rota
  • Ruta de archivo incorrecta
  • Verifique los nombres de archivo
  • Extensiones de archivo incorrectas
  • Usar una ruta relativa
  • Asegúrese de que la imagen exista
  • Problemas de transferencia
• Conclusión

¿Qué es una imagen rota?

En pocas palabras, una imagen rota es una imagen cuyo enlace de origen no está disponible o está dañado . Cuando un usuario se desplaza a una sección con una imagen rota en su sitio, verá el icono de imagen rota. Puede deberse a una URL mal escrita, una ruta de archivo incorrecta o puede estar enlazando a un sitio que ya no existe.

Este es un problema crítico ya que afecta negativamente la experiencia del usuario. Cuando los usuarios encuentran imágenes que faltan en su sitio, tienden a dejar su sitio por un competidor.

Como resultado, las tasas de rebote aumentarán en su sitio web. Entonces, para evitar que esto suceda, siempre escanee su sitio en busca de imágenes rotas y arréglelas. Veamos cómo hacerlo en la siguiente sección.

Detección de imágenes rotas en su sitio web

La forma más fácil de detectar imágenes rotas en su sitio web de WordPress es usar un complemento. Uno de esos complementos es el Comprobador de enlaces rotos. Con este complemento, puede escanear los enlaces internos y externos de su sitio en busca de enlaces e imágenes rotos.

Después de instalar y activar el complemento, puede acceder a la página de configuración del complemento a través de Configuración >> Comprobador de enlaces.

El complemento Broken Link Checker escanea su sitio web en busca de enlaces rotos. Si hay algún problema, lo verá desde aquí o recibirá una notificación por correo electrónico.

El complemento también le brinda la opción de evitar que los motores de búsqueda sigan los enlaces rotos. Puede habilitar esta opción para que la imagen rota no afecte sus clasificaciones de SEO.

Reparación de imágenes rotas

Hay varios escenarios que pueden llevar a que falten imágenes en su sitio web de WordPress. En esta sección, discutiremos las razones y cómo solucionarlas.

Ruta de archivo incorrecta

Al agregar imágenes a su sitio web, WordPress crea una ruta de archivo que especifica la ubicación de las imágenes. Los navegadores web usan la ruta en el atributo src de la imagen para ubicar la imagen. Si la ruta a la imagen es incorrecta, la imagen no se cargará y no se mostrará.

Para solucionar esto, simplemente ubique la publicación o página con el ícono de imagen rota y reemplácela con una nueva imagen. Para esto, inicie sesión en su tablero y navegue a su página de publicación de WordPress. Luego, coloca el cursor sobre la publicación con la imagen rota y selecciona Editar .

En el editor de publicaciones, desplácese hasta la sección con la imagen rota, luego haga clic en ella y seleccione Reemplazar . Puede elegir una imagen de su biblioteca de medios o cargar una nueva imagen.

Después de reemplazar la imagen rota, haga clic en Actualizar para guardar los cambios.

Si está utilizando el editor clásico, haga clic en la imagen y luego seleccione el icono del lápiz para editar la imagen rota.

Aquí, haga clic en el botón Reemplazar y luego elija una imagen de su biblioteca de medios. Finalmente, haga clic en Actualizar para reemplazar la imagen.

Sustitución de imágenes HTML personalizadas

Si agregó la imagen usando HTML o CSS personalizado, debe verificar que la ruta sea correcta. Para verificar esto, debe verificar la ubicación donde agregó la imagen. Podría estar en el bloque CSS adicional. Si este es el caso, entonces siga los pasos a continuación.

Nota al margen: Reemplazar imágenes en su plantilla puede ser técnico. Si es nuevo en WordPress, puede hacer que nuestros expertos lo ayuden a solucionar los problemas de su plantilla.

Primero, inicie sesión en su panel de WordPress y luego vaya a Apariencia >> Personalizar.

Después de eso, seleccione el bloque CSS adicional o el menú CSS personalizado.

En el editor de código, busque la línea de código donde se agregó la imagen y resalte la ruta a la imagen. A continuación, haga clic derecho y luego seleccione Ir a la ruta al archivo ...

Si la imagen no está disponible, obtendrá un error 404 no encontrado. Simplemente puede volver a cargar la imagen en su sitio web y luego copiar y pegar el enlace al archivo aquí.

Para cargar la imagen, vaya a Medios >> Agregar nuevo . Después de eso, haga clic en Seleccionar archivos y luego elija el archivo de imagen. Una vez que se complete la carga, haga clic en el botón Copiar URL al portapapeles .

Ahora regrese a la página del personalizador y reemplace el enlace de la imagen rota con el que acaba de cargar. Finalmente, haga clic en Publicar para guardar sus cambios.

Verifique los nombres de archivo

Esta es una causa común de problemas de carga de imágenes. Asegúrese de que la ortografía de la imagen sea la misma que la de la biblioteca multimedia. El error también puede ser tan pequeño como un carácter especial diferente. Escribir un guión bajo (_) en lugar de un guión (-) puede resultar en una imagen rota.

Para solucionar este problema, debe comparar el nombre de archivo en la publicación o página con la imagen original en la biblioteca de medios. Para esto, inicie sesión en su tablero de WordPress y luego vaya a Medios >> Biblioteca .

Ahora, use el cuadro de búsqueda para encontrar la imagen que desea comparar. Después de eso, pase el cursor sobre la imagen y luego seleccione Ver .

En la barra de direcciones, verá la ruta a la imagen. La parte resaltada es el nombre de la imagen como se ve a continuación.

Ahora dirígete a la publicación con la imagen rota y verifica también el nombre del archivo. Para esto, abra la página en su navegador, luego haga clic derecho en la imagen rota y seleccione Abrir imagen en una nueva pestaña .

Si hay discrepancias entre los nombres de ambos archivos, podría ser la causa de que no se muestre la imagen. Terminará viendo un error 404 no encontrado.

Para solucionar este problema, debe editar la publicación con la imagen rota y reemplazar el nombre de archivo incorrecto con el de la biblioteca de medios.

Después de corregir los nombres de los archivos, debería ver la imagen que se muestra en el editor de publicaciones. De lo contrario, puede volver a cargar la imagen y agregarla a su publicación. Asegúrese de actualizar la publicación para guardar los cambios.

Extensiones de archivo incorrectas

También debe comprobar las extensiones de archivo. A veces, el nombre del archivo puede estar escrito correctamente, pero la extensión del archivo puede ser incorrecta. Por ejemplo, puede cargar una imagen como un archivo .jpg, pero en el código, es una extensión .png. Esto puede causar problemas.

Otro problema común ocurre con la extensión de imagen "jpg" y "jpeg". Aunque ambos formatos son iguales, es posible que te encuentres con un error de imagen rota si intercambias uno por el otro.

Usar una ruta de archivo relativa

Una ruta relativa vincula a un archivo en relación con la URL de la página de inicio. En WordPress, una ruta relativa elimina el nombre de dominio y solo usa la ruta después del dominio.

Entonces, en el atributo "src", en lugar de "https://example.com/wp-content/uploads/image.png" , la fuente se convierte en "/wp-content/uploads/image.png" . Y sus imágenes funcionarán bien con el enlace corto.

Uno de los beneficios de usar una ruta relativa es que sus imágenes funcionarán incluso si cambia su nombre de dominio. Ese sería el caso siempre que los archivos aún estén alojados en el mismo servidor.

Puede usar un complemento como el complemento Hacer rutas relativas para obligar a WordPress a usar rutas relativas para sus archivos multimedia. El complemento es fácil de instalar y configurar.

Después de instalar y activar el complemento, vaya a Hacer rutas relativas >> Configuración para abrir la página de configuración de complementos.

Aquí, marque la opción para habilitar rutas relativas para las imágenes y luego haga clic en Guardar cambios para registrar sus cambios. Ahora podrá mostrar imágenes en una página usando rutas relativas.

Asegúrese de que la imagen exista

Es posible que haya vinculado a una imagen alojada en un sitio web diferente. Si ese sitio deja de funcionar o se traslada a un servidor diferente, las imágenes dejarán de existir.

Además, vincular directamente a otro sitio aumenta el uso del servidor en el sitio del que obtiene la imagen. Si el sitio web anfitrión deshabilita los enlaces directos, evitará que se muestre su imagen.

Para evitar que esto suceda, es mejor que cargues todas las imágenes en tu sitio web antes de agregarlas a la página. Además, evite usar imágenes de sitios web de terceros a menos que tenga permiso para usarlas.

Problemas de transferencia

Este no es un problema común, pero sucede. A veces, su servidor se sobrecarga y no puede cargar todos los activos de la página lo suficientemente rápido antes de que se agote el tiempo de espera de la solicitud.

Ocurre principalmente con servidores web baratos. Para resolver esto, debe actualizar la capacidad de su servidor o migrar a un servidor web confiable.

También puede usar un complemento para habilitar la carga diferida para sus imágenes. Cuando lo habilite, su servidor solo cargará imágenes cuando el usuario se desplace a la sección. Esto liberará los recursos de su servidor y también acelerará su sitio web. Puedes aprender más sobre esto en nuestra guía de optimización de velocidad .

Resumen: reparación de imágenes rotas

No es raro que los sitios web experimenten problemas con imágenes rotas o faltantes, pero es un problema bastante serio que debe manejarse de inmediato. Si tiene una tienda en línea, puede perder clientes potenciales si los usuarios no pueden ver las imágenes de los productos en su tienda.

En esta guía, explicamos algunas de las causas de las imágenes rotas, así como consejos sobre cómo solucionarlas en los sitios web de WordPress.

Reparar imágenes rotas es una forma de reducir la tasa de rebote en su sitio web. También necesita optimizar sus imágenes para mejorar el rendimiento de su sitio. Para obtener un tutorial detallado sobre esto, consulte nuestra guía de optimización de imágenes.