A lot of you may be using software to download Instagram images. But, do you know that you can do that yourself? It’s actually quite easy. The software or web apps that you might be using, are going through the same process. This tutorial is all about how to download Instagram image manually, using nothing but the browser.
How to download Instagram image using nothing but the browser
All you need for this tutorial is to have an Instagram account and a browser installed. This demonstration uses Chrome and Microsoft Edge browsers. But, this procedure can be done on any other internet browser. So, let’s start.
First, open up your browser. Next, navigate to the post you would like to download.
For demonstration purposes let’s use Peter McKinnon Instagram profile.
Peter McKinnon is a Canadian YouTuber, photographer, filmmaker, and vlogger. He is most known for his filmmaking and photography tutorials mainly using Adobe Premiere Pro or Adobe Lightroom.
Today we will be downloading one of his most famous photographs made while filming his 23-minute short film titled “The Bucket Shot”.
So, let’s scroll down and find it.
The image we are going to download is the one in the center. Once, you’ve found the photo you want to download, just click on it. And, you will get the following screen
Now, let’s see how to download it.
How to download Instagram image using Microsoft Edge Browser
What I want you to do is Right Click over the image. A menu will pop up. On the menu you need to select Inspect or you can use the keyboard shortcut Ctrl+Shift+I
When you click the Inspect option a side bar will pop up.
Inspect Element lets you tweak the appearance and content of a web page. You can even make temporary edits to the site’s CSS and HTML files. But, once you close or reload the page, your changes will be gone. You will only see the changes on your computer. You are not actually editing the real website itself.
What you are looking at right here is the DOM. When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM is constructed as a tree of Objects. Knowing this, all we have to do is find the image element. Well actually we’ve found it already. When we use Inspect Element option, it actually leads us right into the element that hosts the picture we want to download.
Well, almost. Next, open up the object above the one Inspect Element selected.
The line on the image above, shows the element we were automatically navigated to. Likewise, the red rectangle represents the object that is one level up. Expand it like shown on the image, by clicking on the arrow next to it.
Inside you can see the img element with its alt property. The alt property is actually the alternative text displayed when the browser can not load the image itself. But, the property that interests us the most is src or source tag/property. If you hover your mouse over, the browser will display a thumbnail image of the original one.
Now use your mouse to double click on it. As a result, the complete field should become editable, like so:
From here you can Right Click over it and select Open in New Tab or just copy the highlighted text.
If you choose Open in New Tab the browser will open up the image in a new tab, allowing you to save it.
However, If you chose to copy the url that is inside the src tag, then you can manually open up a new tab Ctrl+T paste the copied link and hit Enter. You should get the same result. All you have to do now is download the image.
Download Instagram Image Application Tutorial
If you are a developer, or you are interested in automating the process you can check out the following link:
Get Instagram Image with C# – CODE-AI without instagram api (code-ai.mk)
This blog guides you through a step-by-step tutorial on how to build a C# desktop application that is able to download Instagram images.