Protect Images from Saving Using jQuery

Here is a short jQuery snippet to prevent people from saving your images by using the right-click context menu. Of course any image on the web can be screen-capped or gotten in other ways by anyone who is determined; this is to prevent the average person from saving your images. I have never wanted this myself, I wrote it for a client who wanted to “protect” their photos.

How it Works

This snippet scans your page for images, gets the src attribute, replaces the source with a blank gif(which isn’t included here), and uses CSS to make the image’s background the original source image. It’s basically like laying a blank gif over your images.

Line 1: The main selector and loop beginning. You can change the jQuery selector to only protect certain images.

Lines 2-4: Get the original image’s height, width and src attributes.

Line 6: Target the current image in the loop iteration that matches the main selector for altering.

Lines 7-12: Alter the current image’s CSS properties. (This is very important)

Line 15: Swap the original src attrtibute with the blank gif.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$('img').each(function(){
    var src = $(this).attr('src');
    var width = $(this).attr('width');
    var height = $(this).attr('height');
 
    $(this).css({
        'width':width+'px',
        'height':height+'px',
        'background-image':'url('+src+')',
        'background-repeat':'no-repeat',
        'background-position':'center center',
        'padding':'0'
    });
    $(this).attr({
        'src':'img/blank.gif'
    });
});

Very Important

In order for this to work properly, the images you use this on need to have their height and width attributes set in your HTML and not just CSS.