Cómo evitar que descarguen tus imágenes con CSS

Si eres un fotógrafo profesional o una persona que tiene que mostrar su trabajo en imágenes en internet es muy lógico que quieras proteger tu trabajo y evitar que los usuarios descarguen la imagen sin tu permiso para que la usen en otro lado; pasa y es muy común. Servicios como Flickr o 500px o cualquier otro que se dedica a mostrar trabajos profesionales tienen la habilidad de bloquear el clic derecho para descargar las imágenes, pero no todos los que crean su propio sitio web saben cómo hacer que no pueda descargarse esa imagen.

En este tutorial vamos a ver dos formas muy sencillas de cómo evitar que descarguen tus imágenes con CSS, métodos muy sencillos para despistar al usuario y que o no pueda descargar la imagen, o la descargue pero no sea la que el quiere. Podemos irnos un poco más allá y usar Javascript para deshabilitar el menú contextual, pero por ahora con CSS bastará.

1° forma: imagen de fondo

body{
  background-color: black;
}
#mi-imagen{
  background-image: url(https://lh6.googleusercontent.com/-Yfl5sAgA5lQ/UokH4u66kgI/AAAAAAAAa7M/lpmSqWlpShE/s600/imagen.jpg);
  width: 600px;
  height: 455px;
  margin: 0 auto;
}

See the Pen %= penName %> by Marcos Rivas R (@marcosrivasr) on CodePen

La forma más sencilla sigue siendo haciendo que la imagen no sea como tal una etiqueta <img> sino un fondo de una capa. El navegador solo puede descargar imágenes que tengan etiqueta <img>, por lo cual no podrá descargarla. La desventaja es que no es del todo correcto poner como estilos las imágenes de un sitio, y más si son bastantes, así que sólo lo recomiendo si son pocas imágenes.

2° forma: el placeholder

<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>

See the Pen %= penName %> by Marcos Rivas R (@marcosrivasr) on CodePen

Esta técnica consiste en sobreponer una imagen, de tal forma que cuando el usuario la quiera descargar descargue la imagen sobrepuesta, no la que está viendo. La imagen sobrepuesta puede ser una imagen transparente con nada, o una imagen con un aviso o logo pero con la opacidad en CSS de 0 para que no se vea. Es más eficiente porque sólo se tendría que especificar el ancho y margen de cada imagen, pero ya no se necesita poner la url de cada imagen en cada estilo.

Conclusiones

Entonces, son dos métodos muy usados en internet para proteger el contenido con propiedad intelectual. Es lógico que si sabes un poco más sobre el tema te puedes brincar estas restricciones e igualmente descargarte las imágenes, pero el porcentaje de población que sabe hacer eso es bastante bajo con el que no, así que no hay tanto que preocuparse de que todos se hagan expertos en HTML para descargar las imágenes.

¿Te gustó el tutorial?