Content images

GdImage reserves the box, draws the brand's survey grid underneath, and sets loading and decoding the way content wants them. It renders a plain img.

There is no resizing service, and that is deliberate. Ship each file at the size it will actually be displayed, in a modern format — a cover shown at 800px is a 1600px WebP, and nothing needs to derive anything at request time. For a system whose pictures are its own drawn artwork, one well-chosen file is smaller than the machinery that would produce five.

A site with a real photo library should still run a pipeline. srcset and sizes pass straight through, so its output lands here without changing any markup.

Nuxt gives two directories and they are not interchangeable. Pick by asking one question: does a bundler know this path at build time?

alt is required on GdImage. Not as strictness for its own sake: an image without it is announced by its filename, and there is no way to tell a decorative image from a forgotten one unless somebody types the difference. Decorative? Pass alt="" — an empty string is an assertion.

• alt replaces the image. Read only when the picture cannot be seen. It should leave that reader knowing what a sighted reader knows.
• caption accompanies it. Read by everyone, including the person looking straight at it — so it adds what the picture cannot say for itself.
• credit is metadata. Attribution and licence, set quieter, and the field an audit greps for.

Putting the caption in alt makes a screen-reader user hear one sentence twice and never learn what the image showed. Leaving alt empty because the caption explains it makes the image disappear for them entirely.

ratio reserves the box before a byte arrives, so text below never jumps when the image lands. That is most of Cumulative Layout Shift on a content page, and it is one prop.

The second reason is alignment. A row of cards whose images disagree about shape will never line up, and no grid CSS fixes it — the disagreement is inside the card. Choose one ratio for a collection and crop to it.

Everything is lazy by default. The one image above the fold — usually an article's hero, usually the Largest Contentful Paint element — takes priority, which loads it eagerly at high fetch priority and preloads it.

Marking several defeats the purpose. Priority is an ordering, and an ordering in which everything comes first is not one: the browser opens every connection at once and arrives later at the image that mattered.

The system ships no photography, and a drawn panel is often the more honest answer anyway. GdCardMedia is the media zone for that case: the survey grid, a tint, and one glyph on a plaque.

GdImage falls back to the same texture. Before the image paints it is the ground; if the image never arrives it stays, and the picture glyph appears on the plaque. A reader sees a picture that is missing rather than a page that is broken.