We downloaded that picture of the Capitol pretty easily in Step One, because the uploader (me) didn’t place many restrictions on it. Other files aren’t so easy.
Let’s say we want this picture of a house on Flickr. If I asked you, “What are we looking at?” You might say, “An artsy picture of a house.”
But you’d be wrong! We’re looking at a webpage that contains a picture of a house, which is actually stored elsewhere on the web.
You can tell by this page’s URL, which does not end in .jpg, .png, or any other filetype we would recognize as an image file. Clicking File > Save Page As offers us an .html file, which is a webpage. If we were to download that file, it would open up in a web browser and we’d be right back where we started.
But we want that photo! Let’s try our tricks from Step One.
Right click on the image to open it in a new tab. But “Open Image in New Tab” isn’t an option! Flickr has some actual protections on this file. To get it, we’re going to have to delve into the code that makes up this webpage – a tactic called “looking under the hood.”
(Legal disclaimer: probably a good idea to consult a lawyer or legal-savvy friend before using a file like this for publication or profit.)
- Right click somewhere in the white space (in this case, black space) of the webpage.
- Select “View Page Source.”
- Don’t panic!
We’re looking at the code that makes up the webpage. You don’t have to understand all of it. You just have to scroll through to look for things you recognize. Sometimes nerds even leave jokes for each other!
The house photo is a media file that is stored somewhere on the web (remember, we want to find a URL that ends in an image filetype). This webpage links to it.
One way to find this link is by searching (Cmd+F or Ctrl+F) for “src”, which stands for “source.” The first thing thing that pops up is:
<link rel="image_src" href="https://c1.staticflickr.com/7/6063/6131328344_a606751546_n.jpg" id="image-src">
BOOM! Got it.
Remember that this particular URL ends in “.jpg”, making it an image file and not a webpage. If we click File > Save, we’ll get the actual file.
There’s a ton more information in this Page Source, so I suggest you skim through and see what other gems you can find. Let’s skip straight to a tool called the web console in STEP THREE.