Photograph of the view from Trotternish Ridge on the Isle of Skye
Part of the HTML Reading List

Strong web page content is usually enhanced with illustrations, presented in the form of bitmaps and vector images. This section covers the basic image formats, including optimize settings for each, and how to place images on pages with a little CSS.

Goal: Source, optimize, and place images in various formats. Ensure that is maintained.

Prerequisites: Links & Lists

Total Time (Core Material): 2 hours

Core Material

  1. HTML Images
  2. alt
  3. Formats & Optimisation
  4. Compression

PNGs

Due to their features and associated file size, PNG images require special treatment:

  1. Simple Alpha Masked PNGs
  2. Alpha Masked Clouds
  3. Slash PNG File Sizes

PhotoShop Image Processing

Images always require some sort of processing; the most common (but by no means the only) application to do so is Adobe PhotoShop:

  1. PhotoShop Batch Processing
  2. Batch Processing Retina Images
  3. Make a Seamless Tiled Image
  4. Edit Image Metadata

Free Image Sources

In order to follow any of these exercises, you will obviously need images. While your own photographs and illustrations will always be preferrable, whatever their source, the images you use must always be legally acquired. The following provide useful useful resources for free, legal images:

  1. Resources For Free Legal Images
  2. More Resources
  3. 12 Fresh Sources
  4. Using Museum Collections

Optional: Learn more about Creative Commons.

Basic Image Layout

While some of the following are part of the more extensive CSS for Images reading list, they are included here to answer common questions about simple image layouts:

  1. Basic CSS for Images
  2. Float Quirk & Clear
  3. Captioning Images
  4. Production Workflow

Optional: Understand bitmap image formats at a deeper level by reading up on Lossy vs. Lossless Compression. Read up on SVG and how to use SVG Images on web pages, and encoding images with data URIs.

If you’re interested in making alpha-masked PNG images at small file sizes, read up on making basic PNGs in Photoshop, using alpha-masking to create clouds, and optimizing 32-bit PNGs

Read the first half of the WebDocs Platform article on images, with the understanding that the longdesc attribute is poorly supported across browsers. Note that the core material above has used CSS to set the width and height of images rather than than the WebDocs method of HTML attributes, as the former is generally a better and more easily adpated approach. Stop reading when you get to “Background Images With CSS”.

Read Chapter 6 of HTML & CSS by Jon Duckett, “Images”.

Read Chapter 7, “Adding Images”, from Learning Web Design by Jennifer Niederst Robbins. (Ignore the content at the end of the chapter regarding the iframe element).

Supplementary Material

Watch the Treehouse video on Images.

When You’re Done

Take the writing piece you developed in the previous sections and illustrate it with appropriately sized and placed images, ensuring that the result remains both valid and accessible.

Next, we’ll look at HTML tables, and how to use them appropriately on web pages.

Photograph of Trotternish Ridge on the Isle of Skye by Jamie Fox.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.