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

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

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.

9 comentarios »

Suscripción RSS a los comentarios de la entrada. URI para TrackBack.

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 por Sakura — 12 12e Febrero 12e 2008 #
No me ha funcionado el code O.O

Comentario por Sakura — 12 12e Febrero 12e 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 por administrador — 12 12e Febrero 12e 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 por diseño web — 10 10e Marzo 10e 2008 #
Gracias por la información.

exelente articulo

Comentario por Enrique — 5 05e Noviembre 05e 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 por Pablo — 23 23e Abril 23e 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 por administrador — 23 23e Abril 23e 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 por Pablo — 23 23e Abril 23e 2009 #
No entiendo como se pone el codigo :S

Comentario por Remi — 19 19e Julio 19e 2009 #