Web Design at Georgetown CollegeBeta

Image Basics

Things to Learn

• Where to put image files for use on your site
• What the dimensions of the images on your site should be
• How to use images for your site background
• How to place images in your content that are centered, floating, and used as a header
• How to use the <figure> and <figcaption> elements to create and style captions for your images

Setup and Editing

• Create a folder in your project for images
• Image editing basics
  • Save the largest version of an image you can find
    • Header and content images should be at least as big as your container
    • Background images should be tiling or very large (1,600 pixels wide or larger)
  • Basic editing and exporting
    • YouTube videos or free trial at Lynda.com
  • Rename your images - lowercase, no spaces, etc.
  • Image formats
    • JPG - photographs
    • PNG - images with transparency

Background Images

• CSS
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background shorthand property
• Useful tiling backgrounds at Subtle Patterns
• High resolution images at Unsplash

Images in Content

• <img src="http://address.com/file.png" alt="Alternate Text"/>

• Centering
• Floating
  • float property with margin and padding as needed
• Header images in CSS

Captions

If you’d like your image to have a caption, use a figure element:

<figure>  
    <img src="image.jpg" alt="Description of picture">  
    <figcaption>Caption for picture</figcaption>  
</figure>

You may wish to add a class to your figure element for easy styling:

<figure class="example">  
    <img src="image.jpg" alt="Description of picture">  
    <figcaption>Caption for picture</figcaption>  
</figure>

You can then style your image and caption using .example, .example img, and .example figcaption in your stylesheet.