¿Por qué no se cargan las imágenes en una página web?

Los espacios vacíos suelen tener pocas causas técnicas

Lo vemos en proyectos con más frecuencia de lo que se piensa: la página está en pie, el diseño encaja – y de repente aparecen espacios vacíos. En las tiendas son las imágenes de productos, en los portafolios las referencias, en los blogs las imágenes Hero. Resulta dramático porque las imágenes suelen ser la parte que genera confianza.

El mapa de causas: tres grupos

Primero: La imagen no es accesible. Es el clásico: una ruta incorrecta, un archivo renombrado, una mayúscula de más (sí, eso basta en muchos servidores), o una carpeta que se ha movido. Entonces el servidor suele devolver un 404. Con la misma frecuencia vemos 403 cuando entran en juego los permisos o una protección contra hotlinking.

Segundo: La imagen está bloqueada. Desde que muchos sitios web funcionan completamente con HTTPS, nos encontramos regularmente con «Mixed Content»: la página es segura (https), pero una imagen todavía se incluye mediante http. Los navegadores modernos la bloquean entonces – no por maldad, sino por motivos de seguridad. En la consola, el aviso suele ser bastante claro.

Tercero: La imagen está ahí – pero no llega de forma adecuada. Esto incluye archivos demasiado grandes (en móviles es más probable que la carga se interrumpa o parezca que «nunca termina»), un formato sin un fallback adecuado, o un CDN/caché que entrega una variante antigua o dañada. Las imágenes siguen siendo el peso pesado de la web: en páginas de inicio típicas, la mediana ronda los 900 KB (móvil) hasta los 1054 KB (escritorio) solo en imágenes. HTTP Archive Web Almanac 2024↗

Nuestro enfoque: un error rara vez es «solo técnico»

En Pola, ante problemas con imágenes, siempre miramos dos veces: ¿Qué está roto – y por qué fue posible que se rompiera? Porque a menudo no hay detrás un simple error tipográfico, sino un proceso que falta. Precisamente por eso combinamos reparación y prevención: menos fallos, menos datos, más impacto.

Si ahora mismo estás afectado de forma aguda, no entres en modo «todo nuevo». Empieza con un diagnóstico limpio – y en pocos minutos sabrás mucho más.

El navegador muestra primero dónde falla

Si faltan imágenes, el camino más rápido casi siempre es el mismo: no miramos primero en los plugins ni en los registros del servidor, sino allí donde acaba la verdad – en el navegador.

Método Pola 1: El flujo de las tres comprobaciones

Para ello utilizamos un procedimiento que se mantiene deliberadamente corto, pero cubre las causas más frecuentes. Solo necesitas Chrome o Firefox.

1) Abrir directamente la URL de la imagen. Haz clic derecho en el lugar (o en el código, el src) y abre la URL de la imagen en una pestaña nueva. Si allí ya ves una página de error, no es un «problema de renderizado», sino un problema de entrega.

2) Abrir DevTools y comprobar la pestaña Network. Pulsa F12, cambia a «Network/Red» y vuelve a cargar la página. Filtra por «Img». Ahora verás códigos de estado: 404 (no encontrado), 403 (prohibido), 500 (error del servidor), o también 200 – entonces el problema está más bien en la visualización, la caché o el formato.

3) Leer la consola, no adivinar. En la pestaña Console suelen aparecer literalmente indicaciones como «Mixed Content» o problemas de CORS. Este es el momento en que una intuición se convierte en una solución clara.

Lo que realmente te dicen los códigos de estado

Un 404 casi siempre significa: ruta, nombre de archivo, mayúsculas/minúsculas, carpeta incorrecta. Un 403 lo vemos típicamente con permisos de archivo mal configurados, reglas de seguridad o cuando se quiere impedir el hotlinking.

Si ves 200, pero aun así no se muestra nada, la cosa se pone más interesante: entonces comprobamos a continuación el formato y el CSS. Una imagen puede estar «cargada», pero mediante CSS acabar en display:none , ser sobrescrita como imagen de fondo o quedar oculta por un banner de cookies/overlay. En la práctica, esto ocurre con más frecuencia de lo que parece en las guías clásicas.

Herramientas, cuando se hace más grande

Si tienes muchas páginas, merece la pena hacer un rastreo específico. Para una visión rápida, según la configuración, solemos utilizar Google PageSpeed Insights (para rendimiento e indicaciones sobre imágenes) o WebPageTest (para la cascada y el orden de carga real). Para «¿Hay rutas de imágenes rotas en algún sitio?» funciona de forma pragmática un Broken Link Checker .

Lo más importante: mantén el orden. Quien primero toca diez ajustes a la vez, a veces repara algo por accidente – y no aprende nada de ello. Quien primero mide, corrige de forma limpia y sostenible.

Las imágenes que faltan perjudican la orientación y la confianza

Una imagen que no carga rara vez es «solo» un problema visual. Es una pequeña ruptura de confianza: has conseguido que alguien llegue a tu sitio web y, entonces, la página no proporciona la orientación más importante.

UX, SEO y conversión dependen de ello

Cuando faltan imágenes, a menudo faltan las respuestas. En una tienda: «¿Cómo se ve el producto?» En una consultoría: «¿El equipo es real?» En la comunicación de una ONG: «¿Qué representa el proyecto?» Los usuarios se van antes incluso de leer tu texto.

Y aunque las imágenes terminen apareciendo, el momento cuenta. En el contexto del rendimiento, es decisivo qué elemento tarda más en hacerse visible. En la práctica, suele ser una imagen: según Web Almanac, en alrededor del 68 % de los casos una imagen es el elemento que determina el Largest Contentful Paint. HTTP Archive Web Almanac 2024↗ Si esa imagen se atasca, la página percibida también se atasca.

Entonces se vuelve rápidamente una cuestión económica: más de la mitad de los usuarios móviles abandona una página si tarda más de tres segundos en cargar. Site Builder Report↗ No utilizamos esta cifra como una amenaza, sino como un recordatorio: tus contenidos solo son tan eficaces como su entrega.

Nuestro nuevo enfoque: las imágenes también son sostenibilidad

En Pola se añade otra dimensión. Las imágenes son la mayor parte de los datos de muchos sitios web, y cada byte debe almacenarse, transmitirse y procesarse. Esto consume energía en centros de datos, redes y dispositivos finales. Internet tiene una huella de CO₂ medible, y la transferencia de datos innecesaria forma parte de ella. SHIFT↗

Suena a algo grande, pero empieza por algo pequeño: una imagen Hero que en lugar de 1,2 MB solo pesa 180 KB no solo carga más rápido. También es, sencillamente, más responsable. «Menos datos, más impacto» no es una frase hecha cuando hablamos de imágenes, sino una decisión de diseño.

Y sí: Google también se fija

Core Web Vitals forma parte desde hace años de las señales de Page Experience. Desde 2025, la exigencia ha aumentado de forma perceptible en muchos equipos: el rendimiento ya no es algo «Nice», sino higiene. Quien consigue controlar los problemas de imágenes suele mejorar al mismo tiempo el LCP, reducir los abandonos y hacer que los contenidos vuelvan a ser fiables.

Lo bueno: precisamente aquí suelen estar las mejoras más rápidas y limpias, porque las imágenes tienen muchísimo potencial.

Las rutas, los formatos y los permisos explican la mayoría de los fallos

En la práctica, suelen ser siempre los mismos obstáculos, solo que con distintos disfraces. Aquí los repasamos deliberadamente tal como nos los encontramos en el día a día.

Ruta, nombre de archivo, mayúsculas y minúsculas

La razón más frecuente es banal: la imagen no está donde apunta la URL. Después de un relanzamiento, de mover carpetas de medios o de una migración (por ejemplo, del entorno de staging al entorno live) quedan rutas antiguas.

Presta también atención a los nombres de archivo: los caracteres especiales, las diéresis, los espacios o un „final-final-2.png“ pueden acabar dando problemas en combinación con la codificación y la lógica del CMS. Y, muy importante: en muchos servidores Linux /Bilder/Foto.jpg es algo diferente de /bilder/foto.jpg.

Permisos, servidor y errores de carga

Si devuelve un 403, a menudo es un problema de permisos o una regla de protección. Especialmente en WordPress vemos esto después de cambiar de hosting: la uploads-carpeta tiene permisos incorrectos o un plugin de seguridad bloquea determinados tipos de archivo.

Si solo una imagen no carga, también puede estar simplemente dañada (carga interrumpida, archivo corrupto). Entonces normalmente ayuda: volver a exportar, volver a subir, no darle más vueltas.

La caché es una bendición y una maldición

Una caché puede salvar una página – y puede llevarte a la locura. Si se sustituyen imágenes, pero permanecen bajo la misma URL, los navegadores o las CDN a veces siguen entregando la variante antigua. Nuestra rutina: primero un Hard-Reload, después purgar la caché en la CDN/plugin, y solo entonces continuar.

Específico de WordPress: plugins y optimizadores de imágenes

Muchos problemas de imágenes en WordPress son indirectos. Un plugin de optimización convierte las imágenes a WebP, pero la regla de reescritura es incorrecta. O un plugin de Lazy-Loading establece los atributos de tal forma que el navegador solo carga las imágenes cuando están en el viewport – pero un overlay impide el desplazamiento y, por tanto, el disparo.

Si quieres optimizar, pero tienes que mantener la estabilidad, muchos equipos empiezan con herramientas consolidadas como ShortPixel o Imagify. Lo importante no es la herramienta en sí, sino que después hagas pruebas: en modo incógnito, en el móvil, y una vez en Safari.

Método Pola 2: solucionar con „una variable por paso“

Cuando solucionamos problemas de imágenes, nunca cambiamos cinco cosas a la vez. Tomamos exactamente una hipótesis (p. ej. „Mixed Content“), aplicamos la corrección, comprobamos el resultado en la pestaña Network – y solo entonces viene la siguiente variable.

Suena lento, pero es todo lo contrario: mantienes el control. Y puedes documentar la corrección más adelante, en lugar de volver a empezar desde cero la próxima vez.

Las reglas de seguridad invisibles provocan huecos visibles

Si lo básico está correcto (ruta correcta, estado 200, aun así no hay imagen), normalmente son estos casos „invisibles“ los que cuestan tiempo. Los agrupamos aquí porque en los how-tos clásicos a menudo solo aparecen de pasada.

Mixed Content después de cambiar a HTTPS

Has activado SSL, la página funciona con https – pero algunas imágenes todavía están enlazadas directamente a http. Entonces el navegador las bloquea. Puedes detectarlo de forma muy fiable en la consola.

En WordPress suele ayudar una búsqueda y sustitución en la base de datos (con cuidado y preferiblemente con una copia de seguridad). Muchos equipos utilizan para ello Better Search Replace. Lo importante es comprobar después que realmente todos los recursos se sirven mediante https.

CORS y fuentes de imágenes externas

Si cargas imágenes desde otro dominio, puede haber problemas de CORS en determinadas aplicaciones (Canvas, determinados accesos mediante scripts). Para la «visualización normal», CORS rara vez es la causa, pero en aplicaciones web sí lo vemos. Entonces la solución es: configurar correctamente las cabeceras o trasladar las imágenes a un dominio de recursos adecuado.

Hotlinking y protección mediante Referrer

A veces las imágenes «están ahí», pero solo se permite incrustarlas desde el propio dominio. Entonces un operador de una tienda copia una imagen de un sistema antiguo o de un fabricante – y de repente desaparece porque la fuente bloquea el hotlinking. No es un error, sino una decisión intencionada de la fuente. La solución correcta siempre es: alojar la imagen uno mismo o aclarar los permisos.

CDN y caché perimetral: el eco roto

Los CDN son fantásticos – hasta que un nodo perimetral almacena en caché una variante incorrecta. Entonces algunos usuarios ven las imágenes y otros no. Si tienes un problema de «solo a algunos», es una señal clara.

Aquí suele ayudar una purga específica (solo de las URL afectadas) y después una prueba desde distintas regiones, por ejemplo con WebPageTest o una comprobación desde múltiples ubicaciones.

Compatibilidad de formatos y alternativas (WebP, AVIF)

WebP es compatible actualmente de forma generalizada, AVIF está avanzando con fuerza. Según Web Almanac, AVIF se cuadruplicó entre 2022 y 2024, mientras que las cuotas de JPEG disminuyen. HTTP Archive Web Almanac 2024↗

Aun así, se aplica lo siguiente: si sirves formatos de nueva generación, necesitas alternativas bien implementadas mediante <picture> – de lo contrario, «optimizado» se convierte rápidamente en «invisible» en cuanto entra en juego un navegador minoritario o un navegador especial dentro de una aplicación.

Estos casos especiales son precisamente la razón por la que siempre leemos la depuración como una pequeña historia: ¿Quién llama a quién, qué devuelve y quién lo bloquea? En cuanto ves la imagen como una cadena de solicitudes, vuelve a ser solucionable.

Los procesos robustos evitan enlaces rotos

Si queremos evitar de forma permanente los fallos de imágenes, no basta con reparar enlaces rotos individuales. Entonces necesitamos una canalización de imágenes que sea tan natural como una guía de marca: reglas claras, rutinas sencillas, pocas sorpresas.

Nuestra «pequeña canalización», que ahorra muchos problemas

Recomendamos a los equipos una versión pragmática que funcione sin un gran ecosistema de herramientas:

1) Escalar y comprimir antes de subir. Una foto de la cámara casi nunca está lista para la web. Para un control de calidad rápido nos gusta usar Squoosh o herramientas pequeñas como TinyJPG.

2) Tomarse en serio las imágenes responsivas. Si envías una imagen de 2400px de ancho a un móvil de 390px, se ve «nítida», pero sobre todo es un desperdicio. Web Almanac muestra que, en las páginas móviles, las imágenes se sirven de media alrededor de un 25 % más grandes de lo necesario. HTTP Archive Web Almanac 2024↗ srcset y unos tamaños adecuados lo solucionan.

3) Carga diferida, pero con criterio. Para las imágenes que están por debajo del área visible, loading="lazy" suele ser lo correcto. Para la imagen Hero central, a menudo es incorrecto, porque puede empeorar el LCP. (Aquí, según la configuración, también ayuda fetchpriority="high".)

4) Configurar la caché de modo que las actualizaciones no se queden atascadas. Los tiempos de caché largos son buenos, siempre que uses versionado (nombre de archivo o hash). Así la página sigue siendo rápida y no pierdes el control.

Nuestro enfoque renovado: el minimalismo como estabilidad técnica

Un punto que rara vez leemos en otras guías, pero que vemos constantemente en proyectos de diseño: Cuantas más imágenes sean «solo decoración», más frágil se vuelve la página. El diseño minimalista no es solo una postura estética, a menudo también es la decisión técnica más robusta.

Por eso preguntamos conscientemente: «¿Qué imagen aporta realmente significado?» Si una imagen solo ocupa espacio, aumenta el riesgo (más solicitudes, más dependencias) sin un efecto claro. Si una imagen aporta significado, la tratamos como contenido central: optimizada, priorizada, con fallback.

Así, la prevención no se convierte en una tarea adicional, sino en una forma de construir sitios web: ligeros, claros, duraderos.

Un buen contenido funciona también sin la imagen

Cuando las imágenes no cargan, para algunos usuarios es «solo» irritante. Para otros, es un obstáculo real. Y justo ahí se pone interesante: la accesibilidad no es solo una cuestión legal o una casilla que marcar, sino una prueba de estrés para tus contenidos.

Los textos alternativos no son decoración

Un mito persiste con fuerza: «Si falta la imagen, se ve el texto alternativo». En realidad, ocurre de forma desigual: a menudo el navegador solo muestra un pequeño icono, y el texto alternativo es sobre todo valioso para los lectores de pantalla. Eso significa: los textos alternativos no sustituyen las imágenes, pero salvan la información.

Escribimos textos alternativos de forma que cumplan el propósito de la imagen, no que describan los píxeles. Una foto de producto necesita algo diferente que una imagen ambiental. Y un diagrama necesita un resumen textual, de lo contrario la información se pierde.

Marcadores de posición y estabilidad del diseño

La accesibilidad también es diseño: Cuando las imágenes cargan tarde o fallan, a menudo se producen saltos. Esto no solo resulta molesto, sino que puede suponer una mayor carga para las personas con limitaciones cognitivas o problemas de concentración. Un paso sencillo y a menudo subestimado: width y height establecer (o definir proporciones fijas mediante CSS), para que el espacio quede reservado y la página permanezca estable.

Nuestro nuevo enfoque: «Acceso a pesar de los fallos» como criterio de calidad

Nos gusta evaluar los sitios web según cómo se comportan cuando las cosas salen mal: red lenta, imágenes bloqueadas, servicio externo caído. Si entonces todo se viene abajo, la experiencia era frágil.

Si, en cambio, mantienes correctamente los textos alternativos, no escondes información importante únicamente en la imagen e integras los contenidos visuales con marcadores de posición estables, tu sitio web sigue siendo utilizable – incluso cuando una imagen no llega.

Esto encaja con nuestra aspiración de «Acceso para todos»: No porque prometamos perfección, sino porque nos tomamos en serio la responsabilidad.

Las reparaciones rápidas pueden generar nuevos errores

Ante los problemas con imágenes vemos dos reacciones típicas: O bien se «analiza todo hasta destrozarlo» – o se adoptan soluciones rápidas que a largo plazo crean nuevos problemas. En este proceso aparecen constantemente algunos malentendidos.

Mito: Un CDN hace que todo sea rápido automáticamente

Un CDN puede reducir la latencia, pero no hace que una imagen de 5 MB se vuelva pequeña de repente. Si no utilizas un CDN de imágenes con transformación automática, el tamaño del archivo permanece idéntico. El efecto es entonces limitado – y a veces incluso surge complejidad adicional debido a la invalidación de caché.

Si realmente quieres servir contenido de forma automatizada, echa un vistazo a servicios como Cloudinary que sirven formatos y tamaños dinámicamente. No es necesario para todos los sitios, pero con grandes cantidades de imágenes puede ahorrar mucho trabajo de mantenimiento.

Mito: La máxima calidad siempre es la mejor decisión

Nos encantan las imágenes impactantes. Pero también vemos que los usuarios prefieren abandonar antes que esperar a la perfección. Si el tiempo de carga aumenta de 1 a 10 segundos, la tasa de rebote puede crecer drásticamente. Site Builder Report↗ Nuestra experiencia: Una calidad que sea «visualmente limpia» supera a una calidad que sea «técnicamente máxima».

Mito: Una vez optimizado, queda resuelto para siempre

El rendimiento es un estado que cambia a diario, porque los contenidos cambian. Hoy un redactor sube una imagen de 6 MB, mañana llega un nuevo plugin, pasado mañana se activa un CDN. Por eso la prevención es más importante que las heroicidades.

Mito: el texto alternativo resuelve el problema

Los textos alternativos son importantes – pero no son una excusa para las imágenes rotas. Son el cinturón de seguridad, no el motor.

No nos gustan estos mitos porque sean «falsos», sino porque te orientan en la dirección equivocada: alejándote de un diagnóstico claro, alejándote de una estrategia de imágenes bien planteada. Cuando entiendes las relaciones una vez, el tema se vuelve mucho más relajado – y tomas decisiones que combinan diseño, técnica y efecto.