Website image workflow reference

Reader-run methods for selecting an image, sizing it, writing useful alt text, and recording its source license.

This page is a written workflow rather than an interactive tool or API reference. Picdrome originals have separate image pages and license terms. Work with an image from a source you have independently approved, and treat that source's current license as controlling.

Who this is for

Solo founders and small-business owners choosing images without a designer, people using no-code or AI website builders, and developers designing their own metadata workflow. If your job is to put a suitable, accessible image on a page while keeping a record of its source and rights, use this reference.

The workflow

1. Write the intended section, audience, style, focal point, and text-safe-area needs before you look at any image.
2. Compare only images from approved sources against those requirements.
3. Record the source URL, license version or retrieval date, intended use, attribution rule, modification rule, and redistribution limit.
4. Read the receiving component's current documentation and export responsive sizes without enlarging a weak source.
5. Write alt text for the image's relevant content and purpose; use empty alt text for a purely decorative image.

Licensing boundary

This reference does not supply images, interpret a license, collect input, or grant rights. If the actual source license does not clearly cover the intended use, do not use the asset without qualified advice.

Guides for each step

• Choose the right image for a page — turn a page section into three answers before you look at images.
• Image sizes cheat sheet — common dimensions and aspect ratios for heroes, cards, headers, and social previews.
• How to write alt text for images — a write-and-check method for clear, useful alt text.
• Pre-publish image rights check — what to confirm about a license before an image goes live.

Frequently asked questions

Does this page provide interactive tools?

No. It provides a complete written workflow only.

Can I use the method on mobile?

Yes. Use any device that lets you inspect the image and its source's current license accurately.

Do I need an account?

No account is needed to read this workflow. Developers can use the integration design guide to model source, accessibility, provenance, and license fields in their own systems.

In plain language

Define the slot, check the actual source license, size from the receiving component's documentation, write contextual alt text, preserve provenance, and stop when rights are unclear. This reference is a written workflow. Picdrome originals are separately available under the Picdrome License.