We’ve all been there…
You’re browsing a website, maybe on the hunt for a reference image for a moodboard, and want to drag an image off onto your desktop.
But you can’t.
It’s like the image is superglued into the page.
And a screenshot won’t cut the mustard because the image is tiny, or there’s text on top.
Who you gonna call for help?
Yup.
DevTools.
(Before we go any further, these instructions are written for Google’s Chrome browser, and assume you’re using a laptop or desktop computer right now).
Challenge: download the cat photo below to your desktop
- Right click (or Ctrl+click) on the image
- Select ‘Inspect’ in the menu that pops up
- The DevTools window should now be open, with this line of code selected in the ‘Elements’ panel:
<div class="bgimage"></div> - In the ‘Styles’ panel on the right, look for this line of CSS:
background-image: url('http://greig.cc/wp-content/uploads...'); - Now right click (or Ctrl+click) on the blue link (starting “
http://greig.cc/wp-content/uploads...”) and select ‘Open in new tab’. - And boom! The cat photo will open in a new tab in your browser. Now you can drag it off to your desktop, or right click and ‘Save as’ to the folder of your choice.
If you need a bit more help, I made a short video to guide you through the process above.
Here it is…
https://youtu.be/yijZTeSVO50
Now for the technical stuff (if you’re interested that is…)
So why couldn’t you just drag the image straight onto your desktop?
Well, there are two main ways to add images to HTML pages.
The usual approach is to use an image “tag”, which looks like this:
<img src="filename.jpg" alt="Caption goes here">
But there’s a second way to add images using CSS, using the background-image property:
background-image: url(/media/catphoto.jpg
This is how the cat photo above was added to the page, and why it’s harder than usual to get at than an image placed into the HTML with the <img> tag.
Posted to DevTools for Designers in 2016.