Evitar que copien fotos o imagenes

Acá veremos otra manera de intentar proteger imágenes, fotos, diseños, etc. Generalmente lo que buscamos hacer es deshabilitar el mouse para evitar que guarden nuestros archivos, pero eso causa molestias y lo que no debemos hacer es incomodar a los visitantes. ¡Ojo!... el que quiera copiar la imagen pues lo hará, buscando en el código fuente, vía una captura de pantalla, la memoria cache del ordenador, programas tipo ripper (extractor), etc. Pero si aún con todo eso, queremos "proteger nuestras imágenes" sigamos con el tema :D

Veremos una manera al estilo Flickr, muchos conocerán este sitio para compartir fotos, entonces hagamos lo mismo en nuestro blog con la siguiente imagen (para este efecto haremos que copien otra imagen y no la que están viendo).

(Guarde y vea la imagen en su computador)

¿Qué sucede con esta imagen?... he puesto un pequeño archivo gif transparente delante de la foto, que lo he llamado image.gif (que se usará para todas las imágenes).

Paso a paso:

• Primero debemos tener claro que toda imagen tiene un ancho (width) y alto (height), y son los valores numéricos que debemos modificar, para poder montar la imagen transparente sobre la principal.


• Pondré como ejemplo el Código que use para poner la imagen de arriba, lo que esta en color rojo es lo que modificaremos según las dimensiones de la imagen, lo de azul es el URL de la imagen principal y lo de amarillo es el URL de la imagen transparente image.gif (esa usaremos para poner adelante de cualquier imagen principal)

Código

<div align="center">
<div style="width:306px;">
<img src="http://lh4.ggpht.com/_wr7Go91pCz4/SZ2ZnGk-XCI/AAAAAAAACQg/RdGgfIlHi9k/s512/image.jpg" width="306" height="409"/>
<img src="http://lh3.ggpht.com/_wr7Go91pCz4/SZ2TanDvxNI/AAAAAAAACQY/WEhBJIWx420/s144/image.gif" style="position:relative; top:-409px; margin-bottom:-409px; display:block;" title=""  border="0" width="306" height="409"/>
</div>
</div>

Como siempre es recomendable poner todo el código en una sola linea (cosas de Blogger que no entiendo), de esa forma evitaremos espacios vacíos al escribir, pero para efectos de ejemplo lo he puesto linea por linea.

Notemos también que es importante poner en position:relative; top: y en margin-bottom: el mismo valor de la altura con un signo negativo (-) y sin espacios, para que la imagen transparente se ajuste a las dimensiones de la principal.

Esta solo es una forma más de intentar proteger que copien una imagen, la mejor de todas es: ¡No publicarlas!