How can I copy nytimes.com slideshow images to the clipboard?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

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.

Answer 4

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

Answer 5

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!

Answer 6

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.

Answer 7

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

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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.