A Simple Way to Protect Images from 'Casual Copying'

A
Published in: Images

If you don’t want other people to download images from your website, don’t put them online because – the way the web works - it is almost impossible to prevent someone from copying or saving your images.

However there’s one little trick that may discourage the less-technical people from casually copying, or even hot-linking, to your web images. To give you an example, try saving the following image to your computer using the standard “save as” option.

![](data:;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)

The “save picture” option under right-click is still available for the above image but instead of downloading the actual photograph, all it would save is a blank image. Also, the URL for the image (under Properties) would appear as some junk characters (it’s called a data URI) and thus would deter the non-techies from hotlinking to that image.

Here’s how you may implement something similar for your own images:

The standard embed code for an image looks something like this:

<img src="photograph.jpg" width="500" height="250">

What you need to do is change the value of the src attribute to point to a blank image and then add a new style attribute to render the actual image. Also make sure that the value of the height and the width parameters are exactly the same as the actual image.

<img style="background-image:url(photograph.jpg);"
     src="data:image/gif;base64,
     R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
     width="500" height="250">

This is like overlaying a completely transparent screen over your photograph and anyone trying to save the image will end up downloading that screen instead of the image.

Obviously, there are simple workarounds to get around the above method. For instance, a copy of the full image will still be available in your browser’s cache. You may look at the HTML source or may even save the image using screen capture but again, these techniques may not always be known to the non-technical users of your website.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Images

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube