|
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 Clint Patterson at pattersonc@queens.edu 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.
|
|
| |
|
|
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
|
|
