Image Size Considerations

File size is a critical issue for Web publication.

Web usability studies show that Web users will not wait more than a few seconds for a page to download.
Large images slow down that process, especially on slower Internet connections.
To develop images for the Web consider the trade off between image size and image quality.
Photoshop does an excellent job of optimizing images for the Web

Ways to Reduce Image Size

There are ways to lower file size:

Reduce the image dimensions
Crop the unnecessary part of the image
Reduce the number of colors
Blur the background
Select the important part of the image before you compress it & Photoshop will optimize the selected part

top

Cropping example

example

In the eagle image above, the image is being displayed at 66.7% of its actual dimensions. Photoshop opened Eagle.psd at this relative viewing size so that it could display the entire image in the document window without using scrollbars.

top

Use Zoom Tool to view true image dimensions

If we want to see the true dimensions of the image visually, use the Zoom Tool to make it larger.

Open an image
Click the Zoom Tool, which looks like a little magnifying class, on the lower right of the Toolbar.
In the Zoom Tool Options Bar.
1. Click the Actual Pixels button to display the image you would see on the Web.
2. Click the Print Size button to display the image as it would look if printed.
3. If the image is 72 dpi, the Actual Pixels image and the Print Size image are the same
4. If the DPI is higher (say 150), the Actual Pixels image displays larger than the print image, which uses the height and width dimensions and displays more pixels per inch.

top

To reduce image size

Click Image-->Image Size to open up the Image Size dialog box.

example

top

The Image Size dialog box contains information about image size.

The first set of Pixel Dimensions defines
- image size as 408K (kilobytes)
- pixel width and height of the image
The second set of dimensions under Document Size is displayed in inches.
- default centimeters (cm) measurement can be changed to inches
To change height & width dimensions for the Web:
- Resolution should be 72 pixels/inch (PPI or DPI)
- Constrain Proportions checkbox means that if the Width is changed the Height changes proportionately
  - Constrain Proportions should be checked when you are changing Height or Width parameters, unless you want to distort the image.
  - The little chain links to the right of the height and width dimensions mean proportions are constrained.

Increase resolution

To increase resolution of an image from 72 dpi to150 dpi for printing: for better quality images that more dots of ink can provide,

Be sure Constrain Proportions is checked so your image maintains the same proportions
Uncheck the Resample Image checkbox, so that Photoshop will reduce the Width and Height of the image proportionately as it increases the dpi.
If Photoshop resamples the image, it will add pixels that will decrease the image quality for printing
To increase dimensions of an image without changing dpi, do it in 10% increments for better results.

The Resample Image dropdown list has interpolationoptions
When you decrease image size, Photoshop has to figure out which pixels to delete from the image.
When you increase image size, which is always risky, Photoshop has to create pixels.
The interpolation method determines how that is done.
- Nearest Neighbor is the fastest but least precise method,
- Blinear is a medium-quality method
- Bicubic is the slowest but best quality, and therefore preferred method

Warning: Resampling an image deletes pixels and information from the image, which you can never get back again. It’s always a good idea to save a version of your image with a different name before you resize it, just in case you later want to reuse the unresized image.

top