¿Es posible evitar la descarga de imágenes al diseñar un sitio web?

Digamos que desea proporcionar imágenes de muestra de alta calidad en su sitio web, pero también desea protegerlas para que no se descarguen, ya que puede verlas en la pantalla pero no puede guardarlas desde el sitio web.

¿Hay alguna forma de hacer esto?

Editar: esto no es algo que deba hacer, pero según un método en las respuestas, había visto el clic derecho deshabilitado en un sitio web y estaba interesado.

Hay una publicación en stackoverflow al respecto. Señala otro artículo sobre algunas formas de evitar el robo de imágenes de su sitio web, incluido el JSmétodo de desactivación del clic derecho.
Podrías ponerles una marca de agua...
La marca de agua es la forma más fácil y extremadamente efectiva de proteger sus imágenes. De lo contrario, puede usar PHP para hacer un lienzo de las imágenes, esto elimina todas las formas de descargar la imagen, pero aún necesita la marca de agua para protegerla de la captura de pantalla.

Respuestas (7)

Para todos los efectos, esto es absolutamente imposible .

  • Puede deshabilitar el clic derecho, pero las personas aún pueden ver el código fuente de su página (agregándolo view-source:a la URL en Chrome, o simplemente usando un menú del navegador) y encontrar la URL.

  • Puede usar un CSS background-imageen lugar de HTML <img>, pero las personas aún pueden usar el inspector de su navegador (F12 para la mayoría de los navegadores) y encontrar las propiedades CSS de ese elemento.

  • Puedes diseñar alguna locura que creas que funcionará, pero al final del día, el usuario tiene que descargar la imagen de alguna manera para verla. Si el usuario es completamente incapaz de descargar la imagen, ¡ni siquiera podrá verla en primer lugar! No importa lo que haga, nada impedirá que un simple vistazo a un monitor de tráfico de red oa la pestaña "Red" de las herramientas de desarrollo de su navegador favorito.

Además de esto, los usuarios siempre podrán tomar una captura de pantalla sin importar lo que hagas.

El pomo de la puerta está bien; es imposible evitar que los usuarios descarguen la imagen. Cualquier salvaguarda que establezca puede ser eludida. El bloqueo Right Clickse frustra fácilmente desactivando JavaScript (o modificando el script si es necesario).

Sin embargo, puede emplear otros métodos para proteger sus activos. La marca de agua es una forma de proteger sus imágenes con derechos de autor. Eche un vistazo a cualquier sitio web de fotos de archivo para ver cómo lo hacen:

Página de ejemplo de iStockPhoto

iStockPhoto (arriba), por ejemplo, ofrece a los usuarios la posibilidad de ampliar y ver los detalles de una imagen. Su marca de agua escala con el zoom. Es lo suficientemente discreto como para permitir que las personas analicen la imagen, pero lo suficientemente prominente como para mitigar el robo.

Como otros han señalado, es imposible. Los métodos comunes como deshabilitar el clic derecho, usar el fondo CSS y otras secuencias de comandos son bastante fáciles de evitar. El usuario puede simplemente tomar una captura de pantalla de su sitio web y luego recortar la imagen.

Creo que poner una marca de agua en la imagen es una forma mucho más efectiva. Esto se puede hacer manualmente (usando Photoshop, Gimp u otras herramientas) o automáticamente usando un script. Al final, depende de cuántas imágenes quieras proteger y de cómo esté construido tu sitio web.

PHP
Aquí hay un pequeño y agradable script PHP que puede marcar cualquier imagen antes de que el usuario la descargue: http://andrecatita.com/code-projects/php-automatic-image-watermark/

Joomla
NiceWatermark es un complemento altamente configurable que agrega una marca de agua a sus imágenes automáticamente.

WordPress
Image-Watermark le permitirá agregar marcas de agua a las imágenes durante la carga o agregar marcas de agua a las imágenes existentes.

Sin embargo, podría dificultar que un usuario use las imágenes que muestra si las divide en secciones o porciones más pequeñas de imágenes.

En la página se vería como una imagen, pero puede dividirse en seis partes. Si alguien estaba decidido a tener una copia, no les impediría volver a combinar las imágenes una vez descargadas. Además, no se vería tan bien en una conexión más lenta, ya que la carga de la imagen puede estar fragmentada o, peor aún, podrían faltar una o más de las secciones.

Como otros ya han respondido, es imposible evitar que un desarrollador copie la imagen, pero puede hacerlo mucho más difícil para los usuarios normales.

Aquí he resumido otras respuestas y agregado otras opciones que conozco.

  1. Bloquear clic derecho -> guardar imagen.

    • Bloquear clic derecho con javascript
    • En lugar de la etiqueta img, use la propiedad de fondo CSS.
    • Coloque una imagen transparente de 1x1 sobre la imagen real, de modo que cuando el usuario haga clic con el botón derecho en Guardar, obtenga la imagen transparente.
  2. Evite que las herramientas de desarrollo obtengan la imagen dividiendo la imagen en varias imágenes (de la respuesta de Nick J Adams). Esto puede ser muy tedioso de hacer manualmente. Nick también ha mencionado los inconvenientes como descargas más lentas e imágenes rotas si una parte no se descarga.

  3. Evite las capturas de pantalla utilizando Flash para presentaciones de diapositivas de imágenes. Algunos sitios web de fotografía que conozco usan Flash para presentar fotografías. Pero tenga en cuenta que flash no funciona en dispositivos móviles.

  4. También puede evitar las capturas de pantalla mediante el uso de una marca de agua. Aquí no bloqueamos el acceso a la imagen en absoluto. Verifique la respuesta de Johanpw para algunas bibliotecas.

Doorknob, JohnB y johanpw tienen buenas respuestas, quería agregar algo que he visto en html y php de las personas: convolución de enlaces.

Básicamente, lo que hacen es romper el enlace a la imagen o al video para que sea difícil reconstruirlo a partir del código (aún puedes hacerlo, pero disuade a todos menos a los más motivados) o simplemente complican el enlace único en la fuente. (Honestamente, acabo de notar esto en las últimas semanas y no sé mucho al respecto, solo que me dificultaba obtener imágenes del sitio de alguien; P, pero espero que alguien con experiencia intervenga)

Si alguien sabe más y puede dar una mejor explicación, ¡también me interesaría saber más sobre la convolución de enlaces!

No veo cómo esto responde a la pregunta y esto parece ser más un comentario que una respuesta.
Desafortunadamente, todavía no tengo suficiente reputación para comentar las respuestas de otras personas. Dado que cualquier pregunta que tengo ya está resuelta o es del tipo que podría investigar y resolver por mi cuenta, parece que no puedo construir esos puntos de reputación tan preciados... lo que me impide contribuir de manera ideal. : \

No cargue imágenes de alta resolución en ningún sitio web que no las mantenga ocultas y seguras. Como un sitio de impresión bajo demanda profesional y creíble.

Como se dijo anteriormente, es imposible evitar que los espectadores obtengan imágenes en línea. Mi propio método es ponerles mi nombre legible y enviarlos al mundo para que me anuncien.

Luego, si alguien quiere usarlos, puede contactarme para pedirme permiso.