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
Core Material
PNGs
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:
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
Recommended Reading
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.