Dropbox como alojamiento de imágenes para usar en HTML.

La mayoría de veces que vayamos a necesitar insertar imágenes en una página web usaremos un servicio de alojamiento que hayamos contratado, pero dichos servicios suelen ser de pago y a veces son soluciones demasiado grandes para proyectos tan pequeños como, por ejemplo, una firma de email. En estos casos, en las que necesitamos pocas imágenes, contratar un servicio de hosting es innecesario, por lo que podríamos optar por utilizar un servicio de alojamiento de imágenes gratuito.

La mayoría de estos servicios (como Imageshack, Imgur o Minus) tienen un tiempo de expiración limitado tras el cual borran las imágenes de su servidor. Ésto nos puede causar problemas, por lo que necesitamos encontrar una solución permanente y gratuita.

Dropbox es la opción que os proponemos, ya que el servicio gratuito de alojamiento de archivos con el que cuenta nos permite subir y compartir archivos multiformato. Debemos comentar que también cuenta con un servicio de pago, pero el tema que estamos tratando en esta entrada en concreto, con la opción gratuita sería más que suficiente.

1.- Crear una cuenta de Dropbox e iniciar sesión.

Primero nos dirigimos a Dropbox.com y creamos una nueva cuenta. Dropbox pide nuestros nombres y apellidos, un correo electrónico y una contraseña. Una vez creada la cuenta tendremos 2gb de alojamiento gratuito en la nube.

Podemos vincular Dropbox con nuestro Smartphone descargando la aplicación en la AppStore (iPhone) o Play Store (Android), o podemos descargar la versión PC/MacOsX. No es necesario tener nuestra cuenta vinculada con nuestro teléfono u ordenador, pero mejoraremos la productividad y la podremos usar más fácilmente.

2.- Subir archivos a Dropbox.

El proceso de subida de archivos a Dropbox es muy fácil. Si tenemos Dropbox abierto en el navegador sólo debemos coger y arrastrar los archivos deseados desde nuestro ordenador hasta la ventana de Dropbox y soltarlos. También podemos clickar en el icono de la hoja de papel con un plus para poder añadir uno o más archivos.

Si hemos instalado Dropbox en nuestro PC o MacOSx habrá creado una carpeta llamada Dropbox en el escritorio o en Mis Documentos al que podemos arrastrar los archivos para subirlos.

Podemos crear carpetas para mantener nuestros archivos organizados.

 3.- Cómo conseguir el link al archivo en el servidor.

Si vamos a Dropbox.com, clickamos sobre el archivo que queremos usar y vamos a Compartir veremos que nos facilita una URL. Esa URL nos llevará al archivo que hemos subido, pero no a la URL de la carpeta del servidor en la que se encuentra alojado. Si usamos esta primera URL en un archivo HTML como fuente (source o src en HTML) de una etiqueta de imagen no podremos ver el archivo, ya que es necesario tener la dirección de la carpeta del servidor en la que se encuentra alojado.

Dropbox no nos facilita esa URL, sólo nos da una URL que nos lleva a la galería y abre esa imagen. 

La URL nos lleva a la imagen, pero si la usamos como src de una imagen no nos servirá. ¿Por qué? Porque es la URL a una galería, no al archivo de imagen nativo.

Existe una manera de modificar la URL y poder apuntar directamente al archivo alojado en el servidor. Para eso, únicamente debemos cambiar 

https://www.dropbox.com/ 
por
https://dl.dropboxusercontent.com/.

Esta URL apunta directamente a la imagen, sin más código HTML, por lo que la podemos usar en nuestras firmas de email o webs sin miedo a que caduquen y nos las borren.

Esperamos que os sea de utilidad y si tenéis cualquier duda no dudéis en contárnoslas.

Fuente: http://elblogdelombok.com/lombokdesign/dropbox-como-alojamiento-para-imagenes-usar-en-html/