|
|
Chemistry Laboratory Web Pages: Photographs |
The initial file size of a high-quality digital photograph taken on a 2 megapixel camera is quite large: over 6 megabytes. An image this large would be too large for most computers/connections to download in a reasonable amount of time. There are two ways to manipulate the files to make them smaller. One, you make the image size smaller, and two, you compress the image. These are explained below, using a photograph that I took of our Gas Chromatographs (GCs) as an example to walk you through the process from raw photo to finished, web-ready image.
Note: The basic manipulations of sizing, resolution, and saving as jpeg files can be handled by any graphics program. However, the only program that I use is Adobe Photoshop, the full (educational) version. This program does a lot more than I will ever use, but it does the basic features so well that it is the program I prefer. The techniques discussed below should apply equally well in whatever graphics program that you use.
When I take a picture in the "super high quality" mode on my 2.5 megapixel digital camera, the picture size is 1712 pixels x 1368 pixels. Multiplied, this is 2.34 megapixels. Your computer will store this 2.34 megapixels as 3 bytes/pixel, therefore the file size is 3 bytes/pixel times 2.34 megapixels or 6.7 megabytes (MB)*. Photoshop conveniently displays this information in the lower left corner of the window, see the "33% view" image, below.
An image that is 1712 x 1368 megapixels will not fit on your computer screen without scrolling right and left and up and down. However, when you first load in the image your application will probably automatically reduce the view-size of the image so that you can view the entire image in the window. Below is my photographs of GCs; when I first open the image in Photoshop it the window looks like this:
 33% view |
Note the title bar of the window: P9040003.JPG @ 33%. This means that the actual size of the image is 3 times this big. If I set the picture to 100%, the following image represents the true size and the detail of the photo:
 100% view |
Only a portion of the photo is actually shown in the above photo. At 100% size, the photo will not fit even on a 21 inch monitor; you have to scroll to see all areas of the photo.
The first step in downsizing the image is to "crop" it. Look at your photo: do you want the entire photo, or only parts of it? In my example, I only need to view one GC. So, I use the crop tool to frame and then trim the picture to include only the area I want.
 cropped image |
After you crop the image, decide whether it is an appropriate size for the web. Let's say that I have chosen to have all my image sizes 600 pixels high. To find the current width of the photo, in Photoshop go to the "image" menu item and choose "image size". In this case, the image is 590 x 779 pixels. Therefore, I change 779 to 600 (with "constrain proportions" checked) and say "okay".
At this point, it is a good idea to save the image. Do not save it in jpeg format, however, since saving as jpeg will compress it. Every time you compress the image, you lose image quality. Therefore, while you are working on the image, and in case sometime in the future you may want to retrieve the original photograph, you should save a copy of the image in a format such as bmp, bitmap, photoshop, pict, or tiff. Before you proceed to the next step (compression), add text or other objects to the photo.
 add text, etc. |
Notes on adding text in Photoshop
Photoshop is basically a bitmap program, although recent versions allow the user to add vector-objects (squares, circles, arrows) and have excellent text-manipulation capabilities. It takes a little getting used to, since you have to add each section of text/shape in a different "layer". Then to make a change, you select the appropriate layer and type or draw the change. In Photoshop, you should always save a copy of the layered document in Photoshop format so you that can go back and make changes, since converting to jpeg squishes the image into one layer and prevents further changes. Follow the link below for a little more on the topic of adding text in Photoshop:
JPEG (or JPG) stands for "Joint Photographic Experts Group" and is a computer-directed means of making a graphics file small, or compressing it. JPEG compression uses non-simple math to remove bits of data from an image; the original image is actually replaced with a pattern of that image. The human eye does not notice the missing information, and therefore cannot discern the difference between the original image and the new jpeg format of the image. You can think of jpeg compression as creating a smaller file size by throwing away some information although the observer cannot notice any difference. Note that the reverse is not true, you cannot "de-compress" a jpeg image, because the data is gone, and the computer cannot guess the missing information.
Internet browsers can only recognize and display images in jpg or gif or png format, they cannot recognize bmp or tiff files (for instance). GIF compression works best on line drawings; jpg works best on photographs; png is used by unix machines instead of gif.
To save as a jpeg file, go to the file menu and choose "save as" and then jpeg or jpg (depending on the platform, Mac or PC). Photoshop (v.6 and higher) has a function to "save for web" in which you can set the quality and other jpeg parameters and view the effects of those changes on the resultant images. "Save for web" also automatically sets the image to screen resolution, which is around 72 pixels/inch. (Resolutions higher than this are not necessary, since the screen cannot display any better. The same is NOT true in printing applications, but that is another article.)
The final jpeg image of the GCs is below. The photoshop-format version of the image is 1.6 MB, while the jpg version is 68 KB. This is a reasonable size for most computers/connections.
|
final version |
This page is maintained by Patty Feist, Lab Coordinator, Organic Chemistry Teaching Labs at CU Boulder.
Please send any comments, corrections, or suggestions to feist@colorado.edu.
CU Organic Chem Homepage: orgchem.colorado.edu
