Cómo arreglar las imágenes que no se cargan en su sitio web de WordPress

Si las imágenes no se cargan en su sitio web WordPress, debe actuar con rapidez. Dado que las imágenes son una parte fundamental de la interacción, puede ser frustrante que no se carguen correctamente.

No da buena imagen y puede afectar a la autoridad y a la percepción de la calidad de su sitio web.

¿Lo sabías?

• 90% de información que se transmite al cerebro es visual
• Las imágenes se procesan en el cerebro a 60.000 veces la velocidad del texto

(Fuente)

Las imágenes son muy importantes para atraer a los usuarios. Nadie quiere leer un muro de texto y la mayoría queremos ver algo bonito mientras navegamos.

Si observas que las imágenes no se cargan en tu sitio web de WordPress o, peor aún, un usuario te avisa de ello, a continuación te explicamos cómo solucionarlo.

15 maneras de arreglar las imágenes que no se cargan en los sitios web

Como las causas de que las imágenes no se carguen en los sitios web son muchas y variadas, es posible que tengas que ir pasando por la lista hasta solucionarlo.

Utilizamos todos los métodos siguientes para solucionar problemas de imágenes y cada uno de ellos funciona a su manera.

Por lo general, se trata simplemente de reinsertar la imagen en la página o la entrada, pero a veces es un poco más complicado.

Los primeros 4 pasos consisten en averiguar los hechos y tratar de aislar la causa raíz. Los 11 pasos siguientes son formas fiables de arreglar las imágenes que no se cargan en los sitios web.

1. Compruebe si se trata de algunas imágenes o de todas ellas

Su primera tarea si las imágenes no se están cargando en su sitio web es ver si se trata de una, más de una o todas las imágenes.

Si es sólo una o unas pocas, puedes solucionar el problema con imágenes individuales. Si son todas las imágenes las que no se cargan, podría tratarse de algo más generalizado.

Cargue su sitio web en un navegador y compruébelo. Si tiene un sitio web pequeño, compruebe todas las páginas. Si tiene un sitio web más grande, compruebe tantas como tenga tiempo.

Si tiene una tienda en línea, compruebe su página principal y las páginas aleatorias de productos y categorías.

Busca un patrón que te dé una pista de lo que ocurre.

2. Forzar la actualización del navegador

Si todo le parece bien a usted pero no a los usuarios, es posible que esté viendo una copia local de las páginas guardadas por su navegador.

Los navegadores guardan copias de las páginas web que ya has visitado en la caché del navegador para que se carguen más rápido la próxima vez. Las páginas se actualizan periódicamente para mantenerlas al día, pero no siempre verás una copia nueva cada vez que abras una página.

Una actualización forzada obliga al navegador a obtener una nueva copia de la página para asegurarse de que es la última versión.

Utilice una de las siguientes combinaciones en su navegador para forzar la actualización de la página:

• Cromo: Ctrl y F5 (Windows) o ⌘ Cmd y ⇧ Mayús y R (Mac).
• Firefox: Ctrl y F5 (Windows) o ⌘ Cmd y ⇧ Mayús y R (Mac).
• Safari: Opción + ⌘ Cmd y 'E'.
• Microsoft Edge: Ctrl y F5

Ahora debe tener la misma experiencia que sus visitantes y puede solucionar los problemas correctamente.

3. Compruebe el uso de distintos navegadores y utilice el modo incógnito

WordPress es muy compatible con los navegadores y la mayoría de los temas y plugins también lo son. Ahora que la mayoría de los navegadores, excepto Safari y Firefox, utilizan una versión de Chromium, la compatibilidad es más fácil que nunca.

Pero no es una garantía.

Le recomendamos que utilice varios navegadores si las imágenes no se cargan en su sitio web de WordPress.

Prueba también cada navegador en modo incógnito.

Si ves las imágenes en un navegador y no en otro, podría ser la compatibilidad del navegador. Borrar la caché del navegador e inténtalo de nuevo.

Si ves las imágenes en modo "normal" pero no en modo incógnito, podría ser un plugin de WordPress, un plugin del navegador o tu CDN si utilizas uno.

4. Cambiar entre vista de escritorio y móvil

Otra comprobación rápida es visitar su sitio en el escritorio y de nuevo en su teléfono. Puede que en uno de ellos se muestren las imágenes y en el otro no.

Es útil realizar comprobaciones periódicas de este tipo cada vez que hagas un cambio, instales un nuevo tema o un nuevo plugin. ¡Es mejor que detectes un error que un visitante!

Si las imágenes funcionan en el escritorio pero no en el móvil, podría ser un problema del tema, del plugin o del constructor de páginas.

Busca actualizaciones para tu tema y plugins y asegúrate de que todo está al día.

Abre la entrada o página en el constructor de páginas y utiliza la vista responsive. Si la imagen se carga correctamente, comprueba los plugins de optimización de imágenes, vuelve a ejecutar la optimización o borra la caché de WordPress.

Puede hacer lo mismo en el editor de entradas o páginas de WordPress seleccionando el icono de la pantalla pequeña junto al icono azul Actualización botón.

No te preocupes, te mostraremos cómo hacer todas esas cosas en un minuto.

5. Borrar la caché si utiliza un plugin de caché de WordPress

Plugins de caché de WordPress son excelentes para acelerar la carga de páginas, pero a veces pueden causar problemas. Si usas uno, borra la caché y mira a ver qué pasa.

La caché de WordPress, al igual que la caché de su navegador, guarda copias de las páginas para enviarlas a los visitantes. Esto acelera el proceso y ofrece al usuario una experiencia mucho más rápida.

Borrar la caché la vacía y obliga al plugin a reconstruir cada página solicitada.

La forma exacta de borrar la caché depende del plugin que utilices:

Caché LiteSpeed - Pase el ratón por encima del icono de LiteSpeed en la parte superior de cualquier página y seleccione Purgar todo.

Cohete WP > Cuadro de mandos > Borrar caché.

Otros plugins de caché tendrán algo similar.

Una vez borrado, fuerce la actualización de una página con una imagen que no se estaba cargando y compruebe los resultados.

6. Compruebe que no está utilizando un nuevo plugin de caché y que ha reducido el CSS

Siguiendo con el almacenamiento en caché de WordPress por un minuto, ¿está utilizando un nuevo plugin? ¿Ha cambiado alguna configuración recientemente?

Si estás utilizando un nuevo plugin de caché, desactívalo y vuelve a probarlo.

Si no está utilizando un nuevo plugin, pero ha minificado recientemente sus archivos, es probable que las imágenes no se muestren en los sitios web.

La minificación es el proceso de eliminar todo lo innecesario de Archivos CSS para que las páginas se carguen más rápido.

Por ejemplo, los desarrolladores dejarán comentarios y marcas que les ayuden, a ellos y a cualquiera que les siga, a resaltar las áreas clave del código.

WordPress no lo necesita, así que la minificación lo elimina todo. Hay mucho más que eso, pero así es como funciona básicamente.

La minificación no siempre lo hace bien, así que si estás usando un nuevo plugin o has ajustado la configuración de minificación, desactiva el plugin o deshaz los cambios y vuelve a probar.

7. Compruebe que las imágenes están presentes y se cargan en la biblioteca de imágenes de WordPress

Ahora vamos a comprobar si las imágenes están presentes en su biblioteca de imágenes de WordPress.

Acceda a su sitio web WordPress y seleccione Medios de comunicación del menú de la izquierda.

Navegue por la biblioteca de imágenes para encontrar la imagen que no se carga o utilice la función de búsqueda si conoce el nombre del archivo.

Si la imagen está ahí y se ve bien, asegúrese de que es un formato de archivo aceptable (JPEG, PNG, GIF, WebP).

Haga clic en la imagen y compruebe que la URL de la imagen de la derecha es correcta y apunta a su carpeta Uploads.

Opcionalmente: Sube la imagen de nuevo y reinsértala en la página o entrada. Cubrimos la reinserción de la imagen en un rato, pero puedes hacerlo ahora si quieres.

Si sigues solucionando problemas, mantén la biblioteca de imágenes abierta en una pestaña del navegador, ya que es posible que vuelvas a necesitarla más adelante.

8. Compruebe las rutas de las imágenes y añádalas de nuevo si es necesario

Comprobar las rutas de las imágenes significa asegurarse de que la URL de la imagen apunta realmente a ella en la biblioteca multimedia.

Abra la página o la entrada en modo de edición y seleccione una de las imágenes que no se cargan.

Si se ve bien en la página, seleccione la imagen para abrir el personalizador.

Seleccione Sustituir y debería ver el URL actual de los medios de comunicación en el cuadro emergente.

Asegúrate de que la URL coincide con la de tu biblioteca multimedia.

Si la imagen aparece en el editor, la URL debería estar bien, pero merece la pena comprobarlo y sólo lleva un segundo.

9. Compruebe la compresión de archivos y la extensión

Si eres uso de un plugin para comprimir imágenes o han empezado a cambiar de JPG a WebP, eso puede estar causando problemas.

Deberías ver un patrón:

• Si se trata de compresión de imágenes, las imágenes que no se carguen serán las que hayan sido comprimidas.
• Si es Conversión a WebPLos que no se carguen serán los que se hayan convertido.

Si el problema es la compresión, muchos plugins de compresión permiten deshacerla y volver a la normalidad.

Por ejemplo, WP Optimize hace una copia de las imágenes antes de comprimirlas y puedes restaurarlas si lo necesitas.

Seleccione Optimizar WP > Imágenes > Mostrar opciones avanzadas > Restaurar imágenes comprimidas.

Si utiliza Smush, primero tendrá que activar las copias de seguridad de imágenes en Aplastar a granel > Herramientas. Si no tienes esa opción, tendrás que subir nuevas imágenes.

Otros plugins de compresión pueden tener herramientas similares.

Si estás cambiando gradualmente a imágenes WebP, puede que tu versión de PHP necesite una actualización o que tengas que comprobar si tu alojamiento web es compatible con WebP (libhelp).

WebP es compatible por defecto a partir de WordPress 5.8, pero merece la pena comprobarlo.

También merece la pena comprobar su archivo .htaccess. Aunque WebP es compatible, es posible que deba actualizar su archivo .htaccess.

Puede probarlo añadiendo el siguiente código a su archivo .htaccess, guardándolo y forzando la recarga de una página con una imagen fallida.

<IfModule mod_rewrite.c>
  RewriteEngine On
  # Check if the browser supports WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp
  # Check if the WebP version of the requested image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  # Serve WebP image instead of the original image
  RewriteRule ^(.*\.(jpe?g|png))$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
  # If the browser sent an HTTP_ACCEPT header containing "webp"
  # and the environment variable "accept" is set, add "Vary: Accept" header
  Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Si la imagen se carga, puedes dejar el código en su sitio. Si sigue sin cargarse, elimine el código y continúe con la solución del problema.

10. Subir imágenes a través de WordPress en lugar de FTP

A pesar de que la biblioteca multimedia de WordPress es bastante buena, a veces es más rápido y fácil subir imágenes usando FTP. Esto es especialmente cierto si estás subiendo imágenes en masa.

Pero a veces WordPress no detecta correctamente las imágenes subidas a través de FTP.

Si has subido imágenes a tu carpeta de subidas y no se muestran en tu sitio, es una solución fácil.

Puedes subirlos de nuevo a través de WordPress o cambiar los permisos de los archivos. Cubriremos los permisos de archivo en el siguiente paso.

Si sólo son unas pocas imágenes las que no se cargan, te recomendamos que las subas a través de WordPress y las añadas a tu página de la forma habitual.

Esto debería arreglar las imágenes que no se cargan en su sitio web.

Si no, pasa a la siguiente solución.

11. Compruebe que la carpeta multimedia es accesible

La relación entre WordPress y FTP funciona el 95% de las veces, pero es ese 5% el que puede causar más problemas.

Si subes imágenes en masa, el FTP es la forma más rápida y sencilla de hacerlo. Pero también puede causar problemas para que las imágenes se muestren correctamente.

Si hay algún problema, normalmente podrás detectarlo en la biblioteca multimedia, ya que la imagen no se mostrará allí. Verás un icono de archivo gris o un recuadro con un signo de interrogación.

Independientemente de cómo se manifieste el problema, la comprobación de los permisos de los archivos suele solucionar los problemas con las imágenes cargadas a través de FTP.

Abra su cliente FTP y navegue hasta la carpeta uploads.

Haga clic con el botón derecho en la carpeta y compruebe los permisos de los archivos. Debería ser '644'.

Marque la casilla Buscar en subdirectorios y seleccione Aplicable sólo a los directorios.

A continuación, pulse OK.

Vuelva a comprobar sus imágenes. Si la causa fue el FTP, ahora deberían cargarse correctamente.

12. Comprobar la prevención de hotlinking de imágenes en cPanel

El hotlinking de imágenes afecta a la mayoría de los propietarios de sitios web que utilizan imágenes originales. Es cuando otro sitio web utiliza la misma imagen pero enlaza a la suya en lugar de a la fuente original.

Esto utiliza los recursos de tu servidor para ayudar al sitio de otra persona, lo que no es bueno, como puedes imaginar.

La prevención de enlaces directos a imágenes es una forma de evitarlo, pero en ocasiones puede causar sus propios problemas.

Si usas cPanel, se encarga de gestionar la prevención de hotlinks, pero no siempre lo hace bien.

Puede comprobarlo desactivando la prevención de hotlinks, borrando la caché de WordPress y volviendo a probar la página.

A continuación se explica cómo desactivar la prevención de hotlinks:

Entrar en cPanel o la alternativa de su anfitrión.

Encuentre Prevención de enlaces directos y selecciónelo (normalmente en Seguridad).

Seleccione el azul Desactivar botón.

Borre la caché de WordPress, fuerce la actualización de la página y vuelva a probar la carga de imágenes.

Si la imagen se carga, vuelve a activar la prevención de hotlinks y vuelve a probar. Si la imagen vuelve a fallar, ponte en contacto con tu proveedor de alojamiento web y solicita ayuda, ya que es probable que se trate de un problema de configuración del servidor.

13. Asegúrese de que su tema de WordPress no interfiere

Más temas de WordPress de buena calidad jugar bien con las imágenes. Es raro encontrar uno que no lo haga, pero sigue siendo una posibilidad y algo que hemos experimentado nosotros mismos en el pasado.

Puede ocurrir cuando pruebas un nuevo tema gratuito de WordPress o cuando tu tema se actualiza a una nueva versión.

Cualquiera de ellos puede introducir problemas de compatibilidad imprevistos que pueden provocar que las imágenes no se carguen en un sitio web.

Es fácil ver si es tu tema o no.

Tal vez quieras hacer una copia de seguridad ahora, por si acaso. Cuando estés listo, haz lo siguiente:

Seleccione Apariencia > Temas en el panel de control de WordPress.

Cambia de tu tema actual al tema por defecto Twenty Twenty Four y vuelve a probar.

No verás el mismo diseño, pero tus páginas y entradas principales deberían seguir siendo visibles. Compruebe uno que no estaba mostrando las imágenes y ver lo que está sucediendo ahora.

Si la imagen se muestra, es algo que tiene que ver con tu tema.

Si las imágenes no se muestran en su sitio web, no es el tema y se puede cambiar de nuevo.

14. Compruebe su CDN si utiliza uno

Una CDN (Content Delivery Network) hace copias de su sitio y las distribuye entre varios servidores. La idea es acelerar los tiempos de carga mediante la entrega desde el servidor más cercano al visitante.

Las CDN funcionan bien y pueden proporcionar seguridad adicional, así como mejoras en la velocidad.

Hasta que no lo hacen.

Si utilizas una CDN completa o una CDN de imágenes, puede ser la causa de los problemas. Si has llegado hasta aquí sin solucionar el problema, vale la pena intentarlo.

Lo que haga dependerá del proveedor de CDN que utilice.

Si su proveedor proporciona un plugin de WordPress, desactívelo de la forma habitual. Si tu proveedor tiene un control cPanel para un CDN, desactívalo a través de él.

Si su proveedor utiliza otro método para gestionar la CDN, utilícelo para detener o desactivar el servicio.

Actualiza la caché de WordPress, fuerza la actualización de tu navegador y vuelve a probar una página que no funcionaba para ver si es tu CDN la que detiene la carga de imágenes.

15. Desactivar la carga lenta

La carga lenta solía requerir un plugin, pero WordPress la añadió como función básica en WordPress 5.5.

Funciona la gran mayoría de las veces, pero hemos visto comentarios en Internet que citan la carga lenta como posible causa de que las imágenes no se muestren en WordPress.

Por eso merece la pena comprobarlo.

La solución es sencilla, sólo tiene que añadir una línea de código a su archivo functions.php.

Si no has hecho esto antes, no te preocupes, es sencillo y se puede deshacer en segundos.

Seleccione Apariencia > Editor de archivos temáticos desde el panel de control de WordPress.

Seleccione funciones.php del Archivos temáticos a la derecha de la pantalla siguiente.

Añada la siguiente línea de código y seleccione la opción azul Actualizar archivo para guardar.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Vuelve a probar una imagen que no funcionaba. Si aparece,

Si no quieres editar tus archivos, existe un plugin llamado Disable Lazy Load que puede utilizar en su lugar.

Conclusión

Así que ahí lo tienen, todas las formas imaginables que se nos ocurren para arreglar las imágenes que no se cargan en su sitio web de WordPress.

La gran mayoría de las veces, sólo tendrá que restablecer la imagen en el post o página. Pero, si es algo más complejo, encontrarás la respuesta aquí.

¿Nos hemos perdido alguna solución? ¿Has utilizado otras soluciones para las imágenes que no se muestran en tu sitio web? Si es así, cuéntanoslo en los comentarios.