Subió una imagen a Google Drive, copió el enlace del botón «Compartir» y lo pegó en <img src="...">. El sitio muestra un ícono roto. ¿Le suena familiar?

Google Drive no sirve imágenes directamente a través del enlace de uso compartido. Usted obtiene una página HTML de Google con una vista previa, no el archivo en sí. El navegador intenta honestamente renderizar esa página como una imagen y falla. Existe una solución, y es más simple de lo que parece: necesita construir un enlace directo insertando el ID del archivo en una URL especial. Sin servicios de terceros, Google Drive puro.

Recorramos el proceso completo paso a paso: desde publicar una imagen hasta una etiqueta funcional en su sitio.

💡 Resumen rápido:

• Abra el acceso compartido a la imagen en Google Drive (botón «Compartir», nivel de permiso «Cualquiera con el enlace»)
• Copie el ID del archivo desde el enlace compartido (la cadena larga después de d/ y antes de /view)
• Inserte el ID en la plantilla de enlace directo https://drive.google.com/uc?export=view&id=YOUR_ID
• Pegue el enlace listo en el atributo src de una etiqueta HTML img en su sitio

Por qué usar Google Drive para alojar imágenes

Google Drive ofrece 15 GB de espacio gratuito a cada cuenta. Para un sitio pequeño, entorno de pruebas o página de CodePen, es más que suficiente.

A diferencia de un CDN de terceros, las imágenes residen en su cuenta y usted tiene control total sobre el acceso. Cierre el acceso compartido y la imagen dejará de mostrarse en todos los sitios al instante. Sin servidores externos, sin registro en servicios adicionales.

La velocidad de servicio de Google es consistentemente alta. Los archivos se distribuyen a través de la misma infraestructura que sirve YouTube y Google Fotos. Para prototipos y proyectos personales, esto es un CDN gratuito sólido.

Paso 1: abrir el acceso a la imagen

Suba una imagen a Google Drive arrastrando el archivo a la ventana del navegador o haciendo clic en «Nuevo» → «Subir archivo».

Después de subirla, haga clic derecho en el archivo y seleccione «Compartir» → «Compartir». En la ventana que se abre, cambie el nivel de acceso de «Restringido» a «Cualquiera con el enlace». Haga clic en «Copiar enlace».

Sin este paso, la URL directa no funcionará. Incluso un enlace correctamente construido para un archivo privado devolverá un error 403. El acceso debe ser público.

Paso 2: extraer el ID del archivo

El enlace compartido copiado se ve más o menos así:

1
https://drive.google.com/file/d/1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w/view?usp=sharing

El ID del archivo es la cadena larga entre d/ y /view. En el ejemplo anterior, es 1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w. Selecciónelo y cópielo.

Así es como se ve el ID en el enlace (resaltado en rojo):

El ID es único para cada archivo en Google Drive. No es una cadena aleatoria, sino un identificador interno que Google utiliza para localizar su archivo en sus servidores. No se puede cambiar.

Paso 3: construir el enlace directo

Inserte el ID copiado en la plantilla:

1
https://drive.google.com/uc?export=view&id=YOUR_ID

Para nuestro ejemplo, el enlace terminado se verá así:

1
https://drive.google.com/uc?export=view&id=1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w

El parámetro export=view le indica a Google que sirva el archivo tal cual, sin envoltura HTML. Esto no es una página de vista previa, sino un flujo de bytes puro de la imagen. Funciona para JPEG, PNG, WebP, GIF y SVG.

Pruebe el enlace: péguelo en la barra de direcciones del navegador. Si se abre la imagen en sí en lugar de una página de Google, el enlace está construido correctamente.

Si necesita una descarga directa del archivo en lugar de una imagen (por ejemplo, un PDF o archivo comprimido), reemplace view por download:

1
https://drive.google.com/uc?export=download&id=YOUR_ID

El navegador no abrirá el archivo, sino que le pedirá inmediatamente guardarlo en el disco.

Paso 4: insertar la imagen en el sitio

Inserte el enlace construido en el atributo src de una etiqueta <img>:

1
<img
2
  src="https://drive.google.com/uc?export=view&id=1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w"
3
  alt="Image description"
4
  width="800"
5
  height="600"
6
>

No olvide el atributo alt con una descripción significativa, es importante tanto para la accesibilidad como para el SEO.

Para WordPress en el editor Gutenberg, seleccione el bloque «Imagen» → «Insertar desde URL» y pegue el enlace directo. Para el editor clásico, botón «Añadir medios» → «Insertar desde URL».

En modo fondo (CSS), el enlace funciona exactamente igual:

1
.hero {
2
  background-image: url('https://drive.google.com/uc?export=view&id=YOUR_ID');
3
}

Ejemplo listo en CodePen

En CodePen, puede probar el método sin desplegar un sitio. Cree un nuevo Pen, inserte una etiqueta <img> con el enlace directo del paso anterior y la imagen aparecerá en el panel de vista previa.

Funciona con cualquier imagen pública de Google Drive. Cambie la imagen original en Drive (mismo ID, nuevo archivo) y la versión nueva se reflejará automáticamente en el sitio.

Limitaciones del método

Los enlaces directos de Google Drive tienen un techo de tráfico. Google no publica cifras exactas, pero en la práctica, con varios miles de vistas al día, una imagen puede dejar de cargar. Para un sitio de producción con alto tráfico, esto no es una solución; use un CDN especializado (Cloudinary, Bunny CDN) o almacenamiento de objetos (Amazon S3).

La imagen debe ser pública. El acceso «Solo por invitación» o «Usuarios específicos» no activará la URL directa.

El formato del enlace puede cambiar. Google no garantiza la estabilidad del endpoint uc?export=view como API pública. En más de 10 años de uso no se ha roto, pero formalmente el método no está documentado para uso externo. Para proyectos a largo plazo, es más fiable configurar su propio almacenamiento.

No obstante, para un prototipo, página de aterrizaje de fin de semana, portafolio o ejemplo de CodePen, este método está completamente justificado. Rápido, gratuito y sin registro en servicios de terceros.

⁉️🤔 Preguntas frecuentes

La imagen no carga, aunque el enlace está construido correctamente. ¿Qué pasa?

Verifique el nivel de acceso del archivo en Google Drive. Incluso un enlace uc?export=view&id=... correctamente construido no devolverá nada o dará un error 403 si el archivo no está publicado públicamente. Abra la configuración de acceso y asegúrese de que esté seleccionado «Cualquiera con el enlace», no «Acceso restringido». El segundo caso común es que el archivo se haya eliminado de Drive o movido a la papelera. El ID sigue siendo el mismo, pero no hay nada que servir.

¿Puedo insertar imágenes SVG usando este mismo método?

Sí, SVG funciona exactamente igual. Google Drive sirve correctamente archivos vectoriales mediante export=view, y el navegador los muestra en <img> sin problemas. Sin embargo, recuerde la seguridad: SVG puede contener scripts, así que no inserte archivos SVG de terceros en su sitio sin verificación. Para sus propios iconos e ilustraciones, el método es completamente aplicable.

¿Cuántas imágenes se pueden servir desde una cuenta de Google?

No hay un límite estricto en el número de archivos, todo depende del volumen de almacenamiento (15 GB gratuitos) y del techo de tráfico no oficial. En la práctica, 50-100 imágenes en un sitio de portafolio personal funcionan sin quejas durante años. Para un sitio comercial con mucho tráfico, es mejor alquilar un CDN.

¿Cuál es la diferencia entre export=view y export=download?

export=view sirve el archivo como contenido para mostrar en el navegador, una imagen se abre en una pestaña, el video comienza a reproducirse. export=download fuerza una descarga: el navegador no muestra el archivo sino que lo guarda en el disco. Para <img src=""> use view. Para un enlace «Descargar PDF» en un botón, use download.

¿Puedo generar vistas previas de diferentes tamaños?

Sí, añada el parámetro sz=wNUMBER al enlace. Por ejemplo, &sz=w320 limitará el ancho de la imagen a 320 píxeles. Google escalará la imagen sobre la marcha y usted ahorrará tráfico para la versión móvil del sitio. Plantilla completa: https://drive.google.com/uc?export=view&id=YOUR_ID&sz=w320.

¿Vale la pena usar Google Drive como CDN para imágenes?

Para un blog personal, proyecto mascota o prototipo rápido, sí, esta es una opción funcional y justificada. Coste cero, control de acceso total y esfuerzo mínimo.

Para un sitio con tráfico de un par de miles de personas al día, considere Cloudinary con su capa gratuita (25 GB de tráfico al mes) o Bunny CDN con facturación por segundo. Cuestan centavos y las imágenes cargan de forma estable bajo cualquier carga.

Conserve el método de Google Drive en sus marcadores como opción de emergencia. Cuando necesite compartir rápidamente una captura de pantalla en un foro, mostrar un diseño a un cliente o dar vida a una imagen en CodePen, este es el camino más corto desde la subida del archivo hasta el enlace funcional. Sin registros, sin SMS, sin cuotas.