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.