Images

Need a photo? The Marketing Communications department (x4390, pccpubs@pcc.edu) has a collection of professionally taken photographs of the campuses and students available for college publications, including web sites.

Guidelines

  • Type - Images to be displayed on the web site should be saved in .jpg or .gif format. Before uploading, they should be compressed to the smallest possible size for the appropriate quality. For Jpeg images, note that there is a cut-off point where the quality dramatically degrades.

  • Size - Images must be limited to a width of 500px, or less.

  • Alternate Text - Meaningful images must have a text equivalent, namely an alt attribute. Alt text should be brief but descriptive. If the image requires more than a single phrase to describe use a separate text file linked to the image through the longdesc attribute. Purely decorative images should contain an empty alt value (e.g. alt="").

  • See Images and Documents under Directory Structure for information about where to store images.

Available Styles

  • Alignment/Border - There are four main classes that can be applied to images to control the alignment and border. These classed should be used instead of aligning the image manually.

    • imgleft: Floats the image left and pads it from the surrounding text. 1px black border is also applied.
    • imgright: Floats the image right and pads it from the surrounding text. 1px black border is also applied.
    • imgcenter: Places the image in the center, pushing text above and below. 1px black border is also applied.
    • graphic: Removes black border when used in conjunction with any of the above classes (ie. class="imgright graphic").
  • Caption - The caption classes act like the image positioning classes above, but allow text to be floated below an image. They include: caption-imgleft, caption-imgright and caption-imgcenter. In order to use one. The image and corresponding text should be surrounded by a <div> as shown below. View an example of this code in action.

    <div class="caption-imgleft"><img src="images/sample-image.gif" alt="" width="140" height="140">
          <p>caption-imgleft</p>
    </div>
    Note: If the caption is significantly longer then the image width, the size of the divide can be set to make sure that the text is properly wrapped.