How to save images with "no-right click" protection

The internet has lots of free crap but sometimes publishers go to extra efforts to ensure you can't save anything from their site so you will either subscribe and give them money, or to prevent bots from duplicating their site so someone else can get paid.

All good reasons, but sometimes I just want to save a picture for later and I don't like bookmarking all that much.  But thanks to sites that disable the right-click option, I can't just right-click and "save as..." for these images.   But, if I can see the picture in my browser, then I can save it if I really want to.  And thanks to the newer browsers implementing advanced debugging, it's even easier than it used to be. 

Yes, you CAN just use a screenshot program.  But that will only allow you to save the resolution of which the HTML code is presenting it while displayed in your browser.   If you download the actual image, you can get the full resolution and in some cases you can get around javascript that adds watermarks to images. 

Here's how...

Most browsers are the same, but in this case I am using Firefox as an example.

Get the browser to go to the image you want to save.  Once it's on the screen, you obviously cannot right-click on the image, but you can probably right-click somewhere else on the scree.  If you are able to get a right-click menu somewhere, then select the "Inspect Element" option.   The best place to try is just a few pixels to the left of the image.

If you cannot get a right-click option, then go to the browser menu at the top and click TOOLS > WEB DEVELOPER > INSPECTOR.

A small window with a bunch of HTML code will open at the bottom of the browser.  Now click on the HTML code at the bottom half.

Now use the UP/DOWN arrow keys to move the selection of HTML code up or down.  As you move up and down you will notice certain elements of the top half are being highlighted a certain color (eg. light blue).  Use this method to get your desired image highlighted.

Once your image is highlighted, go back down to the HTML code on the lower half of the browser.   The code will very likely have small block arrow on the left side.  This indicates a tree that has been collapsed.

You can use the keyboards RIGHT/LEFT arrow keys to expand and collapse trees.  Or you can just click the small block arrow icon on the left side of the HTML code.

With the tree expanded, you will see there is more code to scroll through.  Use the UP/DOWN arrow keys again to scroll through this code you just expanded.  Watch the upper half of the browser to see what code is referencing the image you are trying to locate.

You may have to do this process multiple times.  Keep expanding and scrolling the code until you finally locate the image reference similar to the image below.  Look for standard image file extensions like .jpg .png .bmp .gif

inside the SRC tag, you will see the http:// URL you need to load the browser on your own.  Select (highlight) the text and select EDIT AS HTML.

The HTML window will move the code to it's own private box.

Here you can select the text and use CTRL-C to copy it into the clipboard.  Paste this text into a new tab of your browser.

The image should load in your browser with nothing else and no protections.  You can now use right-click to save your image to your computer.