Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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.

share|improve this question
2  
I would email the site, explain who I am and ask for the pictures –  Canadian Luke Sep 13 '12 at 14:25
8  
@Luke This is not feasible, nor should I have to. This easily falls within fair use copyright guidelines. –  glenviewjeff Sep 13 '12 at 14:29
4  
How do you offer bonus points exactly? –  Dave Sep 13 '12 at 14:43
1  
@DaveRook bounty? You'll never know until you try... –  glenviewjeff Sep 13 '12 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. –  glenviewjeff Sep 17 '12 at 0:54

11 Answers 11

up vote 81 down vote accepted

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.
share|improve this answer
4  
Seems silly of them to think that this kind of trickery will prevent users from taking their images. –  Eliot Ball Sep 13 '12 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. –  Dan Neely Sep 13 '12 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. –  Dan Neely Sep 13 '12 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 '12 at 20:51
5  
@DanNeely - 'Eternal September' began in 1993. ;) –  BryanH Sep 13 '12 at 22:00

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

share|improve this answer
1  
For example, based on your link in the question :- graphics8.nytimes.com/images/2011/09/21/dining/… –  Rob Cowell Sep 13 '12 at 14:25

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

share|improve this answer
    
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! –  Ellie Kesselman Sep 13 '12 at 18:57
  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.

share|improve this answer
    
I like your solution best, but I accepted @Dennis's because of the explanation. –  glenviewjeff Sep 13 '12 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 '12 at 14:42
    
+1 for a permanent solution. –  sudo Sep 13 '12 at 14:52
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 '12 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? –  Dan Neely Sep 14 '12 at 19:00

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.
share|improve this answer
4  
That is some tasty looking chicken. –  Russell Borogove Sep 14 '12 at 1:34
2  
@RussellBorogove why do you think I wanted to print it? –  glenviewjeff Sep 17 '12 at 4:00

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.

share|improve this answer

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.

share|improve this answer
    
You don’t need Fiddler for that, the browsers offer that information as well (see some of the answers above). Sparrows and cannons. –  Konrad Rudolph Sep 13 '12 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. –  dotnetengineer Sep 13 '12 at 20:14
    
Your mention of Flash resources is actually a pretty good point. –  Konrad Rudolph Sep 13 '12 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. –  Jeff Atwood Sep 13 '12 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. –  dotnetengineer Sep 14 '12 at 0:51

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.

share|improve this answer

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!

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

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.

share|improve this answer
    
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 '12 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 '12 at 10:09
    
From the OP, "How can I bypass this short of a screen capture?" –  glenviewjeff Sep 17 '12 at 4:04
    
apologies - I read "short" as "sort" then presumed you were talking about "[preventative] screen capture [technology]". –  markmnl Sep 17 '12 at 6:14

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.

share|improve this answer
    
um.. for whatever purpose. Initially created for flickr grabbing –  trailmax Sep 14 '12 at 22:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.