Son muchas las razones por las que se puede necesitar evitar que imágenes en nuestros sitios web sean guardadas por el usuario e igualmente muchas las técnicas usadas para tratar de evitarlo. Una de ellas es usando CSS y aprovechando un pequeño “descuido” de los navegadores.
Normalmente los navegadores ofrecen una opción que te permite ver las imágenes de fondo de cualquier elemento, pero cuando este elemento es una imagen, la opción no se muestra. Y es claro, sería confuso para el usuario común tener dos opción referentes a imágenes al mismo tiempo, así que solo se muestra la opción más usada “Guardar imagen”.
Entonces el truco esta en mostrar una imagen con transparencia, de preferencia .gif de 1×1 px, y a esta ponerle como fondo la imagen que queremos “ocultar” junto con sus dimensiones.
Ejemplo
Primero se incluye la imagen transparente en HTML con normalidad:
<img src="imagentransparent.gif" alt="" class="imgoculta" />
Para ubicarla rápidamente en CSS se le dio la clase imgoculta. Entonces en la hoja de estilos CSS se le dan atributos a esta clase:
.imgoculta {
background:url(imagenaocultar.jpg) no-repeat 0 0;
/* Tamaño de la imagen */
height:100px;
width:100px;
}
Si todas las imágenes tienen las mismas dimensiones, se les puede aplicar esta clase y así ocultar a todas. De este modo se mostrará nuestra imagen como normalmente, pero si el usuario intenta guardarla terminará con una copia de la imagen transparente (imagentransparent.gif).
Conclusión
Esta técnica es usada por flickr para proteger las imágenes con derechos reservados. Es muy sencilla y fácil de aplicar pero para nada infalible, basta tener conocimientos de CSS y HTML y/o tener una herramienta como firebug instalada para dar con la URL de la imagen original, sin embargo si será efectiva para la mayoría de los usuarios y poco intrusiva.
Angelfire febrero 9, 2009 a las 10:49 pm
Una pequeña pregunta, en html las imagenes no se invocan con scr el href es para enlaces, o en eso consiste el truco?
ResponderFrancisco febrero 10, 2009 a las 11:40 am
Lo tenía todo como enlace :S, no sé que estaba pensando, muchas gracias por la corrección.
ResponderDaz febrero 23, 2009 a las 2:03 pm
En Tuenti es el truco que usan para no poder guardar las imágenes, aunque desgraciadamente es franqueable.
Responderliberty abril 5, 2009 a las 3:53 pm
no veo para que tanta proteccion. la idea de compartir no es buena?
Responderbro0olee agosto 2, 2009 a las 8:32 pm
Es buena idea, pero ¿qué pasa si con Firefox guardas la página completa?, tengo entendido que se guardan todos los elementos en una carpeta. Eso sirve igual para hi5, metroflog, etc.
Creo que es una opcion para echar a perder esta “seguridad” ¿no?
ResponderFrancisco agosto 3, 2009 a las 12:39 am
@bro0olee No hay método infalible, siempre se les puede sacar la vuelta a estos pequeños “trucos”, pero aplicándolos al menos la mitad de los usuarios no podrán tomarla.
Respondermuroloco marzo 26, 2012 a las 9:46 am
siempre alquien con los suficientes conosimientos la va a sacar pero mientras que no se la robe cualquier nabo me quedo feliz
Responder