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 accessibility is maintained.
Prerequisites: Links & Lists
Total Time (Core Material): 2 hours
Due to their features and associated file size, PNG images require special treatment:
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:
- PhotoShop Batch Processing
- Batch Processing Retina Images
- Make a Seamless Tiled Image
- 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:
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:
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
Watch the Treehouse video on Images.
When You’re Done
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.