How to protect your web site pictures from being saved

Article
09/01/2004

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.

<head>

<title>Show fragmented picture</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</body>

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

nHeightOrig=0

nWidthOrig=0

GdipGetImageWidth(ox.nImage,@nWidthOrig)

GdipGetImageHeight(ox.nImage,@nHeightOrig)

nRatio=nWidthOrig/nHeightOrig

nSize=400 && change this to vary resolution

nWidth=nSize *nRatio

nHeight=nSize

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=NEWOBJECT("gdplusEx")

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

oy.save(cPicFragName+PADL(ix,2,"0")+PADL(iy,2,"0")+".jpg",95) && change last parm for jpg quality

ENDFOR

* Now generate the HTML to show the multiple JPG fragments

SET TEXTMERGE ON TO (cOutputHTM) noshow

\<head>

\ <title>Show fragmented picture</title>

\</head>

\<body>

\<table id="Pic" cellspacing="0" cellpadding="0" border=0 >

FOR iy = 0 TO nYSegs-1

\<tr>

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>

ENDFOR

\</tr>

ENDFOR

\</body>

SET TEXTMERGE to

32438

How to protect your web site pictures from being saved

Additional resources