Menu
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?
377
Click on the image that you want to save. Right-click and select “Open link in new tab.” Once the image opens on a new tab, right-click and select “Save image as…” Hit Save.
on("contextmenu", "img", function(e) { return false; });
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:
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
