Hace poco que hemos publicado la nueva página web de lavendetta. Diego, el dueño de los restaurantes nos, llama al cabo de unas semanas y me dice: " Jerom,  quisiera saber cómo proteger las fotos de mi web. Hemos invertido mucho en la nueva imagen y las fotos de todos los productos, y no nos gusta la idea que terceros las descarguen sin escrúpulos par sus fines ¿Nos podéis ayudar con este tema?”

Le respondimos que haríamos lo posible. Al cabo de unos minutos me di cuenta que es una genial temática para hablar hoy en el blog. Un poco polémica por cierto, me imagino que a muchas personas se preguntarán lo mismo, Cómo proteger las fotos de mi web, sobre todo si tienes una tienda online y manejas muchas fotos de productos. Pero la verdad es que no hay manera de evitarlo al 100%, ya que si un usuario está viendo las imágenes de tu web desde su ordenador, es porque ya las tiene descargadas y almacenadas desde el caché. Además, no nos engañemos, con un simple screenshot un usuario ya tiene tu imagen por más impedimento que le pongas.

A ver, partiendo de la base de que ya tienes todos los copyrights bien colocados y especifiques que las imágenes son de tu propiedad para estar cubierto legalmente, hay maneras de poner restricciones para disminuir que un usuario haga descargas con el botón derecho “guardar imagen como...”

Pues bien, te contaré una maneras relativamente sencilla de evitar este dolor de cabeza. Sin embargo, en este caso es necesario contar con la ayuda de un programador o maquetador web ya que se precisa conocimientos de CSS.

Protege tus imágenes con una imagen transparente como escudo.

Para poder explicar este recurso, he encontrado en el blog de @MarcosRivas un ejemplo muy claro y visual.

A nivel de concepto es sencillo, se trata de colocar una imagen transparente encima de la imagen que quisiera proteger. Como si fuera algo parecido a un "escudo". De modo que si alguien desea descargarla haciendo clic con el botón derecho, “guardar imagen como...” lo que descargará será la imagen transparente en vez de la imagen que está viendo.

De hecho, la imagen puede ser tanto transparente como una imagen normal con un lindo mensaje de Warning diciendo: ¡Hey, esta imagen es de mi propiedad!  pero marcando con opacidad al 0% desde CSS, de modo que cuando el usuario descargue la imagen, lo que realmente descargará será la imagen transparente o la imagen con el lindo "Warning"

Desde esta tabla se pude ver el código desde HTML, luego desde CSS y como sería el ejemplo final.

<div id="mi-imagen">
  <img src="https://lh6.googleusercontent.com/-Yfl5sAgA5lQ/UokH4u66kgI/AAAAAAAAa7M/lpmSqWlpShE/s600/imagen.jpg" width="600" />
  <img src="https://lh3.googleusercontent.com/-wJbbMNizEmE/UQ09g8H2sEI/AAAAAAAAW2Q/MmtZicNnobQ/s500/28780885089750919_T4ub79ZW_c.jpg" alt="" id="placeholder" />
</div>

Gracias a Marcos Rivas por haber publicado tan buen ejemplo.

En fin si te preguntas Cómo proteger las fotos de mi web, con este pequeño truco podrás como mínimo desalentar a más de un usuario. Si por el contrario, eres de aquellos que les gusta descargar miles imágenes, te recomiendo estos bancos de imágenes gratis para que puedas contar con muy buen material visual y tener la conciencia limpia. 😉

Hasta la próxima.