How to protect images on website

By , last updated October 3, 2019

Today, people are generally aware that you need to check the license and permissions before using the image you found on the internet. Images are still being stolen from their original creators. If you are creating professional artwork or taking good photos – you still need to spend time securing your property online or it will be stolen.

In this article we will show the most popular image threats and how you can secure your intellectual property (IP) and prevent copying of your images. We will cover image access control, protecting images from hotlinking, watermarks and lawsuits.

Hotlinking protection

Hotlinking is a huge and a potentially very costly problem. The biggest offenders are actually search engines hotlinking images in their search results. This goes especially to Google, but others like Yandex do it too.

Hotlinking is a way to show an image on your website without hosting the image yourself. You just embed an image directly from the website where you found it:

<img src="http://anothersite.com/image.jpg" />

This way, when a user visits your website the image is downloaded from the original website.

Why is it bad?

  1. The other site gets all the cost for hosting and bandwidth for sending the image to your users. With the popularity of Amazon hosting services. a website that is hosting something pays per download and total bandwidth. Now, your users see that image on your website. You get ads revenue and visitors, but the website where you take the image from, gets nothing, but pays for hosting and bandwidth.
  2. Original artists don’t get any credits or visitors as you present their work on your website directly.
  3. Allowing hotlinking creates potentially more websites that are trying to scam artists by using their images, thus earning money from your work.

Unfortunately for all the artists, the biggest and most popular search engine – Google – is doing it today. SfTextures is a website where we sell professional high resolution textures. Almost all of our textures were available for free download in Google Image search. There were thousands of downloads of the images directly – but only a couple of clicks to the website.

What can you do?

Disallow hotlinking completely or, a better solution – partially.

If hotlinking is disallowed – the images on your website will be de-indexed in Google Image Search. They state in their guidelines that you should allow hotlinking if you’d like to rank on Google Images.

Our advice is to deny hotlinking for everybody except your own website and (if you don’t mind) search engines.

Open up your .htaccess file and write;

# Your website
SetEnvIfNoCase Referer "^(http|https)://(www.)?mywebsite.com(/|$)" whitelist

# Allow search engines to access images
SetEnvIfNoCase Referer "^(http|https)://.*google.*" whitelist
SetEnvIfNoCase Referer "^(http|https)://.*yahoo.*" whitelist
SetEnvIfNoCase Referer "^(http|https)://.*bing.*" whitelist
SetEnvIfNoCase Referer "^(http|https)://.*yandex.*" whitelist

# Specify image file types to protect from hotlinking
<FilesMatch ".(gif|jpg|jpeg|png|bmp)$">
Order Allow,Deny
Allow from env=whitelist
</FilesMatch>

Warning! If you are using Cloudflare or other caching service with a hotlinking protection – be advised that enabling that protection will remove your images from search engines.

Access control

All the resources on a website will be crawled by search engines and shown in their search results. All serious search engines respect the robots.txt that tells them what is allowed to crawl and what is not. If a search engine does not respect robots.txt, it’s not a serious search engine. We can use this file to restrict access to some of our most valuable content like huge images of the highest quality.

This method works best in addition to the partial hotlinking restriction.

Move your quality images to a special folder. If you are using WordPress then all your images are automatically multiplicated (resized to different sizes) during upload process. More images of lesser sizes are created and stored in the uploads folder. Find a way to move your best images to a special folder so that the result will be something like this:

Images allowed to crawl and hotlink:

http://mysite.com/my-image-200×200.jpg
http://mysite.com/2015/11/01/my-other-image-180×180.jpg

My artwork of the highest quality:

http://mysite.com/myart/my-image-5000×5000.jpg
http://mysite.com/myart/my-other-image.jpg

Now we restrict crawl access to the folder containing our high resolution images by modifying the robots.txt file.

User-agent: *
Disallow: /myart/

This method will give everybody access to your small size art, but your most precious images will not be available directly from search engines for download. Instead, if people like your art they will often visit your website and look for better quality images.

Watermarks

Watermarks is a popular method to use on images. It can be done in different ways:

  1. Watermark image before uploading. This method is preferred as the resulting image contains the watermark inside it, thus images that people see on your website don’t differ from the ones being seen by search engines. Use any software or an online solution for this purpose.
  2. Watermark with CSS. This is easy – just position any text or image in front of the original image:
    img {
    	position: absolute;
    	top: 0; /* or whatever */
    	left: 0; /* or whatever, position according to taste */
    	opacity: 0.5; 
    	filter:alpha(opacity=50);
    }
    

    This method won’t actually secure your image from downloading, this is just a visual reminder for users.

  3. Redirect watermarking. This approach is a type of protecting images by referring some visitors to the watermarked images and other to the original ones. The code behind this protection type looks at who is asking for the image and delivers different urls. This is the most dangerous way of protecting your property and will result in your website ban.Warning: Google penalizes websites that are using this type of watermark protection due to image mismatch.
  4. Image swap. This is a type of dynamic watermarking when images get swapped with a watermarked PNG overlay. Here is a guy who implemented it on his website and described in details the process.

Generally, watermarking is not a good solution if you are relying on organic traffic. People are less inclined to click your images if there is a watermark on them, thus making Google think that your images are not what people are looking for. This makes your website less and less important and you loose your traffic in the long run. Here is a detailed analysis article from people who had watermarks on their images.

Image use has increased in recent years. Many people take pictures and post them on the internet. You can’t run a successful business or a blog without using beautiful images. Without images, people won’t take you seriously.

Many artists sell their work primarily online. This resulted in excessive amount of images on the internet. In the beginning people just used all the images they could find without thinking that the artist who made it needs to eat something too. Many lawsuits began to pop up as a result of excessive image theft.

Conclusion

We under no circumstance advise to tweak with images and Search engines. Many people tried to reroute links, insert text, watermark images and so on and got their whole websites banned. Protect your property wisely!