ImageGuard

ImageGuard

Get the ultimate protection for your images by making it almost impossible to grab images off your site.

  • Language: JavaScript
  • Released: Feb 9, 2011
    Last Update: Feb 9, 2011

Protecting your images online is not an easy task, and this simple script could save you or your programmer hours of hair-pulling.

Features:

  • Make your images almost impossible to steal.
  • Prevent saving the image with right-click
  • Prevent from dragging the image to their desktop
  • Prevent visitors from locating the image filename in the source.
  • No need for ugly watermarks (You can add them if you like for extra protection).
  • Disables printing of images

Some of the methods involved:

  • Slicing up the image file to many separate files
  • Random filenames
  • Transparent image overlay
  • Disables right-click, saving, dragging & printing
  • Removes original filename and image reference from source

alt text

ImageGuard uses Flash, Javascript and CSS to create the most complex protection method for your images.

Image Guard is the perfect solution for photographers, artists who refuse to use watermarks over their work, but still need to do their best to protect their most important assets.

While not impossible, in order to steal your images, thieves would need to go through hell, which would literally take hours for every image, and even then might not be possible at all.

Try the demo and see for yourself!

Hide

Set up: How to protect your images with ImageGuard

SETUP:

1.Copy the supplied files to your website root.

2.Open imageguard.js and identify your images folder.

3.Add a script reference to this file at the end of your webpage.

IMAGE PROTECTION:

For each image you want to protect... 1.Change the img tag so that the alt attribute becomes an altered version of the src attribute. Now set the src attribute to a hash # character followed by a colon and the image filetype.

2.Add a span container around the image tag and give it a class name of 'imageGuard'.

3.Move the original image to the newly available safe images folder.

4.Copy the fake image blank-image.png to where your original image resided and rename it as per your original image.

Thats it! Your image is now now able to be shown as you'd ideally like while being protected with multiple methods.

Quick start guide, further reading, advanced techniques plus usage examples provided with component.

Back to top

You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

1 license From » $4.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

  • Very safe... And working, only print screen can download and steal the pictures, but I use water sign and the job is complete.
    MI Molnár István
    3 years ago, 0 comments
    Was this helpful?
    Flag
Post a comment

Or enter your name and Email
  • Matt Pass Developer 3 years ago
    @semut Thanks. Would love to be able to cover the 'Print Screen' key but as it's something handled at BIOS level, it simply can't be intercepted in time.
  • Semut 3 years ago
    Great image guard, but a common browser screenshot capture can still able to grab the page screenshot and crop it specially for the image. But as you said it unfortunately can't be avoided.
  • Matt Pass Developer 3 years ago
    Hi Cheri. The guide it comes with should tell you all you need to know, but if you're really stuck, show me your webpage and I'll point out what what you need to do next. Can't do work for you, as it's a component you make use of, but can set you off in the right direction. My email is matt@web-jedi.co.uk.