• Dean
• News
• Events
• Academics
  • Architecture
  • Landscape Architecture
  • Urban Planning & Design
  • Advanced Studies Program

• Admissions
• Library
• Research & Publications
• Professional Development
  • Executive Education
  • Loeb Fellowship
  • Career Discovery

• People
• Gallery
• Alumni
• Inside the GSD
  • Dean's Office
  • Student Services
  • Registrar
  • Finance Office
  • Computer Resources
  • Fabrication Laboratory
  • Building Services
  • Human Resources
  • Internal Publications

Images

Image Folders

All images should be stored in a folder called "images" near the page that uses them. This means that there is probably a folder called "images" inside every folder that contains html on the whole site. These image folders should contain only images that are being used for pages on the website. Try not to store your originals in the webtree.

Image Types

The only allowable file types on the GSD website are:

	File extension	# Colors	Tranparency background?	Uses
PNG	.png	2 - 256 or millions	Yes - one level or eight levels	photos, graphics or illustrations
JPG	.jpg .jpeg .jpe	up to millions	No	photos
GIF	.gif	2 - 256	Yes - one level	graphics or illustrations

Image Size

Images should be prepared specifically for the web, to ensure that they look good on a web page and are a size suitable for downloading. Images taken directly from a digital camera will be WAY TOO BIG for use on the web without resizing.

Image files used for websites must be 72 dpi. Any larger and the file size is needlessly large, any smaller and the image quality suffers.

Images used on the website should also be of image mode rbg. This mode is optimized to be viewed on monitors, and some browsers will not support images of another mode. The mode can easily be changed though photoshop.

Image size (physical size, not file size) is measured in pixels. The content area of a typical GSD web page, shown here in green highlight, is at maximum about 550 pixels wide.

Your finished images should be smaller than 500 pixels wide.

Photoshopping an Image

Photoshop has an excellent feature called "save for web" that allows you to save a copy of your image that will look good while minimizing download times. Adobe has created a great quick video tutorial to show you just how to use this feature. You can download the movie directly here, or go directly to the tutorial site for this and more tips on effective photoshop use.

Placing an Image

In Dreamweaver, open the page you want the image on. Click the mouse where you want the image to appear, and select Image from the Insert menu.

Find the image within L:\webstage and click on it. IMPORTANT: Please make sure the drop-down list marked Relative To: is set to Site Root.

Click Ok to place the image.

To delete the image from the page, click the image and hit the delete key.

PLEASE NOTE

• To align an image left or right of text, you may want to try the "image classes" described on our Fonts & Styles page.
• Don't use Dreamweaver's W and H (height and width) properties to set the size of an image. It won't actually change the size or download time of your image! Let Dreamweaver fill those in automatically, and if they're wrong, adjust the photo itself in Photoshop, then insert the corrected image.