How to protect your web site pictures from being saved

A customer emailed me:


As you are an expert I have the following question that maybe you know to answer.


My wife is an artist making cards for every occasion.

We have now the idea of selling these cards through internet.

Showing these cards on a gallery page is one thing.

This brings the risk that people will save the page and use the images while not paying for them.

Do you know of any way how to prevent this saving with all the images?




I’m no expert on digital rights management, but one way to make it more difficult for images to be saved is to make them into multiple fragments. Users will have a harder time saving the image locally, although they can just piece together the image using the inverse of the sample code below or just hit alt-prtscrn to capture the screen contents to the clipboard.


Another solution is to show a low resolution sample of the original (the source code allows you to save as JPG, specifying the quality of the sampling).


(The Internet Explorer Image Toolbar appears when the user hovers the mouse over a picture. This can be disabled by the content author using an HTML tag. Images of less than 200 x 200 pixels will not show the IE toolbar. However, in both cases,  the user can still right-click on the picture and choose “Save Picture As”.)


This is a sample generated HTML from the code below.



    <title>Show fragmented picture</title>



<table id=”Pic” cellspacing=”0″ cellpadding=”0″ border=0 >


<td><img src=Pic0000.jpg border=0 /></td>

<td><img src=Pic0100.jpg border=0 /></td>

<td><img src=Pic0200.jpg border=0 /></td>

<td><img src=Pic0300.jpg border=0 /></td>



<td><img src=Pic0001.jpg border=0 /></td>

<td><img src=Pic0101.jpg border=0 /></td>

<td><img src=Pic0201.jpg border=0 /></td>

<td><img src=Pic0301.jpg border=0 /></td>



<td><img src=Pic0002.jpg border=0 /></td>

<td><img src=Pic0102.jpg border=0 /></td>

<td><img src=Pic0202.jpg border=0 /></td>

<td><img src=Pic0302.jpg border=0 /></td>



<td><img src=Pic0003.jpg border=0 /></td>

<td><img src=Pic0103.jpg border=0 /></td>

<td><img src=Pic0203.jpg border=0 /></td>

<td><img src=Pic0303.jpg border=0 /></td>






Full source code (about 200 lines) available here


This is the FragmentPic method of the class that takes the loaded image and fragments it into a grid of x, y segments, generating small JPGs and the HTML to display them. The code uses the GDI+ Flat API to draw the image, then screen scrape the image in grid  cell fragments and saves them to JPGs.


      PROCEDURE PicFragment(nXSegs as Integer, nYSegs as Integer, cPicFragName as String, cOutputHTM as String)

            LOCAL nHeightOrig, nWidthOrig, nHeight, nWidth,oy,iy,ix,nRatio,nSize






            nSize=400   && change this to vary resolution

            nWidth=nSize *nRatio


            ox.DrawScale(_screen.HWnd,0,0,nWidth,nHeight,0,0,nWidthOrig, nHeightOrig)

            FOR iy = 0 TO nYSegs-1

                  FOR ix = 0 TO nXSegs-1


                        oy.GetRegion(_screen.HWnd,ix*nWidth/nXSegs, iy*nHeight/nYSegs, nWidth/nXSegs, nHeight /nYSegs)

              ,2,”0″)+PADL(iy,2,”0″)+”.jpg”,95)     && change last parm for jpg quality



            * Now generate the HTML to show the multiple JPG fragments

            SET TEXTMERGE ON TO (cOutputHTM) noshow


            \    <title>Show fragmented picture</title>



            \<table id=”Pic” cellspacing=”0″ cellpadding=”0″ border=0 >

            FOR iy = 0 TO nYSegs-1


                  FOR ix = 0 TO nXSegs-1

                        * optionally add galleryimg=”no” to the img tag

                        \<td><img src=<<cPicFragName+PADL(ix,2,”0″)+PADL(iy,2,”0″)>>.jpg border=0 /></td>





            SET TEXTMERGE to






Comments (9)

  1. David Cumps says:

    Print Screen on 1920×1200 and your fragmented files are one again in my photoshop 😉

    I always tell people it can’t be done, unless you take a watermark or don’t put them online, because as with HTML source, everything you can see, you can save

  2. foobar says:

    Do people not know what that key labeled "Print Screen" does? Especially programmers?

  3. Tonetheman says:

    The better answer to your client would be you cannot. Just watermark or put low res versions of the pictures up on the web. What you did was cool but to me the answer is a watermark or just some annoying banner thing across the photo. Doing anything with the browser will just guarantee that it will only work with IE, which means I could use another browser and still get the picture.

  4. Chad Grant says:

    an easier way to stop right clicking is ( to stop the stupid users)

    <table background="yourprotectedfile.jpg">


    <td><img src="blank_transparent.gif" height=(height of your image) width=(width of your image)></td>



    when they right click and save, they get a blank gif

    with javascript you can disable the right clicking AND the print screen key.

    Print screen is your worst enemy. or printing to PDF(that can easily be opened in photoshop)

  5. William Luu says:

    Someone asked the same question yesterday on a local Aussie mailing list.

    Same issues were discussed…

    I found that you can programmatically create image watermarks. There is a sample on MSDN…

    You can skip to the "Protecting Your

    Images" section if you don’t want to read it all.

  6. Stephen Edgar says:

    Jeremy Rule’s Blog post on Dynamic Image Generation I think would work very we’ll in this scenario. Use your original file on the page but overlay/embed the extra text eg" Sample Picture" over the top of your image as explained here.



  7. Old Guy says:

    You use a lot of GDI+ stuff in your sample.

    The new ReportListener class in VFP 9 also has the ability to use GDI+ in Reports. Is there a simple way in VFP 8 or VFP 9 to draw a >gradient< filled shape/rectangle or other object ? By now i only can fill shapes with just one color. Wouldn’t it be nice to expand the RGB() function in VFP with e.g. a 4th parameter in order to achive that goal?

  8. It takes a lot of work to create the blog posts and code samples that I put in my blog, and I was curious…