Decorative Images: Fixing Decorative vs Content Image Confusion

Why ornamental images cause problems twice

A decorative image is one that a visitor would not miss if it vanished. It sets a tone or fills space, but it carries no fact, instruction or action. The trouble starts when the markup does not say so. An <img> element with no alt attribute, or with a meaningless value such as alt="image" or alt="bg-swirl-2", gives a screen reader something to read aloud. Someone listening to your page hears a string of noise between the headings they actually wanted.

The second problem is less often discussed. Every <img> in the HTML is found by the browser's preload scanner as soon as the markup arrives, and it joins the queue of downloads alongside your product photos, your fonts and your scripts. A page with a dozen ornamental images in the first screen is asking the browser to spend bandwidth on flourishes before it has finished the picture that actually sells something. On a slow mobile connection that competition is real.

So the fix has two halves that support each other:

• Tell assistive technology to skip it. An empty alt="" on an image element, or aria-hidden="true" on an inline SVG, removes the item from what a screen reader announces.
• Make it cheaper or remove the file entirely. Many ornaments can be drawn with CSS in a few bytes, moved into a stylesheet background that loads later, or turned into a small SVG.

The writing of good descriptions for meaningful images is a separate job, covered in our alt text guide. This page stays with the other side of the line: things that should say nothing and weigh little.

Deciding which side of the line an image is on

The same picture can be decorative on one page and essential on another. A photograph of a sunlit kitchen is ornament on a plumber's contact page and the whole point on a kitchen fitter's portfolio. Judge each image in its context, not by what it depicts.

When in doubt, ask whether a sighted visitor would complain if the image were replaced by a blank space the same size. If the honest answer is "no, it just looks nicer", it is decorative.

The fix, step by step

Before and after markup

The examples below come from a fictional joinery firm, Oakline Joinery, whose home page had grown a collection of ornaments over several redesigns.

A divider graphic

<!-- Before: a 14 KB PNG with a meaningless alt -->
<img src="/img/divider-gold.png" alt="divider">

<!-- After: no file, no request, nothing announced -->
<hr class="rule-gold">

.rule-gold {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b8893b, transparent);
  margin: 2rem auto;
  max-width: 12rem;
}

A styled <hr> is a thematic break, which some screen readers announce as a separator. If the line is purely ornamental and not a change of topic, use a div or a ::before pseudo-element instead.

A textured section background

<!-- Before: absolutely positioned img behind the text -->
<section class="about">
  <img src="/img/wood-grain.jpg" alt="wood grain" class="about-bg">
  <h2>Made in our Derbyshire workshop</h2>
</section>

<!-- After: CSS background with modern formats -->
<section class="about">
  <h2>Made in our Derbyshire workshop</h2>
</section>

.about {
  background-color: #6b4a2b;
  background-image: url("/img/wood-grain-1600.jpg");
  background-image: image-set(
    url("/img/wood-grain-1600.avif") type("image/avif"),
    url("/img/wood-grain-1600.webp") type("image/webp"),
    url("/img/wood-grain-1600.jpg") type("image/jpeg"));
  background-size: cover;
}

The plain background-image line comes first as a fallback for browsers that do not understand image-set() with type(). The solid background-color keeps the heading readable while the texture loads or if it fails.

An icon next to a label

<a href="tel:+441234567890" class="call">
  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24">
    <use href="/img/icons.svg#phone"></use>
  </svg>
  Call the workshop
</a>

An icon that is the whole button

<button type="button" class="menu-toggle" aria-label="Open menu">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
    <use href="/img/icons.svg#menu"></use>
  </svg>
</button>

In the last example the SVG itself is still hidden, but the button carries its name with aria-label. The icon is decorative; the control is not.

Which marker to use, and which to avoid

There are several ways to tell assistive technology to ignore something. They are not interchangeable, and stacking them rarely helps.

• alt="" on an img. The standard, best-supported way. It removes the image from the accessibility tree. Do not also add role="presentation"; the empty alt already does that job.
• aria-hidden="true" on an svg or wrapper. Right for inline SVG and icon font elements. It hides the element and everything inside it, so never put it on anything that contains a link, a button or text a visitor needs.
• role="presentation" or role="none". Useful on an SVG in some older setups, but not needed on an img with empty alt.
• CSS backgrounds and pseudo-elements. Not exposed to screen readers at all, which is exactly what you want for ornaments. The catch is that they are also invisible to image search, so only use them for things you do not want indexed.

Things to avoid:

• Leaving out the alt attribute. An img with no alt at all is treated as unlabelled, and many screen readers fall back to reading the file name, such as "swirl underscore final underscore v3 dot png".
• A space between the quotes. alt=" " is not the same as alt="" and some assistive technology treats it as a label.
• A title attribute on a decorative image. It produces a tooltip and may be read as the image's name, undoing the empty alt.
• Hiding focusable things. aria-hidden on an element that can receive keyboard focus creates a control that keyboard users can reach but screen reader users cannot identify.

The performance side: what moving decoration changes

Moving an ornament from an img to a CSS background does more than silence it. It changes when and whether the file is downloaded.

• Later discovery. The browser finds CSS backgrounds only after it has downloaded and parsed the stylesheet and worked out which elements are on screen. For decoration that is a benefit, because content images in the HTML get a head start.
• Not fetched when hidden. A background on an element set to display: none, for instance a desktop-only flourish hidden on phones, is generally not requested at all. A hidden img element in the HTML usually is downloaded anyway unless it is lazy-loaded.
• No native lazy loading. loading="lazy" only works on img and iframe. Backgrounds far down a long page load when their element's styles apply. If a large decorative background sits well below the first screen, apply its class with a small IntersectionObserver script, or simply make the file smaller.

Decorative images also tend to be the least carefully exported files on a site, because nobody checks them. A background texture saved as a 3 MB PNG straight from a design tool is common. Once you have decided an image is ornament, it is worth being ruthless: lower quality settings and heavy blur often go unnoticed on a texture that sits behind text.

Where decorative images come from on common platforms

WordPress

In the block editor, the Image block's alternative text field carries a hint to leave it empty if the image is decorative, and an empty field outputs alt="". The Cover block renders its background image as an img with empty alt by default, which is correct for decoration but means it is still fetched early. Theme ornaments are usually in the theme's CSS or template parts, so a child theme is the safe place to change them.

Shopify

Themes built on Online Store 2.0 often expose decorative images as section settings. The image_tag Liquid filter accepts an alt parameter, so a theme developer can pass an empty value for section backgrounds. Check apps too: badge and trust-seal apps frequently inject small images with generic alt values.

Page builders

Elementor, Divi and similar builders let you set images either as an image widget or as a section background. Prefer the background option for ornaments, and check the output, because some builders add wrapper images or placeholder GIFs of their own.

React and other frameworks

Icon libraries such as those used with React usually render inline SVG. Most set aria-hidden="true" by default when no title is passed, but confirm it in the rendered HTML rather than assuming. In JSX, write alt="" explicitly; omitting the prop produces an image with no alt attribute, and linters such as eslint-plugin-jsx-a11y will flag it.

Edge cases

• Images of text used as decoration. A heading rendered as a picture of stylised lettering is not decorative, because it carries words. Replace it with real text and a web font, or give it alt text that matches the words exactly.
• Adjacent image and text link to the same page. On card layouts where the photo and the title both link to the same article, wrap both in one link, or give the image link alt="" with tabindex="-1" and aria-hidden="true" on the duplicate link so keyboard and screen reader users meet it once.
• Emoji used as bullets or decoration. Screen readers read emoji names aloud. Wrap decorative emoji in a span with aria-hidden="true".
• Animated decorative images. A looping GIF behind a banner is heavy and can distract. Replace it with a short muted video or a CSS animation, and respect prefers-reduced-motion.
• Images you want in Google Images. If a photo is decorative on the page but you still want it discoverable in image search, keep it as an img. CSS backgrounds are not indexed as images.

Keeping decoration light and silent

• Put ornaments in the design system. Define dividers, textures and icon styles once in CSS or as components, so editors never upload them as images.
• Give editors a decorative switch. Where your CMS allows it, make "decorative" an explicit choice when inserting an image, rather than leaving an empty alt field that could mean either "forgot" or "decorative".
• Use one icon sprite. Keep all interface icons in a single SVG sprite with aria-hidden applied by the component.
• Lint the templates. Accessibility linters and automated checks catch missing alt attributes and focusable hidden elements before release.
• Re-audit after redesigns. Ornaments multiply every time a page is redesigned. Run the Image Optimisation audit on your key templates after each change.