Mobile app version of vmapp.org
Login or Join
Bethany197

: Protecting the original artwork used on a website We are spending a considerable amount of money on creating fantastic illustrations that will accompany a learning guide. These illustrations are

@Bethany197

Posted in: #Images #Protection #WebDevelopment

We are spending a considerable amount of money on creating fantastic illustrations that will accompany a learning guide. These illustrations are very unique and take 20-40 each to complete.

Once we go live with the site I know that a lot of people will be doing "Save Image As" and pass all of our hard work and money spent as their own. Are there any technical ways to protect these illustrations?

Any JS solutions can by bypassed by disabling it in the browser settings. People can also take screenshots. Adding credit lines at the bottom of each images can be cropped out plus it will ruin the look and feel.

Are there any other things out there? or Is there a way to leverage the copied materials?

If the answer to those is no then is there a way to make it more difficult?

We want to use legal options only as last resort.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Bethany197

2 Comments

Sorted by latest first Latest Oldest Best

 

@Ann8826881

There are quite a few things you can do to protect images. However, if someone is determined you may not completely block image access.

1] You can add a watermark to your images. I use Thumbnailer from SmallerAnimals to do this. You can use it in trial mode of course, but the cost is only and it is far beyond any other product I have ever used. These guys are real experts and their entire business is based upon image manipulation. I have been using this product for well over a decade.

2] You can degrade the image quality so that it will still look good on a website and be relatively useless otherwise. Again, Thumbnailer can do this for you.

3] You can digitally mark your images with a copyright notice. This is encoded within the image and cannot be seen. Again, you can use Thumbnailer.

4] Encoding the link. You can encode the URL making it more difficult to recognize. However, any clever user may be able to find this and still access your image. It just makes is a bit more difficult.

5] You can do something like what I do with my e-mail munges where I use random numbers and use JavaScript to create a seriously confusing but functional reference. You can break the code into elements based upon the random numbers so that no single part is ever the same and all parts are required to work. I do not have sample code for you. You would have to ask someone or code it your self, however, this is not a difficult task. You can go to my site (please forgive that it is seriously ugly) and use mungeMaster to create a sample of what I am talking about. It is an e-mail munge, but you should be able to code something similar for images.

6] You can use a PHP image proxy (lack of a better term) script. These exist. I rolled my own and it works a treat, however, I suggest doing a search on the net anyway since my code is seriously out of date. There are some rather clever ones out there, but I do not know enough between them to make a recommendation. You can use php script to protect images in your favorite search engine to research this.

7] You can can use color management within the image to limit the usability and still have the image look good on the web. I am not an expert on this so you will want to research this more. Again, I am pretty sure Thumbnailer can handle this for you.

8] You can use a table and set your image as the table data background image and then within the cell data you can use the image tag to place a 1 pixel transparent image over your original and size it how you need to with width and height values.

9] You can use JavaScript to disable right clicks. Here is a link to another question on just that: stackoverflow.com/questions/737022/how-do-i-disable-right-click-on-my-web-page
10] You can disable right clicks using the following in your body tag.

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">


11] You can use .htaccess and check the referrer. Here is an example code you should confirm does what you want. You may need to customize the image list. Obviously change example.com to your domain name. Test this.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?example.com [NC]
RewriteRule .(jpe?g|gif|bmp|png)$ - [F]


12] Prevent search engines from indexing your images. This can be done using various methods. You may want to use more than one or all of them.

In robots.txt, you can:

User-agent: *
Disallow: /images/


--or-- by image:

User-agent: *
Disallow: /image/my-wife-looks-like-a-naked-mole-rat.jpg


You can also place this in your HTML:

<meta name="robots" content="noimageindex"></meta>


13] Honest to God copyrighting. This may not stop someone from stealing your image, however, you can seek a copyright for your images and then put a copyright notice under the image. It does make people thing twice. Sometimes more than twice!

I am sure there are other things you can do. But this is a fairly decent list to get you started.

10% popularity Vote Up Vote Down


 

@Welton855

No, if someone can see your images they can copy them. You can't stop them from taking a screenshot, and you certainly can't stop them from photographing their screen. I recommend a two-pronged approach. 1) Try to stop your users from wanting to copy the images and 2) Don't worry about it.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme