Proteger imágenes en línea es una difícil, casi imposible, misión que cumplir. Al final, la imagen esta ahí y un comando de «captura de pantalla» puede grabarla y no hay forma de para esto.
Pero, hay varias maneras de dificultar el proceso y hacer que no valga la pena probar, como deshabilitar anticlicks, usando imágenes como fondos, agregando marcas de agua y mas.
Aquí hay buenas practicas de estas opciones:
Ocultar imagenes
Poner una Imagen Blanca sobre la Imagen Real
Este método puede hacer inalcanzable la imagen real a menos que verifiques el código fuente.
Puedes usar la imagen original como fondo y colocar una imagen transparente sobre ella que coincida con el tamaño de la imagen real.
Por ejemplo:
<div id="image1" style="background-image: url(originalImage.jpg);"> <img src="blank.gif" height="250px" width="300px"> </div>
Así, cuando se hace click derecho sobre la imagen, sera el archivo blank.gif el que sera examinado.
Existen 2 frameworks JavaScript con soluciones para esto:
Auto cortar las imagenes
Este es un método muy efectivo de protección de imágenes .
Una imagen es automáticamente cortada en piezas pero presentada como un todo. La imagen original tambien esta oculta como marca de agua.
Algunas desventajas serias de este método son:
- agrega relativa sobrecarga al servidor cuanto mas peticiones sean realizadas.
- tendras un monton de archivos de imagenes.
Usando Marcas de Agua (Pregeneradas)
Agregando una marca de agua a una imagen es una manera efectiva de proteger imagenes.
Ademas de ventajas como:
- la imagen no se presenta limpia (habrá una marca de agua sobre ella!)
- puede ser descargada y recortada
como el archivo original esta marcado, no hay forma de conseguir la imagen original.
Existen varias soluciones para agregar facilmente marcas de agua a imagenes. Desde modificarlas via Photoshop, GIMP, etc. a servicios web de marcado de agua como:
Un servicio gratis en línea para agregar marcas de agua a imágenes.
Múltiples imágenes pueden ser subidas a la vez o ellas pueden ser macadas automáticamente desde Flickr.
Es posible aplicar texto o una imagen como marca de agua.
Otro servicio web gratis para marcado de agua.
Puedes subir tus imagenes para ser marcadas con agua, personalizar el texto de la marca de agua a ser aplicado & descargar las imagenes actualizadas.
Usando marcas de agua (Generadas por el servidor)
Es posible automatizar el proceso de marcado de agua a nivel de servidor. Una vez aplicada, este es una método fácil de usar.
Para mencionar, implementar estos métodos requieren al menos un poco de conocimiento de scripting.
Aquí están varias librerías & ejemplos para esto:
Asido: Librería PHP para procesamiento de imagenes
Asido es una librería PHP para procesamiento de imagenes que puede trabajar con GD2, Magick Wand & Image Magick.
Aquí hay información detallada sobre las capacidades de marcado de agua de Asido.
Otras soluciones para PHP:
- Agrega marcas de agua a imágenes usando PHP
- Marcado de agua a tus imagenes con PHP 5 y GD
- Marcado de agua a imágenes al vuelo en PHP
Soluciones para ASP.NET:
- Miniaturas y marcado de agua de imágenes al vuelo con ASP.NET
- Marcado de agua a imágenes en ASP.NET con un HttpHandler
- CoolWatermark (pagado)
Soluciones para Ruby:
Usar Flash para mostrar las imágenes
swf image replacement muestra imágenes dentro de un archivo Flash el cual hace imposible el click con el boton derecho.
Y, las imágenes aun puedes ser decoradas con propiedades CSS.
Por otra parte la ruta de la imagen se muestra en el código fuente por lo que no provee protección total.
Protección de imágenes basada en el Navegador
Deshabilitando click con el botón derecho (anticlick)
Deshabilitando el anticlick via JavaScript es una manera de empezar a proteger imágenes . Pero es un simple paso que puede evitar usuarios novatos como desactivar o activar Javascript o conseguir la ruta de la imagen revisando el código fuente.
¿Es un buen metodo? Definitivamente no porque podrías deshabilitar todas las opciones del anticlick como imprimir, copiar el enlace, etc.
Puede ser una mejor solución deshabilitar solo funciones de grabado para lo cual este plugin de jQuery puede ayudar.
Deshabilitar la barra de herramientas de imágenes del IE6
Cuando el puntero del ratón pasa sobre la imagen, IE6 muestra automáticamente una barra de herramientas con la opción para grabar la imagen. Esto puede ser deshabilitado también.
Agrega el siguiente código entre las meta etiquetas de la cabecera de la pagina web.
<meta http-equiv="imagetoolbar" content="no">
Alguna otra solución de protección de imágenes que quieras compartir?
