Ok so as the title says, we all know that 'protecting' an image on the internet is basically impossible unless you watermark it, if a user can see the picture on their screen they can get a copy of it somehow. However I've got a client who wants to see some sort of protection on images across their whole site. I've told them any method is pointless and they realise that, but they would still like something to protect against 'divvy' web users at least (his words).

 

So, what is the current 'best' method out there for this? Something as light as possible preferably, since it's basically a waste of code and bandwidth.

 

Cheers.

Edited March 6, 201214 yr by Killer

Cover it with a transparent div.

I probably should have mentioned the site is basically already done before he had this wisdom, so it needs to ideally be something easy to add to all images across the site in one go.

Use the "after" psuedo element on the img selector.

 

:after {
content:'';
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:9999;
}

 

 

Should work.

Edited March 6, 201214 yr by brightonmike

Use Javascript to insert a transparent div over every image.

 

Mike's solution works better.

 

Also, shouldn't matter that it's nearly complete - if the client's only just thought of it, it's a billable change.

Edited March 6, 201214 yr by Renaissance-Design

The :before and :after pseudo elements don't work with img as far as I can see.

Then wrap them in a list or whatever. You're going to have to edit the HTML.

Tell your client to read this thread.

There is little point in trying to protect images, even the divvy'est of users knows there's a print screen button.

 

I'd go with Mike soloution above if you really absolutely have to, however make sure the client pays for the extra work. Then they may not be so keen when they realise they'll be paying for nothing in the long run.

Java script to eject the printscreen button from a users keyboard?

Why not just put the images that are to be protected into a folder along with a PNG image and a bit of PHP and a .htaccess file?

 

This will automatically create an image with the watermark embedded into it. Even if they try to access the folder images directly the .htaccess file will embed the image.

 

The PHP

 

<?php

   /*
    * This script places a watermark on a given jpeg, png or gif image.
    */

     // loads a png, jpeg or gif image from the given file name
     function imagecreatefromfile($image_path) {
       // retrieve the type of the provided image file
       list($width, $height, $image_type) = getimagesize($image_path);

       // select the appropriate imagecreatefrom* function based on the determined
       // image type
       switch ($image_type)
       {
         case IMAGETYPE_GIF: return imagecreatefromgif($image_path); break;
         case IMAGETYPE_JPEG: return imagecreatefromjpeg($image_path); break;
         case IMAGETYPE_PNG: return imagecreatefrompng($image_path); break;
         default: return ''; break;
       }
     }

     // load source image to memory
     $image = imagecreatefromfile($_GET['image']);
     if (!$image) die('Unable to open image');

     // load watermark to memory
     $watermark = imagecreatefromfile($_GET['watermark']);
     if (!$image) die('Unable to open watermark');

     // calculate the position of the watermark in the output image (the
     // watermark shall be placed in the lower right corner)
     $watermark_pos_x = imagesx($image) - imagesx($watermark) - 10;
     $watermark_pos_y = imagesy($image) - imagesy($watermark) - 10;

     // merge the source image and the watermark
     imagecopy($image, $watermark,  $watermark_pos_x, $watermark_pos_y, 0, 0,
       imagesx($watermark), imagesy($watermark));

     // output watermarked image to browser
     header('Content-Type: image/jpeg');
     imagejpeg($image, '', 100);  // use best image quality (100)

     // remove the images from memory
     imagedestroy($image);
     imagedestroy($watermark);

   ?>

 

The .htaccess file:

 

RewriteEngine on
   RewriteRule ^(.*\.(gif|jp?g|png))$ /protected/watermark.php?image=$1&watermark=watermark.png [NC]

 

The image is attached:

Edited March 6, 201214 yr by nfc212