Cómo evitar que nos roben imágenes de nuestras páginas web

7 enero, 2008 on 10:17 am | En contenidos, Diseño web, General, internet | 11 Comentarios

Cuando realizamos una página web, una de las grandes preocupaciones (entre otras) es evitar que nos roben nuestros contenidos. Sobre todo si hablamos de sitios con textos o gráficos muy exclusivos o difíciles de conseguir.

En primer lugar hay que decir que desgraciadamente todo lo que publiquemos en internet podrá ser copiado de alguna manera u otra. Y que la única forma segura de evitar que nos “fusilen” algo es no publicarlo.

Sin embargo, podemos hacer algo al respecto, y al menos ponérselo un poco más difícil a los que quieran coger contenido “prestado”. En este post vamos a hablar de las formas de persuadir a quienes quieran acceder a nuestros contenidos gráficos.

Deshabilitar botón derecho con javascript

Uno de los recursos más empleados en este tipo de casos es deshabilitar el botón derecho a través de javascript. Este recurso al menos deshabilita la función de “Guardar imagen como…” con el botón derecho. Además si lo acompañamos con un mensaje tipo alert recordando el copyright, mucho mejor.

Botón derecho deshabilitado

Un ejemplo de código javascript para emplear en estos casos es el siguiente, que debemos incluir en nuestros archivos html entre las etiquetas <head> y </head>:

PLAIN TEXT

JavaScript:

<script> var sMensaje = \\\\\\’Botón derecho deshabilitado. \n Todos los derechos reservados ©\\\\\\’;
function anularBotonDerecho(e) {
if (navigator.appName == \\\\\\’Netscape\\\\\\’ && (e.which == 3 || e.which == 2)){ alert(sMensaje); return false; } else if (navigator.appName == \\\\\\’Microsoft Internet Explorer\\\\\\’ && (event.button == 2)) { alert(sMensaje); } }
document.onmousedown=anularBotonDerecho; document.oncontextmenu=new Function(“return false”);
</script>

Marcas de agua

Con el anterior ejemplo tan sólo hemos deshabilitado el botón derecho. De todas maneras sabemos que un usuario medianamente experto podía haber guardado las imágenes en su disco duro de alguna manera.

Otro métido para persuadir a los usuarios es colocar una “marca de agua” en nuestras fotografías. Este método resulta más “intrusivo”, ya que estamos modificando la foto original, pero por contra resultará más difícil que después esa imagen sea empleada con otros motivos.

Existen dos maneras de realizar marcas de agua. Una es realizarla con directamente con un programa de edición gráfica (por ejemplo Photoshop). Entonces podemos incluir una imagen encima de la original (en una nueva capa), con nuestro logotipo y jugando con la transparencia.

imagen con marca de agua

Evidentemente esto supone un trabajo importante si publicamos imágenes en nuestro sitio habitualmente. Pero si tenemos un publicador en php podemos hacer que este proceso se realice automáticamente cada vez que subimos una imagen al servidor.

En primer lugar tenemos que hacer una imágen en png que sirva de marca de agua. Es decir, una imagen con transparencia que se superpondrá a todas las imágenes que subamos. Y para que el sistema insete esta marca de agua automáticamente debemos usar la siguiente función:

PLAIN TEXT

PHP:





function marcadeagua($img_original, $img_marcadeagua, $img_nueva, $calidad) {


// obtener datos de la fotografia


$info_original = getimagesize($img_original);


$anchura_original = $info_original[0];


$altura_original = $info_original[1];


// obtener datos de la "marca de agua"


$info_marcadeagua = getimagesize($img_marcadeagua);


$anchura_marcadeagua = $info_marcadeagua[0];


$altura_marcadeagua = $info_marcadeagua[1];


// calcular la posicion donde debe copiarse la "marca de agua" en la fotografia


$horizextra = $anchura_original - $anchura_marcadeagua;


$vertextra = $altura_original - $altura_marcadeagua;


$horizmargen =  round($horizextra / 2);


$vertmargen =  round($vertextra / 2);


// crear imagen desde el original


$original = ImageCreateFromJPEG($img_original);


ImageAlphaBlending($original, true);


// crear nueva imagen desde la marca de agua


$marcadeagua = ImageCreateFromPNG($img_marcadeagua);


// copiar la "marca de agua" en la fotografia


ImageCopy($original, $marcadeagua, $horizmargen, $vertmargen, 0, 0, $anchura_marcadeagua, $altura_marcadeagua);


// guardar la nueva imagen


ImageJPEG($original, $img_nueva, $calidad);


// cerrar las imagenes


ImageDestroy($original);


ImageDestroy($marcadeagua);


}

Después sólo tendríamos que llamar a la función:

PLAIN TEXT

PHP:

marcadeagua(“images/original.jpg”,”images/marcadeagua.png”,”images/original.jpg”,100);

Más sobre la marca de agua en php: http://bitacora.guebs.com/articulo/28/anadir-marca-de-agua-a-fotografias/
Emplear flash

Otro recurso para evitar que nuestras imágenes se puedan coger fácilmente es emplear flash, por ejemplo para realizar una galería de fotos donde se muestren las imágenes más importantes. Con ello evitaremos que los usuarios se puedan descargar las imágenes de una manera directa. Aunque ni aún así estaremos a salvo de que nos puedan copiar.

Conclusión

Como decíamos al comienzo del artículo la única manera de que algo que publiquemos en internet no sea copiado es no publicándolo. Sin embargo con las técnicas que hemos explicado podemos, al menos dificultar esa tarea. Según nos convenga podemos usar cada una de las técnicas, e incluso combinarlas.

11 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

Hola, eh estado buscando por muchas webs el code para deshabilitar el boton derecho pero ninguno funciona, luego de que aparece el mensaje igual aparece el menu desplegable y eso es lo que yo queria que no se viera asi que ahora ando porbando este, les aviso el resultado.

Comentario by Sakura — 12 12UTC febrero 12UTC 2008 #
No me ha funcionado el code O.O

Comentario by Sakura — 12 12UTC febrero 12UTC 2008 #
Hola Sakura: En principio, poniendo el cÃ³digo entre las etiquetas head, deberÃa funcionar mostrando un alert en vez del menÃº del botÃ³n derecho.

Al menos en Explorer y Firefox si ha funcionado, puedes ver el ejemplo en esta pÃ¡gina web: http://www.zoobull.com

Un saludo

Comentario by administrador — 12 12UTC febrero 12UTC 2008 #
Muy buen resumen. De las soluciones que propones yo me quedo con la galerÃa en Flash y asÃ de paso mejoramos un poco el diseÃ±o de la pÃ¡gina.

Un saludo.

Comentario by diseÃ±o web — 10 10UTC marzo 10UTC 2008 #
Gracias por la informaciÃ³n.

exelente articulo

Comentario by Enrique — 5 05UTC noviembre 05UTC 2008 #
Deshabilitar el botÃ³n derecho con javascript me parece una mala opciÃ³n. No evita para nada que se copie la foto al que quiera llevÃ¡rselo pero produce un engorro enorme a los que navegamos con el botÃ³n derecho del ratÃ³n para abrir pÃ¡ginas en pestaÃ±a nueva. Cada vez que me encuentro una pÃ¡gina que me muestra un mensajito de esos de copyright me resulta un frustrante navegar por ella y es posible que la abandone.

Comentario by Pablo — 23 23UTC abril 23UTC 2009 #
Estoy de acuerdo en que deshabilitar el botÃ³n derecho es molesto. Como decÃa en el post, ninguna de las maneras de proteger las imÃ¡genes es perfecta. En este caso ademÃ¡s de molestar, no evita que nos puedan robar las imÃ¡genes de otras maneras. Sin embargo creo que el aviso tiene bastante fuerza con el mensaje emergente.

Comentario by administrador — 23 23UTC abril 23UTC 2009 #
Pero la fuerza es contraproducente, es decir, al que viene a copiar la foto le da igual y no le produce ningÃºn efecto y al navegante legal que visita la web con interÃ©s le produce molestia.

Es como los anuncios antipiraterÃa de los DVD del videoclub. Al que va a copiar el DVD se la trae al pairo pero a mÃ que acabo de pagar 2,40 euros por el alquiler me resulta ofensivo tener que tragarme ese anuncio sin poder saltÃ¡rmelo.

Comentario by Pablo — 23 23UTC abril 23UTC 2009 #
No entiendo como se pone el codigo :S

Comentario by Remi — 19 19UTC julio 19UTC 2009 #
Una falla… No puedes reproducir videos por lo que para mi web no sirve TT.TT

Comentario by MOGADIAN — 26 26UTC septiembre 26UTC 2011 #
Usar Overlay, o setaffinity en windows7 esto evita copiar imagenes desde hardware

Comentario by luchotiz — 13 13UTC diciembre 13UTC 2011 #