Impedir el copy-paste de una imagen que has publicado

Ya que el último post sobre añadir el copyright a una imagen tuvo tanto éxito, os voy a explicar otra manera de proteger vuestra propiedad intelectual, e impedir el copy-paste de una imagen que has publicado en la red.

Por supuesto tengo que advertiros de que no es un sistema definitivo, hay montones de triquiñuelas para que, si alguien está verdaderamente interesado en conseguirla, lo pueda hacer, pero se lo ponemos más difícil, sobre todo a aquellos que no tengan conocimientos de web o programación.

Cómo impedir el copy-paste de una imagen

Voy a explicar tres métodos para impedir el copy-paste, lo único que necesitas es acceso al código fuente. Éstos son los mecanismos:

Desabilitar la función de botón derecho en la imagen

Esta función es para mí la más útil de todas. Tú decides cuando y en qué imagen implementarla, y sólo afecta a dicha fotografía o imagen que quieres proteger. Se hace añadiendo una etiqueta de bloqueo con un aviso para que no puedan deplegar el menú para copiar la imagen. Es una sencilla línea de código que no afecta al tiempo de carga de la página y que se pone del siguiente modo:

<img="no-copiar.png" oncontextmenu="return false"/>

Prueba a hacer clic con el botón derecho:

Derivar la imagen a una página en blanco

Este es otro sistema para evitar la copia de imágenes. En lugar de cargar la imagen directamente, dirigimos el src a una “imagen en blanco” (URI de datos), y posteriormente incluimos la imagen deseada mediante un style. De este modo, la opción de botón derecho está activa, pero no se guardará la imagen ni se abrirá en otra pestaña, ya que nos dirigirá al src.
Se haría así:

<img style="background-image:url(no-copiar2.png);" src="data:image/gif;base64,
R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="400" height="180">

Inconvenientes:

• Como veis, hay que añadir valores fijos a la imagen, por lo que nos cargamos el responsive, si la imagen es más ancha que la pantalla del dispositivo, irá desapareciendo al no ser más que un fondo.
• Añadir el código css en el propio html es ensuciar el código y ralentizar la página; también la ralentizaríamos si crearamos clases para cada imagen dentro de un archivo css independiente.

Desabilitar la función de botón derecho en toda la página

Esta opción puede seros útil si vais a incluir muchas fotos en una misma página, y no queréis estar incluyendo código en cada una de ellas. Sería añadiendo una línea de código en javascript de esta manera:

<script type="text/javascript" language="Javascript">
document.oncontextmenu = function(){return false}
</script>

Sin embargo no la recomiendo por varias razones:

• Las peticiones de javascript ralentizan el tiempo de carga de la página.
• Bloquearéis las opciones de botón derecho de otros complementos, como abrir enlaces en otras pestañas, o aplicaciones automáticas como buffer, haciendo menos deseable que se comparta vuestro contenido.
• El texto será igualmente apto para copiar y pegar, luego no os sirve si lo que queréis es proteger el contenido íntegro de la página.

Impedir la copia de cualquier contenido

Si lo que queremos es impedir la copia de todo el contenido, tanto imágenes como texto, lo que debemos hacer es añadir estas funciones dentro del div donde se encuentre el contenido que queramos bloquear.

<div class="contenido" oncontextmenu='return false' ondragstart='return false'
onmousedown='return false' onselectstart='return false'>

Espero que os sean útiles estos consejos, aunque ya os digo, si alguien quiere hacerse con vuestras imágenes, creedme, que métodos hay, pero al menos se lo pondremos más difícil a aquellos que quieran aprovecharse de nuestro contenido único.
Si tenéis cualquier duda, estaré encantada de contestarlas, así que no seais tímidos y comentad lo que queráis