Preparing Images for Production
If your work process begins with a Photoshop document full of assets and layout instructions, the most important decision to make is one of purpose: can a given graphic be defined as a design accent, or is it actual content?
Design accents should generally be relegated to background images, with the possible (and sometimes likely) exception of bitmapped heading type. For more information about the composition and styling of such images, consult Chapter 9.
If instead an image is identified as content, such as a photo or an
illustration of statements made in the document, it should be referenced
in an img
element, which will
declare at least the imageâs URI and alternative text content.
The alt Attribute Explained
The alt
attribute is critical to the experience of impaired visitors; it
diminishes in importance only when images are loaded into the page
and viewed exactly as
intended. In all other cases its value is displayed, which is vital to
any effort at making sense of images as contentâso an alt
value should convey meaningful
information, or none at all. An excellent approach is to treat the
alt
attribute like a caption, or as
an opportunity to label the imageâs subject if a caption already
exists.
When inline images are used for design accents that do not have a
meaningful text equivalent (i.e., all such accents except for bitmapped
heading type), their alt
values
should be set to the null string (alt=""
). In the case of text browsers and screen ...
Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.