Si deseas proteger las imágenes de tu blog o sitio web, lo mejor sería que no las publiques; ya que es casi imposible evitar que terceros copien o guarden las imágenes en sus equipos. Sin embargo, ahora vamos a mencionar un pequeño truco que podría desalentar a la gente no ducha en "el arte del copy y paste" de imágenes.
La opción "Guardar imagen" que encontramos luego de darle clic derecho esta disponible, pero en lugar de descargar la fotografía real, lo que se va a almacenar es una imagen en blanco. Asimismo, la URL de la imagen (si vemos las Propiedades de la imagen) muestra unos caracteres raros (esto se llama una URI de datos) y por tanto, los no técnicos, no podrán hacer hotlinking directamente a la imagen.
Esta es la manera de tradicional de añadir una imagen:
El código estándar para insertar una imagen sería:
Ahora, lo que debemos hacer es cambiar el valor del atributo SRC para que apunte a una imagen en blanco y luego añadir un atributo STYLE que muestre la imagen real como fondo del elemento. Recuerda que hay que precisar el ancho y alto de la imagen real, caso contrario no se mostrará correctamente.
Con esta técnica logramos superponer una imagen transparente en nuestra fotografía, de tal manera de que si alguien trata de guardar la imagen, se descargará la imagen superpuesta en lugar de la real.
Desde luego, este pequeño truco no nos asegura que un visitante pueda copiar la imagen. Podría, por ejemplo, recuperar la imagen desde la caché de su navegador o utilizar una captura de pantalla o tomar una medida más complicada. Pero, por lo general, estas técnicas no son muy conocidas por los usuarios "no técnicos"; por lo que, dado el caso, vendría bien utilizarlas.
La opción "Guardar imagen" que encontramos luego de darle clic derecho esta disponible, pero en lugar de descargar la fotografía real, lo que se va a almacenar es una imagen en blanco. Asimismo, la URL de la imagen (si vemos las Propiedades de la imagen) muestra unos caracteres raros (esto se llama una URI de datos) y por tanto, los no técnicos, no podrán hacer hotlinking directamente a la imagen.
Esta es la manera de tradicional de añadir una imagen:
[<img src="foto.jpg" width="500" height="250">]
El código estándar para insertar una imagen sería:
[<img style="background-image:url(foto.jpg);" src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="500" height="250">]
Ahora, lo que debemos hacer es cambiar el valor del atributo SRC para que apunte a una imagen en blanco y luego añadir un atributo STYLE que muestre la imagen real como fondo del elemento. Recuerda que hay que precisar el ancho y alto de la imagen real, caso contrario no se mostrará correctamente.
Con esta técnica logramos superponer una imagen transparente en nuestra fotografía, de tal manera de que si alguien trata de guardar la imagen, se descargará la imagen superpuesta en lugar de la real.
Desde luego, este pequeño truco no nos asegura que un visitante pueda copiar la imagen. Podría, por ejemplo, recuperar la imagen desde la caché de su navegador o utilizar una captura de pantalla o tomar una medida más complicada. Pero, por lo general, estas técnicas no son muy conocidas por los usuarios "no técnicos"; por lo que, dado el caso, vendría bien utilizarlas.
