Finding the Purpose of an Image: Content Connotation vs. Aesthetic Appeal
When it comes to presenting an image on web, you can either use inline markup or use stylesheet backgrounds. It’s the purpose of an image that determines if one approach is preferred over another. Usually, an image with content connotation is referred in markup as inline image. On the other hand, images with aesthetics appeals are better off delivered using stylesheet backgrounds. From the grounds of this understanding, this article explores several conditions to determine if one approach is preferred over another.
Images with Content Connotation
Does your image have a message or is it part of your story? If the answer is yes, then inline image is probably best choice. Inline images gives you an opportunity to provide alternate but meaningful description of your image. Such alternate texts help assistive technologies and search engines to make sense of your image, which has a content connotation.
If not already, soon voice activated personal assistants, such as Siri and Alexa, will benefit from semantic coding practices. In case of images, it would read alternate text or figure caption to describe images while reading an article.
Let’s walk through couple of conditions where inline images shines through because of their content meaning.
Hero images
It has many names. A hero, a banner, a jumbotron or a billboard. They are huge; designed to draw user’s attention and used mainly during marketing campaigns. Traditionally, these images used to have embedded text in it.
If you’re dealing with such image, having an alt text with the similar message should be sufficient.
<img alt="Introducing Echo Plus $149.99, with built-in smart home hub | Now shipping" src="...">Realizing that embedded text in images have very little control over accessibility and SEO, marketing partners and designers nowadays provide images without embedded text. Instead, they advise to put plain text on top of such textless hero. Now, purpose of such heroes is somewhat shifted from content to aesthetics. So you’ve a choice.
First, position plain text message on top of inline image using absolute position and z-index technique.
Second and preferred alternative is to set textless hero as stylesheet background of the container that hosts the plain text message.
I prefer to show content in its natural order and avoid rearranging and floating content as much as possible. Hence, I lean toward second choice. It is simple and elegant. Your content and design are clearly isolated.
Infographics, charts & illustrations
If an image presents single-unit and independent piece of information, then it is an inline image candidate — a figure to be precise. A figure can be moved around or even removed without affecting main flow of the article. Avoid phrases like “refer below” and “see following” in your main content. Instead, use figure caption to keep figure and main content isolated.
Images with Aesthetic Appeal
Often, images are used to create visual interest on content than being used as content itself. Effectively, they are treated as design elements. These can be icons, abstract graphics or photographs. Unlike content, design repeats. Design elements, such as these images, should be hosted in stylesheets. This is because stylesheets allows you to craft reusable design elements. Even though different pages have different content, they can use same design element. Later, when time comes to change the design, you can update stylesheets and all pages that uses this design elements gets updated.
Hosting content in HTML and design in CSS is Holy Grail of frontend engineering. Anyone who gets this wrong, suffers the consequences.
Once again, let’s run through some scenario where stylesheet driven images steals the show.
Showpiece images
Showpiece images lives up to their reputation. They put important piece of content into the limelight. By now, most UX/UI designers know that users on web don’t read; they scan. Showpiece images are used to create focal point on important content. While user is scanning the page, showpiece images are used as a subtle signal to tell users, “Hey stop! This looks important”.
These images does not have any content connotation — other than the fact that it hosts plain text content around it. This is a case for images with aesthetic appeal and hence, serving such image through stylesheet is probably good idea.
If for some unforeseen design constraints, you need to use inline images for aesthetics, make sure you set alt tag to empty to be semantically correct.
Reusable elements: icons, abstract graphics and business rule images
Reusability of software products usually compliments maintainability. In frontend development, reusable UX/UI patterns creates centralized command system from where changes can be controlled and propagated. A well-defined and documented pattern library is every frontend developer’s dream. Although pattern libraries are not topics of our discussion, we need to talk about few instances where images are candidate to be part of reusable pattern libraries.
Icons and abstract images should be part of iconography hosted inside pattern libraries. Consistent symbolic language shared across entire team ensures that you don’t up with two like icons in two different pages of same site.
Icons are minimalistic representation of a message. If an icon is presented by itself, it has content connotation. This is reasonably acceptable when meaning of an icon is so popular that it need a little or no introduction.
When an icon is presented along with descriptive text, it is used purely as an aid to reinforce its meaning.
Whether used by itself or with accompanying content, stylesheet backgrounds should be preferred over inline images. This is because inline images offers no reusability — unless they are paired with partials, templates, or server-side technologies. Eventually, tasks of maintaining these inline images becomes tedious and error prone. In this instance, and for the greater good, maintainability and reusability benefits of stylesheets are preferred over usability benefits SEO and accessibility — although some of these benefits can still be retained by using aria attributes and screen reader texts. I know that it sounds terrible to compromise on usability. However, you gain a lot of in return: maintainability, reusability and consistency.
Finally, you may also come across business rule images.
Whether to show this image or not is determined by business rules. This category of images have content connotation and they are part of larger business component. Business components are usually defined as partials, controls or templates. If that’s a case, serving this image inline in such reusable block of markup makes more sense. If you can’t have partials or template and decide to serve such image using stylesheet background, make sure you include aria attributes and screen reader texts.
On a closing note…
In a nutshell, developer should determine whether an image has content value or it is just used as an aesthetic appeal. Teams should also prioritize their non-functional requirements of reusability, maintain ability, consistency and usability (usability derived by added SEO, accessibility and semantic coding practices). Only by putting all of these pieces together, one should determine whether to use inline markup or stylesheet background to deliver a certain category of images.
Inline image candidates:
- Images with embedded message such as heroes
- Business rule images
- Figurative images such as charts, illustrations and infographics
Stylesheet background candidates
- Reusable icons and abstract graphics
- Showpiece images
- Textless images such as bannners
Next up…
In our next article, we will talk about responsive images. We discuss about HTML5 and CSS3 technologies to help you deliver right image to right device. We will talk about SVGs.
