Pixels, resolution, compression. What are these and how do they affect the size of an image? In this article, you'll get an introduction to these graphics terms and concepts, and then use Adobe Photoshop CS2 (version 9.0) for Windows® to resize an image for display on a web page or to send via email.
In this article, you'll learn how to use Adobe Photoshop CS2 (version 9.0) to resize an image that's intended to be viewed onscreen.
In this article, you'll learn how to use Photoshop CS2 (version 9.0) to resize an image that's intended to be viewed onscreen.
The quality of an image displayed onscreen depends on the display resolution of the monitor, which has a fixed number of pixels for each monitor resolution setting. Because each pixel holds the RGB color data, an image doesn't require as much resolution for display on a monitor as it does for print. An image produced by a printer is created by dots of ink in four colors. It takes a lot more dots closer together to get the same quality image on paper as on a monitor. Therefore, an image for display onscreen can be at a lower resolution and still have good quality.
There is a relationship between file size and resolution. A lower resolution results in a smaller file size. Therefore, one way to accomplish a smaller file size is to decrease the resolution.
In this example, we'll use an image taken from a digital camera. First, let's learn how to find the information for a digital camera image. You should use your own images as you follow the examples.
For a quick look at the physical dimensions of the image, we'll view the rulers at the top and left sides of the image. The default unit of the ruler is in inches, which you can change in Preferences.
Cropping an image changes the physical dimensions and deletes image pixels.
You may be surprised that the resolution of the digital camera image is not very high, even though the dimensions of the image are large. The large size gives you a lot of pixel image data, which compensates for the lower resolution. In comparison, an image from a scanner is generally high in resolution.
Because it's hard to visualize what size to make an image for the screen, let's see how to estimate the size to use as a starting point. First, you need to start with the monitor resolution display setting. Because everyone viewing the image may not have the same monitor resolution, you need to decide on a standard to use. The standard resolution since 2003 has been 1024 x 768.
With a monitor setting of 1024 x 768 and the browser window at full screen, the width would be a little less than 1024 pixels because of the scroll bars. If the image will take up one-half of the width of a page, the image size will be 512 pixels (1024 divided by 2). You could also use 500 pixels to make it easier to remember. If the image will take up one-fourth of the width of a page, the image size will be 256 pixels (1024 divided by 4). Because you keep the proportion of the image the same, you need to decide only on the width.
You can use the same method to estimate the image size for an onscreen slide show or to use the image in PowerPoint. In this case, be sure to estimate the size based on the computer that will show the presentation. If the slide show will be displayed on a multimedia big screen or on a projector, you may need to change both dimensions to fit the aspect ratio of the projection system.
To resize an image for display on a Web page or to send via e-mail:
For a smaller file size you can change the resolution to 72 ppi, and adjust the pixel dimensions accordingly. Don't be concerned about the change in the document size because this section relates only to the image size when it's printed.
Now your image is resized for display on a Web page or to send via e-mail. Be sure to save a copy of the file a file format that's compatible with your output. For Web page images or for sending via e-mail, JPEG is usually the best format.
