English Português

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Angelfire / Hace 8 años /

      Una pequeña pregunta, en html las imagenes no se invocan con scr el href es para enlaces, o en eso consiste el truco?

      Responder a Angelfire →
    2. Francisco / Hace 8 años /

      Lo tenía todo como enlace :S, no sé que estaba pensando, muchas gracias por la corrección.

      Responder a Francisco →
    3. Daz / Hace 8 años /

      En Tuenti es el truco que usan para no poder guardar las imágenes, aunque desgraciadamente es franqueable.

      Responder a Daz →
    4. liberty / Hace 8 años /

      no veo para que tanta proteccion. la idea de compartir no es buena?

      Responder a liberty →
    5. bro0olee / Hace 7 años /

      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?

      Responder a bro0olee →
    6. Francisco / Hace 7 años /

      @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.

      Responder a Francisco →
    7. muroloco / Hace 5 años /

      siempre alquien con los suficientes conosimientos la va a sacar pero mientras que no se la robe cualquier nabo me quedo feliz

      Responder a muroloco →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad