Images

Images

  • Images are placed in a <img>

  • Empty element meaning there is no closing tag


  <img src="images/team_hands" alt="a group of people touching hands in a star formation" title="teamwork is awesome">


Image Attributes

  • src - Tells browser where to find the image (may relative or absolute path)

  • alt - Provides description of image for people who cannot see the image (accessibility)

  • title - Used to provide additional information about the image. Most browsers will display this information in a tooltip.

Image File Formats

  • .png - Supports transparency and semi-transparency, great for logos, icons, and repeating background tiles. Almost always preferable to a gif.

  • .gif - Can have basic transparency, typically a png is used instead

  • .jpeg - No transparency, can be stored at different compression levels with varying amounts of “lossy-ness”, typically the best format for photos


Image example

JS Bin on jsbin.com