Proteger las imágenes utilizando HTML

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:

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

¿Qué te pareció?

Loading...
Nombre

Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
false
ltr
item
OnSoni: Proteger las imágenes utilizando HTML
Proteger las imágenes utilizando HTML
OnSoni
http://www.onsoni.com/2012/02/proteger-las-imagenes-de-tu-blog-o.html
http://www.onsoni.com/
http://www.onsoni.com/
http://www.onsoni.com/2012/02/proteger-las-imagenes-de-tu-blog-o.html
true
8818836675902573334
UTF-8
Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy