¿Por qué no aparece una imagen en mi sitio web?

Un icono de imagen rota, un espacio vacío y un marcador que nunca desaparece ofrecen pistas distintas. Puede faltar el archivo, el navegador puede ser incapaz de mostrarlo o la página puede estar ocultando una imagen que se ha cargado correctamente.

Empieza por una imagen afectada. Las primeras comprobaciones se realizan en el editor del sitio y en el navegador. La sección técnica opcional trata las solicitudes, HTML, CSS y los mensajes de seguridad del navegador.

Si la imagen aparece en la página pero no en los resultados de búsqueda, consulta la guía de Google Imágenes. Si acaba apareciendo, pero tarda demasiado, investiga la carga lenta de imágenes.

1. Empieza por la página publicada

Abre la página pública en lugar de la vista previa del editor. Confirma en el editor que la imagen está seleccionada, que guardaste el cambio y que publicaste la página. Anota qué imágenes fallan y si el problema empezó tras una subida, un rediseño o una migración del sitio.

Prueba también la página pública en una ventana privada. Un resultado distinto es una pista útil, aunque entre ventanas pueden cambiar la sesión iniciada, los datos almacenados y las extensiones.

2. Busca y prueba la dirección de la imagen

Haz clic derecho en la imagen que falta o en su icono y busca Abrir imagen en una pestaña nueva o Copiar dirección de imagen. Estas opciones pueden no aparecer en una imagen de fondo o un marcador vacío.

También puedes seleccionar la imagen en el editor y abrir sus detalles en la biblioteca multimedia. Copia la URL del archivo, no la de una página de adjunto o de uso compartido en la nube. Una página compartida puede mostrar la imagen dentro de una interfaz de descarga o exigir iniciar sesión.

La página pública puede utilizar una miniatura, un recorte móvil o una copia alojada en otro servicio de imágenes. Si solo encuentras el original de la biblioteca, úsalo como punto de partida. La comprobación en Network identifica la versión que solicita la página.

Abre la dirección de la imagen en una ventana privada sin iniciar sesión y elige el siguiente paso:

• La imagen se abre: pasa a las comprobaciones de visibilidad en la página. Si no encuentras nada, examina la solicitud real de la página.
• Aparece un error, una página de acceso o una advertencia de permisos: pasa a ubicación y acceso del archivo.
• El problema solo ocurre en el teléfono: pasa a versiones móviles y carga, aunque el original se abra.
• El navegador descarga el archivo: revisa las cabeceras de respuesta. Los ajustes de descarga pueden explicar ese comportamiento sin demostrar si la imagen funciona dentro de la página.

Que la imagen se abra en una pestaña nueva confirma que se puede mostrar en ese contexto. La página aún puede solicitar otra versión o encontrarse con una restricción de inserción.

3. Restaura el archivo o corrige su acceso

Si el archivo falta o la dirección es incorrecta

1. Busca la imagen correcta en la biblioteca multimedia. Compara su dirección con la que falla. Revisa el dominio, la carpeta, el nombre, la extensión y el uso de mayúsculas y minúsculas. Algunos servidores distinguen entre Photo.JPG y photo.jpg.
2. Sustituye la selección rota en el bloque de imagen o widget afectado. Elige el recurso existente que funciona, guarda y publica. Si se eliminó el original, sube primero un reemplazo fiable.
3. Vuelve a abrir la página pública. Comprueba que ahora apunta a una imagen disponible. Si sigue solicitando una miniatura inexistente, consulta más abajo la comprobación de tamaños generados.

Después de migrar un sitio, compara también el servidor de la imagen, no solo el nombre. La página podría seguir apuntando al dominio o a la carpeta de subidas antiguos. Para rutas escritas a mano, consulta las comprobaciones técnicas.

Si el original funciona, pero falta una miniatura

Volver a subir una imagen no siempre repara una página que sigue citando la versión que falta. Facilita a quien mantiene el sitio la URL del original que funciona y la de la miniatura que falla. Pide que regenere el tamaño ausente y actualice las listas de imágenes que lo referencian. El panel Network proporciona la URL y el estado del fallo.

Por ejemplo: «El original se abre, pero esta página solicita una versión más pequeña que devuelve 404. Por favor, restaura ese tamaño y revisa las referencias de imágenes adaptables de la página». Así señalas la reparación sin tener que conocer las herramientas de generación de la plataforma.

Si se deniega el acceso o se exige iniciar sesión

Decide primero si la imagen debe ser pública. Si es así, elige un recurso subido mediante el proceso habitual de publicación de medios de tu sitio. Una dirección local file:///C:/..., una vista previa temporal blob: o un enlace privado de la nube no es una dirección pública permanente.

Ante una respuesta 401 o 403, envía al proveedor de alojamiento la URL exacta que falla, la página que la utiliza y la hora de la prueba. Pregunta qué regla de autenticación o distribución rechazó la solicitud. Los enlaces con caducidad y la protección contra hotlinking, que limita la inserción en otros sitios, son posibles causas. Corrige la regla o utiliza la URL pública admitida por el proveedor. Mantén los controles de acceso previstos para los recursos privados.

4. Revisa la visibilidad de la imagen en la página

Si la imagen se abre directamente, empieza por sus ajustes en el editor:

• Comprueba la imagen y su sección contenedora. Busca controles como «Ocultar en móvil» o «Solo escritorio». Una sección oculta también oculta las imágenes de su interior.
• Revisa los fondos por separado. Un fondo de sección necesita un contenedor visible. Asigna la altura prevista a una sección vacía y después revisa la posición del fondo y su superposición.
• Examina las imágenes transparentes sobre otro color. Un logotipo blanco puede confundirse con una página blanca aunque se cargue correctamente. Consulta la guía de transparencia si el motivo parece invisible.

Guarda el cambio pertinente y revisa la página pública. Si la imagen sigue sin aparecer, las comprobaciones técnicas permiten distinguir una solicitud bloqueada de una imagen oculta por el diseño.

5. Comprueba las imágenes móviles y los marcadores atascados

Si el problema solo ocurre en el teléfono

Abre la vista móvil del editor y comprueba si la imagen o su sección están ocultas. Si hay un ajuste independiente para la imagen móvil, verifica que apunte a un recurso disponible. Después prueba la página pública en el teléfono afectado.

Los sitios pueden generar varios tamaños y dejar que el navegador elija. Un teléfono podría solicitar una versión pequeña ausente mientras un portátil utiliza una grande que funciona. Pide que comparen las URL seleccionadas en los tamaños de pantalla donde funciona y falla, y que restauren la versión que falta. Las comprobaciones técnicas explican cómo identificar esa selección.

Si una imagen visible no pasa del marcador

Retrasar la carga de una imagen situada más abajo o de una diapositiva de galería aún no abierta puede ser intencional. Investiga si sigue vacía después de llegar a ella o abrir la diapositiva y darle tiempo a cargarse. Una solicitud fallida y una que nunca se inicia requieren soluciones distintas.

En una copia de pruebas, comprueba el ajuste de galería o carga diferida en una sola página. Si la imagen vuelve, pide que corrijan ese componente antes de extender el cambio. Para la imagen principal visible al abrir la página, valora si conviene retrasar su carga. Nuestra guía de lazy loading explica las opciones.

6. Compara el editor con lo que reciben los visitantes

Si la imagen solo aparece en el editor, confirma que publicaste el cambio en la página correcta. Compara después su dirección en la biblioteca con la solicitud de la página pública. Una vista previa privada del editor y un archivo subido accesible al público son cosas distintas.

Tras corregir una página o referencia obsoleta, utiliza los controles documentados de tu sistema de publicación para actualizar la caché de la página o recurso afectado. Una red de distribución de contenido, o CDN, puede tener su propia caché. Borrar los datos de tu navegador no actualiza la caché compartida del sitio.

Si el fallo solo aparece en un perfil del navegador, prueba sin extensiones y revisa los permisos del sitio en ese perfil. La navegación privada no desactiva las extensiones en todas las configuraciones. Registra la solicitud fallida antes de decidir si hay que revisar un bloqueador de contenido o el método de distribución del sitio.

La sección técnica explica cómo probar sin la caché HTTP habitual del navegador. La guía de caché de MDN describe las cachés del navegador y las compartidas.

7. Cambia el archivo cuando la causa sea su formato o tamaño

Comprueba el tipo real del archivo y los requisitos del destino antes de elegir un conversor. Convertir puede resolver una incompatibilidad de formato; no puede restaurar una dirección que falta ni mostrar una sección oculta.

• El archivo es HEIC o HEIF y el destino exige JPG: usa HEIC a JPG para crear una copia de imagen fija. Revisa el resultado y conserva el original. Una foto de iPhone podría estar ya en JPEG, así que comprueba antes el formato.
• La plataforma rechaza SVG, pero acepta PNG: crea una copia PNG con dimensiones en píxeles adecuadas. Revisa el gráfico antes de subirlo.
• El archivo tampoco se abre en tu dispositivo: recupera un original válido o vuelve a exportarlo desde la aplicación que lo creó. Cambiar la extensión no repara datos dañados.
• El archivo supera un límite de subida indicado: prepara una copia dentro de ese límite y confirma que la subida terminó y que la página utiliza el archivo subido.

La guía de formatos de MDN compara la compatibilidad y las capacidades de cada formato. Si un SVG cambia de aspecto tras exportarlo, consulta la guía de SVG. Si la imagen aparece, pero se ve poco nítida, consulta la guía de imágenes borrosas.

Ejemplo: una foto de producto desaparece en el móvil

En este ejemplo ilustrativo, una foto de producto funciona en un portátil tras migrar una tienda, pero aparece rota en el teléfono. El original de la biblioteca se abre, por lo que la propietaria revisa la solicitud real del teléfono.

El teléfono selecciona /media/blue-mug-640.webp, que devuelve 404. El portátil usa /media/blue-mug-1280.webp. La migración copió el archivo grande, pero omitió la versión pequeña.

La persona responsable regenera el tamaño ausente, revisa las demás versiones anunciadas y actualiza las referencias obsoletas si hace falta. La propietaria recarga la página pública en el teléfono y confirma que el archivo solicitado devuelve la imagen correcta. La causa era un archivo generado que faltaba; cambiar el formato del original no repararía esa referencia.

8. Verifica la reparación como visitante

Repite la prueba que fallaba en la misma página pública, con el mismo tamaño de pantalla y la misma diapositiva. Confirma que aparece la imagen correcta y sigue disponible tras recargar. Prueba sin sesión de administrador si la imagen debe ser visible para todos.

Si cambiaste una plantilla o la distribución, comprueba otra página que utilice el mismo componente y revisa tanto escritorio como móvil. Anota brevemente la causa y el archivo o ajuste modificado.

Si otra persona debe terminar la reparación, envíale la URL de la página, la URL de imagen seleccionada, la hora del fallo, los datos del navegador y dispositivo, y el error pertinente. Indica si la imagen funciona en el editor, directamente en otra pestaña o con otro tamaño de pantalla. Elimina los tokens privados y los datos personales del material que compartas públicamente.

Opcional: comprobaciones técnicas para responsables del sitio

Elige las pruebas que encajen con las pistas anteriores. Permiten distinguir un archivo no disponible, una solicitud fallida y una imagen cargada pero oculta.

Examina la solicitud de imagen en Network

1. Abre la página pública afectada. En Chrome, elige Más herramientas → Herramientas para desarrolladores en el menú y selecciona Network. Otros navegadores ofrecen controles similares.
2. Mantén activa la grabación y recarga. Selecciona el filtro Img o busca el nombre del archivo. Llega hasta la imagen o abre su diapositiva si eso suele activar la carga.
3. Selecciona la solicitud. En Headers, anota Request URL, el estado y las cabeceras de respuesta. Usa Preview o Response para examinar el contenido recibido.
4. Si no hay coincidencias, elimina los filtros. La URL puede haber cambiado o un script puede obtener la imagen mediante Fetch/XHR.

Para comparar una descarga nueva, activa Disable cache, deja abiertas las herramientas y recarga. Esto omite la caché HTTP habitual del navegador, no la de la CDN. Si interviene un service worker, comprueba sus respuestas almacenadas por separado. Consulta la referencia de Network de Chrome.

Un estado acota la investigación, pero no identifica todas las causas. MDN explica los códigos de estado HTTP y la validación 304 normal. Ante errores de nombre de servidor o certificado, revisa el DNS y HTTPS del servidor de imágenes.

La respuesta debe contener datos reales de imagen y un Content-Type adecuado, como image/jpeg o image/webp. Una URL terminada en .jpg puede devolver HTML, mientras que un servicio de imágenes puede entregar legítimamente otro formato desde esa misma extensión.

Si abrir la dirección descarga el archivo

Revisa Content-Disposition además del tipo de contenido. Una respuesta con Content-Disposition: attachment puede provocar una descarga al abrir la dirección directamente. Eso no demuestra que la imagen falle dentro de una página: examina también la solicitud de la imagen dentro de esa página. Si copiaste un enlace de descarga, usa la URL que el proveedor admite para mostrar imágenes. Consulta la referencia de Content-Disposition.

Busca la URL de imagen adaptable seleccionada

En Chrome o Edge, haz clic derecho en la imagen y elige Inspeccionar. En Elements, selecciona el <img> real, no su contenedor ni <picture>. Abre Console y escribe esta expresión de solo lectura:

$0.currentSrc

$0 se refiere al elemento seleccionado más recientemente en estas herramientas. El resultado es la dirección elegida, no una garantía de carga correcta. Compruébala en Network. La referencia de Console Utilities explica $0, y MDN documenta currentSrc.

El navegador puede elegir un archivo de srcset o una fuente <picture> que cumpla las condiciones. Un src válido no repara el candidato seleccionado que falta. La alternativa de picture depende de las condiciones y la compatibilidad de las fuentes; no confíes en ella para resolver un 404 del archivo elegido. Consulta la selección de imágenes adaptables y la referencia de picture.

Resuelve las rutas de imagen en HTML y CSS

En https://example.com/services/kitchens/, si la página no define otra URL base, estas dos fuentes solicitan ubicaciones distintas:

<img src="images/kitchen.jpg" alt="Cocina terminada con armarios de roble">
<img src="/images/kitchen.jpg" alt="Cocina terminada con armarios de roble">

La primera solicita /services/kitchens/images/kitchen.jpg; la segunda, /images/kitchen.jpg en ese servidor. Elige la dirección que corresponda a tu despliegue real, incluido cualquier prefijo de subcarpeta. MDN explica las rutas relativas y absolutas. En un CSS externo, una URL relativa se resuelve a partir de la dirección de la hoja de estilos; consulta la referencia de URL en CSS.

Inspecciona el diseño y el mecanismo de carga

En Elements → Computed, revisa la imagen y sus contenedores en busca de display: none, visibility: hidden, opacidad cero, dimensiones colapsadas, recortes o superposiciones. Una imagen de fondo no da a un contenedor vacío la altura de la fotografía. Corrige la regla responsable en el editor o la hoja de estilos original; un cambio temporal en las herramientas suele desaparecer al recargar. Consulta la guía de inspección CSS de Chrome y la referencia de background-image.

Si la URL real solo existe en data-src, revisa el script que asigna la fuente y los errores relacionados de Console. Con loading="lazy" nativo, indica dimensiones adecuadas y confirma que la imagen tenga espacio en el diseño antes de cargarse. La guía de carga diferida del navegador explica este comportamiento.

Content Security Policy: comprueba si el servidor de imágenes previsto coincide con img-src, o con default-src si no hay una directiva específica para imágenes. Consulta la referencia de fuentes de imagen en CSP.

Contenido mixto: una referencia HTTP en una página HTTPS puede actualizarse a HTTPS o bloquearse según su uso. Confirma que la imagen esté disponible por HTTPS y actualiza la referencia. Consulta la guía de contenido mixto de MDN.

CORS y políticas de inserción: mostrar una imagen normal de otro origen y leer sus píxeles mediante canvas tienen requisitos diferentes. Añadir crossorigin puede impedir la carga si el servidor no proporciona la respuesta CORS necesaria. Revisa la documentación de CORS para imágenes y cualquier restricción de Cross-Origin Resource Policy indicada.

Preguntas frecuentes

¿Por qué yo veo la imagen, pero los visitantes no?

El editor puede mostrar una vista previa temporal o sin publicar, y tu sesión iniciada puede tener acceso del que carecen los visitantes. Prueba la página pública sin esa sesión. Si el recurso debe ser público, utiliza el proceso de medios públicos del sitio; si no, pide que revisen su visualización autenticada.

¿Por qué la imagen se abre en otra pestaña, pero falla en la página?

Compara primero las direcciones exactas: la página puede solicitar otro tamaño. Si coinciden, busca un error de acceso o de política del navegador en la solicitud insertada. Si la solicitud se completa correctamente, revisa la visibilidad y el diseño de la página.

¿Una respuesta 200 demuestra que la imagen funciona?

No. Comprueba el contenido de la respuesta. Una página de inicio de sesión devuelta con estado 200 no es una imagen. Si contiene la imagen correcta, continúa con los mensajes pertinentes de Console y su visualización en la página. El código por sí solo no confirma un resultado visible.

¿Reducir las dimensiones o comprimir arreglará una imagen rota?

Ayuda si la subida supera un límite indicado o si una imagen demasiado pesada se transfiere lentamente. Una ruta incorrecta, una miniatura ausente o una sección oculta necesita otra reparación. Usa el error de subida o la solicitud para identificar el problema antes de modificar el archivo.

¿Debería renombrar el archivo o cambiar su extensión?

Renómbralo para resolver un problema concreto de ruta o nombre y actualiza las referencias que usan el nombre antiguo. Cambiar .heic por .jpg no convierte la imagen. Utiliza un conversor si el formato real no es compatible y conserva el original.

¿El texto alternativo, robots.txt o Search Console harán aparecer la imagen?

El texto alternativo describe la imagen cuando no se puede ver; no obtiene el archivo. Las instrucciones de robots y Search Console tratan el rastreo y la visibilidad en buscadores. Si falta una imagen en la página de un visitante, revisa primero el archivo, la solicitud y el diseño.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)