LP6 Style Guide: Images

Note: Suggest Brand Imagery guidance here. This might be a "Creative" joint effort abou what kind, color, subject, etc. of imagery suits each brand.

CSS Classes

Images size and positioning can be controlled by applying a class to the <img> element. These classes also make the image a block element so that sibling margins are collapsed (meaning only the largest margin applies when two margins "touch").

Full-Size

Images can expand to the full-width of their parent container by applying the class image-full to the <img> element.

Max-Size

Images can expand to their native width but not largers (and otherwise fill the width of their parent container) by applying the class image-max to the <img> element.

Faster page loading means more page views, a pleasant user experience, and better search ranking. Image optimization/compression can help and should be automated. It’s easy to forget and best practices change. There are a variety of image optimization programs out there. At the very least, we recommend using JPEG compression around 75%.

ShortPixel

ShortPixel is a web-based image optimizer that supports lossy, glossy, and lossless compression. We recommend using Glossy compression for an optimal quality/performance balance. ShortPixel's live side-by-side preview function lets you see the results of their compression easily: smaller filesize images are no different in quality from the original.

Most people know that you need to provide alternative text for images. There is much more to the accessibility of an image than just its alt text. There are many additional accessibility principles and techniques regarding images.

Alt Text

To meet basic accessibility in HTML, add alt text to the <img> element using the alt attribute, as in the following example:

				
	<img src="dolphins.png" alt="So long, and thanks for all the fish!">
				
			

Understanding what makes good alt text is subtle and important. It should be brief: less than 250 characters. It should convey the purpose of the image, not describe the image. When writing alt text, consider what details the author thought was most important. The same image can have quite different alt text depending on its context.

Long Description

Some images are so complex that more information may be needed. In such a case, we recommend including alt text which refers blind users to a text based description elsewhere which is visible to everyone. Note: Do not use longdesc in the <img> itself.

Hiding Decorative Images from Assistive Technology

Images that have no function or information content whatsoever are decorative images. These images can include stock photos included just for “eye candy.” Such images should be hidden from assistive technologies.

Decorative images can be hidden from screen readers in multiple ways:

• using a null alt attribute
• using ARIA role="presentation"
• using a CSS background image

Images of Text

Avoid images of text. Images of text are best reserved when a particular visual presentation is essential, such as a logo (and use SVGs whenever possible). If the image is of a small amount of text, the alt text must match the text in the image exactly. If the image contains a considerable amount of text, the text should also be elsewhere on the page.

SVG Accessibility

Implementing images as SVGs can solve accessibility challenges related to pixelated images and zooming. However, ensuring that SVG images are accessible requires some extra care. SVG images implemented as <img> tags should also include the role="image" attribute. SVG images implemented using the <svg> element should include the <title> and <desc>.

References for SVG accessibility:

• The <title> element (Mozilla)
• The <desc> element (Mozilla)