How Should I Treat Decorative Images on My Website from an SEO Standpoint?

Decorative images don’t add information to a page's content and are used purely for aesthetic purposes. These images are not essential for understanding the content but are often used to enhance the visual appeal or layout of a website.

Example of Decorative Images

Imagine a blog post about the best indoor plants for air purification. The post includes detailed descriptions and images of various plants like snake plants and spider plants. Additionally, there might be a background image of leaves or a subtle plant-themed graphic in the page corners. These background images or graphics are decorative because they don’t provide any additional information about the plants—they simply make the page look more visually appealing.

Example from the Rapid Fire Website

Accessibility and SEO Considerations

From an accessibility standpoint, it’s important to give decorative images null (empty) alt text (alt="") so that they are ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from the surrounding text.

In Webflow, there is a setting that allows you to apply this empty alt text. Always use it for decorative images.

SEO Audit Complications

One complication with decorative images is that some SEO audits, like those generated by Ahrefs, may flag these images as issues because they are missing alt text. After contacting support for clarification, they confirmed that they don’t differentiate decorative images from images missing alt text, so they suggested disregarding the notification.

Tips for Handling Decorative Images

1. ‍Optimize File Size: Make sure decorative images are optimized for file size to improve page load times, which is important for both user experience and SEO.
2. ‍Use CSS Background Images: For purely decorative elements, consider using CSS background images rather than <img> tags. This separates the visual styling from the content and makes it clear that the image is not part of the main content.
3. ‍Lazy Loading: Implement lazy loading for decorative images so they only load when the user scrolls near them. This can enhance page load speed.
4. ‍Accessibility Considerations: Ensure that removing or ignoring decorative images doesn't compromise your website's accessibility.

By following these guidelines, you can maintain a good balance between aesthetics and SEO performance.