Splitting images to prevent image copying from web sites

Image plagiarism is one of the common issues faced by websites, specially by designers and photographers. Besides the technique of attaching a copyright text or a hidden watermark, the other most common method of preventing casual copying of images from websites is by disabling right-click using JavaScript. Another scheme I recently found uses a method wherein the image is split into three parts and then displayed on the page. So whenever the user tries to save the image he gets three different parts of the image rather than a single image. This prevents casual copying of images from web pages. Of course, this is not a fool-proof method, and with some workaround one is able to create the original image but with some extra effort. This method can also be useful to prevent automated bots from easily downloading your images.

I’ve attached a small code that will split an image into 3 equal parts which can then be added to the webpage. The following is an example code that relies on the ‘class.imagesplitter.php’ class to accomplish the task. Split images will be appended with the part number at the end.

sample-image-0.jpg
sample-image-1.jpg
sample-image-2.jpg
<?php
 
require_once('./class.imagesplitter.php');
 
$splitter = new ImageSplitter;
/* IMAGETYPE_GIF for gif images
   IMAGETYPE_JPEG for jpg images
 */
$splitter->outputType = IMAGETYPE_JPEG;
$splitter->Load('sample-image.jpg');
$splitter->Split();
 
?>

image-splitter

The code supports 3 image types – gif, jpg and png. Use IMAGETYPE_JPEG for jpg images, IMAGETYPE_GIF for gif images. The default format is png when no ‘outputType’ is set. To combine the images to display as a single image on a page you will need something like the following.

<div class="iparts">
  <img src="sample-image-0.jpg" />
  <img src="sample-image-1.jpg" />
  <img src="sample-image-2.jpg" />
</div>

The CSS for the above is given below. This is to ensure that no visible gap is displayed between the different image parts and is shown as a single whole.

.iparts img { 
    display: block; 
    font-size: 0; 
}

Cons of the above method

The obvious drawback is that it takes some extra effort. The other is that for each image split there are two additional resource requests by the browser. So if you have 3 images on your webpage using this method, the browser will have to make a total of 9 requests to the server instead of the original 3. In view of the above points, the method should only be considered if you are seriously interested in protecting your image assets. You could for example only use it while displaying larger versions of your images and not for smaller previews.

Download Code files
Downloads : 938 / File size : 32.2 kB


6 thoughts on “Splitting images to prevent image copying from web sites

  1. For the record, I can still take a screenshot and steal your images.

    I can also run a headless browser kit and steal all your images in a batch, if I’d like.

    So while this works as a basic protection against casual users, it provides no real protection against scraping your site.

    If you’re trying to protect against right-click and save, you can do that much more simply by placing a transparent div over the image – without any server-side complications.

    Also be sure to factor in the page load-time overhead for the extra requests.

  2. It is a nice idea, but it seems to me that it is a lot more work for a content producer when it doesn’t really add to the protection of the image. It is trivial to simply take a screen shot of the image and there are many browser plugins that support taking a cropped selection, which would make it even easier.

  3. there is another way that can be used by 1 request!
    you can splite the picture horizontally to 3 part (as you show in the example) and then join the 3 parts of picture vertically!
    then you must use 3 floated div to and CSS-Sprite easily to get original image :)

  4. I see doing this will also increase the load on server as we send 3 request now to load one image. So anyone following this and has large number of images then it will be x3 request. Correct me if i am wrong.

  5. You will have to make change to the Split() function in the class.imagesplitter.php class. Currently it is split in three parts.
    example:

    $im = imagecreatetruecolor($this->srcWidth, $this->srcHeight / 3);

    You will have to make it split for 2 parts like

    $im = imagecreatetruecolor($this->srcWidth, $this->srcHeight / 2);

    and change the other code in the function the same way.

Comments are closed.