I am working on a website that showcases other artist's work. How does one program the images to display beautifully without allowing

the end-user to steel the image?

In the past, I've used a script that just disables the right click function. I'd like something a bit more sofisticated where it is an

ecommerce site. Remember, I am not a sofisticated programmer...so be specific as to what to do with script if you send any.

Thanks!

____________________
<URL snipped>

Dani AI

Generated

Short answer: there is no foolproof technical way to stop someone determined to copy an image they can see in their browser. The thread already shows the two common approaches — disabling right‑click (see ) and visible watermarks (recommended by , and others). Both are useful only as deterrents. What’s missing from the replies is a practical, layered workflow that works for an e‑commerce site: make casual copying inconvenient, preserve user experience, and protect high‑value originals with server controls.

Practical workflow (implement server‑side; no client JavaScript tricks as the main defence)

  1. Show very small thumbnails for browsing (low resolution, < 400px) so proofs are usable for browsing but worthless for reuse.
  2. Use visually strong watermarks for preview/medium images (diagonal or tiled, semi‑transparent over the central area) so removing them is time‑consuming and degrades the artwork.
  3. Keep originals outside the web root and serve full‑resolution files only after purchase through authenticated routes or short‑lived signed URLs (session checks and token expiry).
  4. For higher deterrence, generate dynamic, per‑order watermarks that stamp buyer info (email/order ID/timestamp) onto the delivered file — this makes redistribution traceable. Server image tools (ImageMagick/GraphicsMagick/Sharp/Pillow) can do this on demand.

Quick tips and cautions

  • Don’t rely on right‑click blocking; it annoys legitimate visitors and is trivial to bypass (points also made by and ).
  • Make watermarks part of the product UX: tasteful, readable, and tested so they do not drive sales away.
  • Add clear license/terms and a visible purchase path for users who need high‑res files. Legal notices and takedown procedures complement technical measures.

Bottom line: combine small thumbnails + visible watermarks + authenticated delivery of originals (optionally with dynamic buyer watermarks). That combination deters casual theft, preserves user experience, and gives you practical control for an e‑commerce workflow — addressing the gaps raised by , , and the others.

Recommended Answers

All 12 Replies

Member Avatar for Member #334542

Hi,

You can make watermarks on images, most of the sites using that format only. Because there are so many ways to get the image from the net. If you disabled right click, they will try to the use PrintScreen option to get your image.

what is watermark?? and how to use it??:?:

Disabling right click doesn't work anyway because someone can view the source to see the url of the picture with the file name, type that into a browser window and you have the picture in a window all by itself with no disbaled right click.

Member Avatar for Member #334542

WaterMark is nothing but Print your name or brand name in center of the image by reducing the opacity to low level.

Often it works to press space bar while right clicking and there you go-save image...

If they REALLY want that image there is always a way to get it? It is also quite irritating to have right click disabled cos im used to browsing by right-clicking and opening links in new tabs...

I suppose even watermark can be even painted over in Photoshop...LOL(One hell of a job though)

I was contemplating a site with artwork myself... thought to put a copyright notice in a bottom corner of the image... cos watermark looks scary....

I suppose the only way to avoid prints is not to put high resolution image? I dunno....

commented: You quete right on this +8

If they can see the image, the file is already on their computer. All they have to do is retrieve it.

And there are always screen capture programs.... So all is left is ugly watermarks and low resolution?

watermarks is great!

<SCRIPT LANGUAGE="JavaScript">
function right(e) {
var msg = "right-clicking on images is not permitted.";
if (navigator.appName == 'Netscape' && e.which == 3) {
alert(msg);
return false;
}
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(msg);
return false;
}
else return true;
}

function trapclick() 
{
if(document.images)
{
for(i=0;i<document.images.length;i++)
{
document.images[i].onmousedown = right;
document.images[i].onmouseup = right;
}
}
}
</SCRIPT>

Place this code in the body tag:

<BODY onLoad="trapclick()">

if you any doubts search this page
http://www.mediacollege.com/internet/security/protect-images/javascript.html

You should also put this bit of text from the same site in there because I feel this is more important than disabling right click on images

It is not very secure. Anyone who understand how web pages work can easily circumvent it.
Results in different browsers can be unpredictable.
It can be annoying for visitors.

Unfortunately, watermarks are your best bet -- all other solutions can be worked around fairly easily.

I think iStockphoto handles it well -- the super-small thumbnails are too small for people to be able to rip off and use. One you go to a larger image, they add the watermark.

That just traps a right click. And I believe that web pages have no right to do this, because the mouse and browser are the property of the user, not the web designer.

If you don't want people copying your images, don't publish them on the web.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.