Preparing Images For The Web

To ensure that your website loads quickly and that images look their best, you will want to prepare your images before putting them on your website. A software program called an image editor will allow you to optimize and save images. 

Choosing an Image Editor

There are countless software image editors available, many of which are free to use. Some can be used from a web browser and others can be installed onto your computer.

Web-based

If you have an internet connection, you can edit images with any of these programs right in your browser window:

Software-based

After installing any of of these programs, you can run them from your local computer:

*If you use a computer with Windows operating system, it is likely that you already have MS Paint installed. To launch, click Start > All Programs > Accessories > Paint

Setting Image Properties

Regardless of which image editor you choose, the most important task is to appropriately scale your images:

• Dimensions: width and height (in pixels)

  • An image should be saved at the dimensions in which it will be used.

You should also consider setting these properties:

• Colorspace: RGB

  • A computer screen, which shows colors based on Red, Green, and Blue, will show the colors as close as possible to what was intended.

• Pixels per inch (ppi, dpi): 72 or 96

  • A computer screen will display these pixel resolutions clearly without any degradation of quality.

Scaling Images for use in Slideshows

Images within the slideshow widget will not scale to or flow over the boundaries of the slideshow, so it is important to scale your images to the exact size of the slideshow.

1. Create a new image in the dimensions of your slideshow.

   1. Slideshow dimensions are measured in pixels. For example, a slideshow could measure 960 pixels (width) by 300 pixels (height).

   2. A slideshow can be any size.

   3. If you have a sitewide slideshow that was set up with your site, it will already have specific dimensions.

2. Insert your photo into the image.

3. Scale and adjust your photo to fit within the image frame. 

4. Save the image to your computer as a jpg.

Advanced Techniques
 

If you would like to keep transparency in your image, save it as a png.

If your image is made of solid shapes (and is not photographic), save it as a gif.