57

Slideshows on the New York Times website seem to have used some trickery to* cause a right-click in Firefox (and IE/Chrome) then "view image" or "copy image" to return a 1 x 1 pixel. The images also won't print.

How can I bypass this short of a screen capture? Bonus points for describing how they did it.

*It ends up that Ijgww pointed out that this is likely not trickery, that it's instead probably due to some browser limitations requiring this odd behavior, as evinced by this article's image, where copy, paste, and print function correctly. Moral of the story: never assume negative intent.

If it is a slideshow, it may not be trickery at all. Many slideshow solutions are only possible if image is in the background by css due to x-browser cropping facilities. And a 1x1 pixel is used to define crop size.

6
  • 2
    I would email the site, explain who I am and ask for the pictures Sep 13, 2012 at 14:25
  • 8
    @Luke This is not feasible, nor should I have to. This easily falls within fair use copyright guidelines. Sep 13, 2012 at 14:29
  • 4
    How do you offer bonus points exactly?
    – Dave
    Sep 13, 2012 at 14:43
  • 1
    @DaveRook bounty? You'll never know until you try... Sep 13, 2012 at 15:16
  • 1
    I did not state the purpose of copying the image; nor should I have to. There are likely infinite valid fair-use cases for copying an image to your computer clipboard or printing it. For instance; printing it out and stapling it to your child's forehead. Sep 17, 2012 at 0:54

11 Answers 11

82

New York Times creates a <div> element containing the stretched and transparent one-pixel image and locates the real image in the background:

<div class="centeredElement" style="background-image:url('http://graphics8.nytimes.com/images/2011/09/21/dining/20110921-ROSH-slide-CBSF/20110921-ROSH-slide-CBSF-slide.jpg');width:600px; height:400px;">
<img width="600" height="400" src="http://graphics8.nytimes.com/images/misc/pixel.gif" />
</div>

To save the image:

  1. Right-click it.
  2. Click View image Info.
  3. Select the real image (one above the one-pixel image).
  4. Click Save As....

How to print the page:

  1. Press Ctrl + P.
  2. Enter the Options tab.
  3. Check Print Background Images.
  4. Click Print.
7
  • 4
    Seems silly of them to think that this kind of trickery will prevent users from taking their images.
    – Eliot Ball
    Sep 13, 2012 at 18:40
  • 51
    @EliotBall I'd be shocked if it didn't have a >95% success rate. A majority of internet users haven't been technically literate since sometime back in the 90s. Sep 13, 2012 at 19:10
  • 11
    Also, there's not much benefit to making it more complex. The gap between those who're stopped by something trivial and those who're able to use their browsers adblock/webdev tools to figure out how to rip the image free either directly, or are capable asking and of following directions from someone else who can is very small. Meanwhile adding all the extra stuff to the page slows downloading and rendering, annoying eveyone. Sep 13, 2012 at 19:28
  • 9
    @EliotBall If it was so obvious, then why is this question on SuperUser? Now, factor in how many people will never ever hear about SuperUser…
    – MattiSG
    Sep 13, 2012 at 20:51
  • 5
    @DanNeely - 'Eternal September' began in 1993. ;)
    – BryanH
    Sep 13, 2012 at 22:00
49
  1. Use AdBlockPlus plugin, right click on the image and block it (select the last option 'custom... pixel.gif'). From now, after refreshing page once, you'll be able to click with right mouse button on the image and selecting 'view background image' and voila!

    This is the best option as done only once, will allow you to save images from galleries always without additional effort.

  2. With Firebug plugin under Firefox or with build in option in Chrome select 'inspect element'. Then you'll see the HTML code pointing to the img tag with src to the sneaky pixel.gif. The div containing it has the proper picture set as background. Just copy the image url from div element's style (background-image:url) and you are done.

7
  • I like your solution best, but I accepted @Dennis's because of the explanation. Sep 13, 2012 at 14:38
  • I also wanted to explain, but in a hurry had some problem to paste the example HTML code so finally skipped it. Well, maybe next time I'll get the green 'V'. Most important my answer is helpful to you :)
    – topr
    Sep 13, 2012 at 14:42
  • +1, this (using ABP) is exactly what I do as well in situations like this.
    – Karan
    Sep 13, 2012 at 15:28
  • 1
    The opera browser can block anything without a plugin. As for adblock, please use a whitelist for sites you like, they need the money from ads.
    – Manu
    Sep 13, 2012 at 19:31
  • 1
    @manu has Opera added built in DOM based blocking, or do you still need a plugin for anything beyond URL filters? Sep 14, 2012 at 19:00
17

Since you have tagged the question with firefox and you have marked as correct a method describing how to save the image, I suggest the following alternative:

  • Either:
    • Right click on page -> View Page Info.
    • Choose Tools -> Page Info from the menu bar.
  • Select Media Tab on the window that pops-up.
  • Browse to the image that you are looking for and click Save as button. Sorting the media by size usually helps you to get faster to the image you are looking for.

firefox-page-info

This method will work with NY Times slideshows. Yet, it comes most handy with:

  1. Pages which contain multiple images you want to download. You can select multiple files from the media list and save them all with one click of Save as.
  2. Pages with silly restrictions on right-clicking (e.g. IMDB slideshows). This method saves you from having to disable and then re-enable javascript.
2
  • 4
    That is some tasty looking chicken. Sep 14, 2012 at 1:34
  • 2
    @RussellBorogove why do you think I wanted to print it? Sep 17, 2012 at 4:00
15

Right click and select inspect element in Chrome. Now copy the url in the background-image field

Which gives me the actual link

http://graphics8.nytimes.com/images/2011/09/21/dining/20110921-ROSH-slide-CBSF/20110921-ROSH-slide-CBSF-slide.jpg

enter link description here

1
  • This is exactly what I do. Feels like it lacks finesse, but it works and is fast and straightforward. Nice image choice too: (original) Georgian Chicken with Tamarind for the holidays! Yum! Sep 13, 2012 at 18:57
6

If it is a slideshow, it may not be trickery at all. Many slideshow solutions are only possible if image is in the background by css due to x-browser cropping facilities. And 1x1 pixel is used to define crop size.

Others already answered how-to download such picture. I just wanted to shed some other light to the subject, not to collect bounty.

Cheers!

2
  • You appear to be quite correct! Funny how many of us got sucked into assuming mal-intent. Editing question and tags. Sep 14, 2012 at 3:02
  • It was javascript programmer answer (one that sneaks on what web designers do) ;) Thanks for points :)
    – ljgww
    Sep 14, 2012 at 3:52
3

I'd just use a JavaScript bookmarklet to replace the dummy image with the real one, then you can simply save it or drag it onto your desktop.

Select and drag the code below directly onto your browser's bookmark toolbar, then click to run it on each page you want to view the image from:

javascript: var div = document.getElementsByClassName('image')[0]; var url = div.getElementsByClassName('centeredElement')[0].style.backgroundImage.replace(/^url\("|"\)$/g, ''); div.getElementsByTagName('img')[0].src = url; void(0);

This will only work on this site, and only whilst they have the HTML set as they do right now.

2

Use Chrome, right click image, do Inspect Element. Ignore the image tag and look a the background url for the div, which gives you the true image path, which you can copy, load into a fresh tab and save

1
2

Here is a general solution that should work for any website.

Install and start Fiddler. Browse to the site with the image.

Check the captured traffic log that was captured in Fiddler and you will find all images that were downloaded to your browser.

5
  • You don’t need Fiddler for that, the browsers offer that information as well (see some of the answers above). Sparrows and cannons. Sep 13, 2012 at 20:11
  • 1
    The Fiddler solution will work with ALL browsers, and even if the resources are loaded through flash or some other embedded object, as long as they are loaded through HTTP or HTTPS. With Fiddler, the procedure is done the same way, every time. Otherwise the procedure is slightly different based on the website, or the browser. I'm not saying this is the easiest solution, just a good universal alternative. Sep 13, 2012 at 20:14
  • Your mention of Flash resources is actually a pretty good point. Sep 13, 2012 at 20:46
  • 2
    Adding more software should not be required, that's a large increase in complexity for what should be a simple process. Fiddler is also a tool for programmers, not general computer power users. Sep 13, 2012 at 20:58
  • @JeffAtwood: Though I agree with your statement that it would be (in many cases) an unnecessary increase in complexity, that does not negate the fact that using an intermediate proxy may be, in some circumstances, the only reasonable way to capture this content. Sep 14, 2012 at 0:51
1

Press PrtScrn, open a paint program, paste.

If you are using Windows: to only capture the acive window: Alt + PrtScrn, if Vista or greater you can use the snipping tool to only capture a selection.

4
  • THIS is the most general solution of them all, and the reason why there will never be any in browser solution to "stealing" pictures.
    – UncleZeiv
    Sep 14, 2012 at 8:24
  • 1
    Actually this is a pain if the image spans a resolution larger than your monitor can display - still doable but it gets tedious.
    – Thomas
    Sep 14, 2012 at 10:09
  • From the OP, "How can I bypass this short of a screen capture?" Sep 17, 2012 at 4:04
  • apologies - I read "short" as "sort" then presumed you were talking about "[preventative] screen capture [technology]".
    – markmnl
    Sep 17, 2012 at 6:14
1

All the images you see on your browser are stored in a cache somewhere on your hard-drive. You can use a cache-ripping tool to extract the images after the browsing session. And no need to save one-by-one. One of the tools you can use is cacheCopy. Allows you to choose the browser, choose the cache. How large (file size or resolution) images you would like to save. And also allows you to give your files a proper name.

The downside to this approach, you'll need to filter out images from target site from all other in your cache. But this can be avoided if you clear the cache before you start browsing for harvested images. Also this tool does not work in a private mode, as cache is not used there.

Disclaimer: it is a shameless plug. I'm the author of that app.

1
  • um.. for whatever purpose. Initially created for flickr grabbing
    – trailmax
    Sep 14, 2012 at 22:50
0

In general: Chrome / Inspect Element / Resources tab / Frames / the only frame in the page / Images. There is no trickery in the world that could hide an image from this list.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .