GitHub README banner with light and dark versions from Sume

Generate two 3:1 banners with a 1536x512 custom size, commit them to the repo, and switch them with a picture element and prefers-color-scheme in the README.

5 min readSume
All posts

Generate two banners, commit them to the repository, and point a <picture> element at them. GitHub's formatting guide says GitHub supports the <picture> element, mentions prefers-color-scheme for light and dark variants, and prefers relative paths for images that live in the same repository, because they work across branches and in clones.

That second point decides the Sume side. Do not paste a hosted data[0].url into a README. Download the file and commit it, so the banner is part of the repo history and survives any change to where the generator hosts files.

What size makes a wide banner?

OpenAI's image guide gives the custom-size rules for GPT Image 2.5: both edges multiples of 16, a longest edge of 3840 or less, a ratio of at most 3:1, and a pixel area between 655,360 and 8,294,400. 1536x512 passes all four: it is 3:1, 786,432 pixels, and both edges divide by 16.

Sume's image API takes custom pixels on image_size as {width, height}, not on size, which accepts tier names only. image_size has priority over aspect_ratio, so send one or the other.

The two requests

Send the light request, save the result as docs/banner-light.png, then send the dark one and save docs/banner-dark.png. Keeping the subject and layout wording the same in both prompts gives you a matching pair; change only the palette words.

{
  "model": "openai/gpt-image-2.5",
  "prompt": "wide README banner, abstract flowing lines, pale paper background, space on the left for a title",
  "image_size": { "width": 1536, "height": 512 },
  "quality": "medium",
  "output_format": "png"
}

The README markup

Use relative paths, as GitHub recommends, and give the image an alt text.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="docs/banner-dark.png">
  <img alt="Project banner" src="docs/banner-light.png" width="100%">
</picture>

Text rendering is a weak spot in any image model, and OpenAI's guide says text placement and layout can be an issue, so leave the project name out of the prompt and write it as Markdown below the banner. If a call returns 202 instead of 200, the banner comes from the job result; the jobs guide shows the polling steps.

Check the result before you commit it. A banner is displayed at a small width on a phone, so view the PNG at about 400 pixels wide and make sure the left third, where your own title text will sit, is quiet enough to read over. If the dark version drifts in composition, pass the light banner back as an input_references entry with a public HTTPS URL and ask only for a palette change; GPT Image 2.5 accepts up to 16 references in the Sume API.

Sources

Related posts

More in Use cases

All Use cases posts

Written by Sume