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

Question

On some web-pages, background images cannot be copied or saved. The browser I use does not recognize it as an image.

The question I have is: I want to know how it is possible to create an image on a webpage that cannot be copied by the user.

For example: On this github help page, the background image on which the title is written cannot be copied and saved in the browser I currrently use.

Could it be that the image is a graphic created by javascript code or some other language?

Answer 1

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:

• Photoshop example
• PHP example script to add watermarks