Is it possible to create an image on a webpage that cannot be copied or saved by the end-user [closed] Is it possible to create an image on a webpage that cannot be copied or saved by the end-user [closed] javascript javascript

Is it possible to create an image on a webpage that cannot be copied or saved by the end-user [closed]


The header image in the link is generated from a BASE64 Encoded image string in its CSS. Any modern browser can understand this type of image and parse it. In this case the image is an encoded SVG (Scalable Vector Graphics) image, but it could also be a JPEG, PNG, GIF or BMP image.

In the source you will see a div with a background image that looks like a very long garbled string:

<div style="background-image: url(data:image/svg+xml;base64, BASE64-ENCODED-IMAGE-STRING">

(replace BASE64-ENCODED-IMAGE-STRING with the original one from the page source)

On this website for example, you can generate a BASE64 encoded image string.

However, this does NOT mean that the image cannot be saved or copied by a user!

Using this website, for example, you can decode the image in a form that an end user can save/copy: http://freeonlinetools24.com/base64-image.

as @aavrug pointed out below, this can also be done using the developer's tools in any browser.

as other users pointed out, some browser do give the option to save the background image when using right mouse click

As @Viktor Mellgren points out: Also, there is always screenshot

Conclusion

Once an image is in the browser, it can be saved by an end user. To better protect your images, look at Watermarking them using specialized tools or scripts:


All images can be saved:

enter image description here

You can convert image to base64 string as another answers says, but is still can be saved and copied.

And how?

Just copy image string here http://codebeautify.org/base64-to-image-converter and you will get downloadable image.


Knowledge is power:

  1. Open Chrome and go to https://guides.github.com/activities/hello-world/
  2. Right-click on the desired "image"
  3. Click "Inspect"
  4. Look in the Styles tab
  5. Right-click on element.style -> background-image -> url -> blue hyperlink containing data:image
  6. Click "Open link in new tab"
  7. Ctrl+s

Basically, if your web browser renders something then it is save-able/download-able, period.