banner image

🖼

This article is a stub. You can help the IndieWeb wiki by expanding it.

A banner image is a wide image (AKA header image or hero image), typically in an aspect ratio of 2:1 to 4:1, displayed as a backdrop at the top of a profile page or post permalink.

Why

Banner images help give a home page a distinctive, recognizable look, and can also provide a text overlay of the tagline of a site or page.

Topical banner images can be used to give a summary or an evocative context for a blog post on a specific topic.

How to

Embed a banner image near or at the top of a page, optionally stretching it using CSS to fill the full width of the page.

If your banner image has text, please make sure you mark it up alt text for that text at a minimum, and regardless, consider a brief textual description of the image as well.

How to markup

A banner image for a post should be marked up as a u-featured image inside the post h-entry. Like any image, please provide alt text for the banner image. See the #IndieWeb_Examples below for real world examples of such markup.

⛔️ DO NOT mark up as a u-photo, because a banner image is decorative content, NOT primary content, unless you are literally posting about the banner image itself (or multiple).

IndieWeb Examples

Add yourself!

Add yourself here… (see this for more details)

epoch

epoch banner image on homepage marked up as a u-featured

Chris Aldrich

Chris Aldrich on uses u-featured on an <img> tag on all articles at http://boffosocko.com with WordPress Post Thumbnails/Featured Images (retroactively since 4/25/17); also used selectively on posts since ~2/2017

Example: 2018-02-08 Chris Aldrich: A better way to subscribe to or follow sites on the open web (archived)

The Lazarus Corporation

Paul Watson uses u-featured on an <img> tag inside the h-entry on the banner images for his blog posts since September 2024:

Example: 2024-10-15 Paul Watson: Collective joy and collective ownership of ritual

IndieWeb Banners

Thanks to Chris Aldrich for these banners!

General description: artistic looking banners using a beautiful photo background and a pithy IndieWeb-related statement or call to action in white serif text on top, with "indieweb.org" in an IndieWeb logo colored (yellow, orange, red) smaller text somewhere separate from the pithy statement.