1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Stop people from right clicking on image in website

Discussion in 'Web Design & Development' started by Vidura1995, Feb 1, 2019.

Thread Status:
Not open for further replies.
Advertisement
  1. Vidura1995

    Vidura1995 Thread Starter

    Joined:
    Feb 1, 2019
    Messages:
    1
    Hi
    Is there a way to prevent people from right clicking on an image in a website ? I just want to stop them from doing a reverse image search.
    Thanks
     
  2. cwwozniak

    cwwozniak Trusted Advisor Spam Fighter

    Joined:
    Nov 28, 2005
    Messages:
    63,236
    First Name:
    Chuck
    Hi Vidura1995, and welcome to TSG.

    You can add JavaScript to a webpage to prevent right-clicking on an image on the web page. A Google search should find examples and discussions on how to do it.

    The best that this can do is to discourage casual visitors from right-clicking on your image to copy the URL. There are browser add-ons that detect the right-click blocking and block the blocker. A visitor can also look at the page source code or page information and get the URL of the image.
     
  3. snuffleufflegus

    snuffleufflegus

    Joined:
    Apr 1, 2017
    Messages:
    351
    As cwwozniak said...it just discourages visitors.
    Plain and simple..If you don't want your image stolen,searched...etc,then don't upload it.
    If you decide to upload it,be sure to watermark it.
    The picture should be no larger then 800x600 px with the watermark across the center of the image.
     
  4. plodr

    plodr

    Joined:
    Jun 27, 2014
    Messages:
    18,196
    First Name:
    Liz
    Put a huge watermark on it. This discourages anyone from using it because it takes too long to fix.
     
  5. MMKnight

    MMKnight

    Joined:
    Feb 28, 2019
    Messages:
    47
    First Name:
    Mike
    Watermarks are unsightly and are old school. People post images online to show off art, photography and a huge watermark ruins the viewing pleasure. Not uploading an image is a poor excuse. If someone has an online store with unique items, they need images. Stating "if you don't want people stealing them, don't upload them" is just unhelpful and defeats the object of someone wanting to upload their images. Same goes for large visual Watermarks. More on this in a min...

    If your website is just plain HTML, then this is for you https://mycyberuniverse.com/en-gb/developing/disabling-right-clicking-by-using-javascript.html for Wordpress, I recommend Copyproof https://wordpress.org/plugins/copyproof-website/

    Just bear in mind that any of these can be circumvented with a NoScript plugin, which disables Javascript.

    Watermarks

    There are 2 new technologies, but I'm only going to mention one here, and that is Digital Watermarking. It's a hidden watermark that cannot be removed, even if an images is altered, cropped, resized, copied and pasted uploaded and downloaded multiple times and whats more, it can be tracked anywhere it's used online.

    The best is Digimarc, and the other is ImaTag. ImaTag lets you protect 50 images for free, then a small monthly fee for many more. Digimarc uses a Photoshop Plugin, ImaTag lets you upload the image, add tags and info and then protect it. Once done, you download the protected image and upload that to your website or wherever. This image has the hidden watermark and can be tracked anywhere else it's used online.

    Digimarc works the same way, but via the Photoshop Plugin. It's more expensive, but it is better.

    Links:

    ImaTag: https://imatag.com
    Digimarc: https://www.digimarc.com/products/digimarc-barcode/digital-images
    Digimarc Plugin for Photoshop: https://www.adobeexchange.com/creativecloud.details.12783.html and for older Photoshop versions (Before CC) http://payoff.digimarc.com/dgfi-photoshop/updates.html
     
    Last edited: Feb 28, 2019
  6. snuffleufflegus

    snuffleufflegus

    Joined:
    Apr 1, 2017
    Messages:
    351
    First of all,if your dumb enough to upload your "original" photo,with or without a watermark,then that's just plain stupidity.The image you upload should be small enough,but just large enough for the viewer to see with a semi/semi colored/semi transparent watermark.The image is just for "Viewing Purposes only".The original is presented upon payment.
    Digimarc is no different then any other piece of technology.In fact it degrades the image.It just adds a layer of "Grain/Noise",in turn reducing quality.More here >>> https://kenrockwell.com/tech/digimark.htm
    So again,as i stated before,"IF YOU DON'T WANT IT STOLEN,DON'T UPLOAD IT".That's the plain and simple truth whether you like it or not.
     
  7. MMKnight

    MMKnight

    Joined:
    Feb 28, 2019
    Messages:
    47
    First Name:
    Mike
    I agree, never upload your original unprotected artwork. But It seems like you have a massive bee in your bonnet (I also saw the post you deleted too as this site emailed it). That article in your link above was debunked 14 years ago and Digimarc (and ImaTag) does not use any grain or noise, they use imperceptible identifiers. That article is also 15 years old. It's so old that even the links and the links to the software mentioned are long gone, whilst Digimarc is still here, not only that, Digimarc have changed their technology multiple times since 2004. Both Digimarc and ImaTag can not only protect images, but print and eBooks as well as documents (please explain how grain can be added to paper (not print as in ink) and then be read). Even without images. It can watermark any image format and not just JPEG, which is a poor format for images anyway. If all Digimarc did was add noise and grain as a readable pattern, they wouldn't be here today, like the links in that article.

    Digimarc and ImaTag not only protect the image, but prove it's the original and holds your copyright information too. Meta tags, EXIF/IPTC/XMP can easily be removed. Anyone who has spent time entering these tags into an image, saved it and uploaded it to many sites like Facebook, knows that all of the info (except Author and now Copyright as Facebook changed this) are removed.

    Anyone who does not work in a professional media environment always says the same. Don't upload your images then, put a big ugly watermark on then, keep the images small, only save then at 40% JPEG quality. If I did that and handed the artwork to my clients (which are motion picture studios, TV Studios, Publishers and Magazines) I would lose my contracts. Our images are uploaded to their systems, some can be accessed by the public. Many get leaked, but we know who leaked them due to the protection and legal action is taken. Also, remember that the standard image format online is now PNG, WEBP and the new HEIF format.

    My own work too, as a designer, we upload our work to inspire others, or to sell prints or promote ourselves. Check out Behance. See how many use a visual watermark there. It's not professional and is only done by amateurs who think they are professionals, If you can't afford them, then that also shows that you need more business/sales/clients. In a previous career I was a Computer Forensic Examiner. We had to analyse images on a daily basis to prove origins, copyright, and things you couldn't possibly imagine, so I have experience in both the technical side and the design side and if they didn't work, I wouldn't use them.

    So, let's just talk about this, hypothetically! You state from reading an amazingly outdated article that Digimarc adds grain and or noise, reducing the quality. Then why not upload a reduced quality image, that's not bad quality and still a fantastic looking image, to your site? And what's more, it's protected. The thief will only steal a lesser quality image, that's still protected and can be tracked online. Wouldn't this be better than no image at all? And it kind of throws your argument out of the window. Also, in 2004, not many people knew about Digimarc at all (actually, even today), though they have been around since 1995 which is when I first started using them.

    In the post that you deleted, it mentioned that file sizes are larger, OK, are you living somewhere that has slow internet? Because technology and the internet will not wait for you. The average internet speed of the world is 9.10mbps. (though most internet in homes and business is now very fast, and with 4G, that's faster than a lot of peoples home internet, and 5G around the corner?) So at an average 9mbps, any image that's 8mb in size will download almost instantly. Even digitally watermarked images can still be compressed whilst keeping the quality and the protection, so from 8mb to 165.kb.

    All I can say is please check the technical specs, not the overview (and they are very technical) of Digimarc and ImaTag.
     
  8. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    If you would like to inhibit right click on certain images, it is best achieved using a css class - e.g.
    ... the css
    HTML:
    .rcinhibit {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    -o-user-select: none;
    user-select: none;
    }
    ... coupled with your html
    HTML:
                        <img class="rcinhibit" src="images/example.jpg" alt="example image">
    
    This has the advantage over the javascript as it is selective and cannot be reversed;)
     
  9. cwwozniak

    cwwozniak Trusted Advisor Spam Fighter

    Joined:
    Nov 28, 2005
    Messages:
    63,236
    First Name:
    Chuck
    It might prevent someone from casually right-clicking and copying an image but would it prevent someone from using a bit more effort and saving it through the Page Info tool in Firefox?
     
  10. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    ... very true Chuck:(
    Anyone with a bit of knowledge can circumvent this inhibit, but not mainstream visitors, methinks ...
     
  11. snuffleufflegus

    snuffleufflegus

    Joined:
    Apr 1, 2017
    Messages:
    351
    The right click can also be bypassed in google chrome. (If your knowledgeable enough).
     
  12. smith962874

    smith962874

    Joined:
    Mar 12, 2019
    Messages:
    16
    Hi, Vidura1995
    Add the following script in client object in the code editor and no one can even right click on your images:

    $("body").on("contextmenu",function(e){
    return false;
    });


    It will help you out. :)
     
  13. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    @smith962874 the thread originator just wants to avoid right-click on images not the entire page, which is what your javascript will do, no?
     
  14. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1222581

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice