|
When resizing a large image to fit on a web page, the basic steps are:
- Change the resolution of the image to 72 dpi (dots per inch) or ppi (pixels per inch).
- Assign the desired pixel dimension to the longest side (height or width). Make sure to preserve the aspect ratio (this is usually automatic) to resize the other dimension to match.
- Save the image as a .jpg file. Use 70–80% compression to reduce the file size.
- If the image is not a photograph, and contains distinct areas of one solid color with no blending between them (like many logos and icons), save it as a .gif instead (256 colors).
There is no way to make a small image larger without losing picture quality.
NOTE: If you are having difficulty re-sizing the photo you are working with, please email Eric Hill for assistance.
These boxes show suggested sizes for different types of images. You are not restricted to these dimensions... use them to imagine what different dimensions would look like.
|
|
|
Good for
clickable
icons |
|
|
|
|
100 x 100
Good size for
thumbnail
images
|
|
|
|
110 x 150
Good size for
a headshot
|
|
| |
|
|
|
|
|
|
|
|
|
Width 174 x Height 115
Appropriate size for
a Featured Story
|
|
Width 220 x Height 150
Good size for
a medium horizontal picture
|
|
|
Width 280 x Height 210
Good size for
a large horizontal picture
|
|
| |
|
|
|
|
|
|
|
|
|
Width 576 x Height 450
Full-page image
Absolute maximum image width = 576 pixels
Anything wider will distort the page layout.
Suggested maximum image height = 450 pixels
Anything taller may not fit on the viewer's screen.
|
|
| |
|
|
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
|
|
