Manfred Kuechler
Hunter College

Last update: 25 Feb 2006
 

Saving Images and Partial Web Pages

An important aspect of doing research using the Internet/Web is to document your sources. And as a many web pages are subject to frequent change and availability is either limited to certain users (subscribers) or to specific time frame, it is important to save/download either whole pages or specific parts. The issue of saving/downloading complete web pages is addressed in a companion document. Here we are concerned with saving specific parts, either
Keep in mind that web pages and images contained in web pages may be copyrighted. Saving/downloading such material for your own personal use is legal under the "fair use" provision of the copyright law. However,  it is a violation of copyright to re-distribute such material without permission, e.g., by putting it on another (maybe your own)  web site which is freely accessible. On the other hand, material on government web sites is usually in the public domain and can be reused as long as you make no commercial use of it. There is much more to copyright issues, this is just brief reminder that just because something is easily available, you are not free to use it anyway you want.

Saving an image from a regular web page. If you are interested in a specific image and the web page in question is a regular "html" document, saving/downloading the image is very easy. While the exact details (like the wording of the menu item) varies between different browsers (like MS IE, Netscape, Firefox, Mozilla, etc.) the basics are the same:

Simply right click the image, and select  "Save Image (Picture) as", then select a location (folder) on your local computer where the image should be stored and either accept the file name suggested or modified to your needs (e.g., to make it more suggestive of actual content).

Depending on the source page (and the browser you use), you may also be given a choice about the format in which to save the image. The most common image formats used on web pages are .gif, .jpeg/.jpg, and -- more recently -- .png. Typically, .jpg works better for photos, and .gif works better for charts and graphs. More about these and other formats below.

Saving images and regions in general.  To protect their intellectual property -- and for other reasons of convenience -- many web sites do not use regular html documents;  a  frequent alternative is using .pdf documents which allow to employ a number of  "security" features. These security features can de-activate the built-in Acrobat tools (like the text-selection and the snapshot tool in Adobe Reader 6/7 and up or the table select tool in the full Acrobat 5 and up, normally a convenient way to copy-and-paste).  However, even with security set to its highest level in a .pdf document, there is no way to "protect" images or any part of a web page  from being downloaded as you  can always take a "screen shot". Whatever appears on your computer screen (no matter what file format) can be captured as an image file. And for this it does not matter whether we want just a specific image or a certain region of a web page. So, we drop the distinction at this point.

Tools  to take a screen shot

A. A simple (no extra software needed) way to take a screen shot is by using the "Print Screen" key on your keyboard on your Windows keyboard. If you press this key  your entire screen is copied to the desktop (silently, there is no acknowledgment that anything happened). Subsequently, you can paste the content of the clipboard into any application including MS Word by simply pressing ALT-V.  If you don't want to capture the entire screen, you can press ALT-Print Screen, and only the "active" window (the one with title bar in dark blue) will be copied. Either way, once pasted into an MS Word, you can format this image, e.g., cropping it to keep only the parts you are interested in.

To crop a screen shot in MS Word, select the "Picture" toolbar (View/Toolbars/Picture). Then select/click the cropping tool (in the middle of the bar, looks like two intersecting right angles) and move it over one of the "cropping handles" (the small black squares in the middle of each side of the picture) and drag the handle along.  Alternatively, you can right click the picture and select "Format Picture" and there the "Picture" tab and then enter  your cropping directive in numerical form (more difficult to do). From the "Size" tab, you can also change the size of the image (making it smaller or larger). However, this may adversely affect the quality of the image (see below).

B.  If the web document in question is in .pdf format and the security setting of this document does not restrict this activity, you can use the  "snapshot tool"  within Adobe Reader 6 and 7. Just click on the "camera" icon in the toolbar, mark the region you want to capture by dragging your mouse and copy (CTRL-C) and then paste (CTRL-V).

C. For protected .pdf documents and everything else, the best  way to take a screen shot is by using a special utility. There are several such utilities available, but the best program is probably "SnagIt" from TechSmith. The education version is only $25, but it is certainly worth the money. The latest version is 8 which includes a number of important new features.
In addition to what the Print Screen key does, SnagIt allows to take screen shots of specific regions of your screen and it also allows you to take screen shots of windows which do not fit one one screen ("scrolling windows"). Furthermore, you can annotate the screen shot taken, you can save the image file in a great number of formats, and -- in contrast to MS Word -- it works very well when you have to change the size of the screen shot (later on).

New features on SnagIt 8 include

With SnagIt you save your screen shot as an image file (unless you select the new "text" option) and this image file can then be inserted in any word processing or publishing program. It is a good idea, to determine the final size of the image in your document first, do all editing in SnagIt, and then insert an image file which does not further formatting in your application (e.g., MS Word).

Other screen shot utilities include (in random order):
Note that many products (including SnagIt) offers free trials. So, you can compare and determine which product gives you the best cost-benefit ratio. Be aware that prices are subject to change, and that with some searching you may find older versions of product at lower or no cost.  However, buying SnagIt 8 at the educational discount price of $25 is a deal hard to beat.

How to get good quality screen shots

To discuss this topic efficiently, we need a brief detour introducing the two fundamental graphics types:
Raster or bitmap graphics. These graphics consist of small dots ("pixels"). When you look up close at pictures in old newspapers you can see these little dots  (these days newspaper printing is much more sophisticated and the dots have become so small that they are hard to make out). Similarly, your computer screen is made up of these pixels, and with modern computers (video cards) you usually have a choice of "resolutions" (meaning how many pixel will be used to make up the screen) from 640x480 (hardly used these days) to 1600x1200; a popular resolution is 1024x768.  When you take a screen shot this image then is made of pixels as well, in other words it is a "raster graphic".

And this is the reason why the quality of a screen shot often suffers if you resize/rescale it afterwards.  And when you paste a screen shot into MS Word, screen shots often get resized automatically so that they fit into your page -- following the basic MS philosophy that users are idiots and decisions should be made for them. You can reverse this automatic resizing by going to "Format Picture"/"Size" (see above).  But read on, there will be more.

Vector graphics.  The other fundamental type are vector graphics. These graphics  keep track of the elements which make up say a chart; what specific geometric form (lines , rectangles, circles) , what text and what fonts are used and where these elements are located in relation to each other.  Applications/programs handling vector graphics can therefore draw clear and precise images at different scales and present the same graphic in different sizes but in the same quality (on your screen).

When you  look at say a pdf document  on a web site, you can change the viewing scale (zoom level) of the Adobe/Acrobat reader and you should use a viewing scale so that the image you are interested in looks for one sharp and clear and also matches the size you have in mind for the final destination of your screen shot. Note that it will not always possible to match both criteria equally well. Here is the reason:
Some pdf document documents contain (internally) raster graphics which may look fuzzy when viewed at 100%, but get sharper when you increase the viewing size. For those documents, the Adobe reader cannot  produce sharp images at any given "zoom level". (Images should be sharp when viewed at 100%, but there are plenty of badly created pdf documents on the Web.) If the specific pdf document, however, uses vector graphics then the images will be sharp no matter what (viewing) size/ zoom level you choose.

Resolution and size in inches.  When you display a screen shot on screen a fixed resolution is used (96 dpi [dots per inch, dots=pixels] on Windows, 75 dpi on Macs), so size in pixels determines the size in inches. A screen shot 400x300 pixel is about 4x3" on a Windows screen. However, printers use much higher resolutions (300 and more dpi), so if you use genuine publishing software (like Adobe Photoshop) you can change the print size of a screen shot by changing the resolution without losing any of the pixels. In these cases, you want to take as large a screen shot as possible (in pixels). Some image editing software (including SnagIt and Adobe Photoshop) also let you save a preferred resolution and  some word-processing and publishing software than uses this preferred resolution (MS Word does not).

To maximize the pixel size of a screen shot, you should change the resolution of your screen (setting it higher) to allow a higher viewing scale and still having the image completely shown on the screen (though SnagIt allows for capturing scrolling windows this gets somewhat tricky). To change your screen resolution, right click on any empty spot on your desktop  and select "Properties"/"Settings". Then select the highest resolution offered by your video card. As text may become very difficult to read, change your screen resolution  back once you are done with taking the screen shots.


Finally, here are two  similar advice pages -- as it often helps to have the same topic presented from a different angle or in a different style:


Summary

Assuming that you are not doing some fancy publishing, but that you are simply using your screen shots in an MS Word document or on a web page, here is my advice in a nutshell:

  1. Present the image clearly  on your screen (e.g., use viewing scale in Adobe/Acrobat reader)
  2. Check whether  this image will fit onto a page in your MS Word document (a normal page is 6.5" inch wide which translate roughly into 650 pixels); if not, consider using landscape format. If this does not help, consider reducing (!)  your screen resolution so that the Acrobat reader (or some other application helping the browser to display the web page from which you are saving) will display a sharp image with less pixels (will not always work, e.g., only if the pdf document uses vector graphics)
  3. Take the screen shot with SnagIt or some other utility, but use the Print Screen key, if necessary
  4. Avoid resizing the screen shot in MS Word after it has been taken (other applications do better with resizing/resampling raster graphics, but still avoiding resizing altogether is better)