Images for Websites and Marketing

Preparing images for the web

• Export WebP or AVIF for photos, PNG only when you need transparency or sharp UI graphics, SVG for logos and icons.
• Resize to the largest size actually displayed (often 1600–2400 px wide for heroes), and provide smaller versions with srcset.
• Compress: aim for heroes under a few hundred KB.
• Always set width and height attributes to prevent layout shift.

Alt text

Describe what the image shows and why it is there: alt="Barista pouring latte art in a sunny café". Decorative backgrounds get alt="". AI tools can draft alt text, but review it.

Brand consistency

Create a visual style guide for a client: palette, lighting, composition rules and a base prompt fragment. Use it for every generated image so the site looks designed, not assembled.

Social media sets

Produce matching sizes for each platform from one concept, with text added in a design tool. Batch similar images in one session to keep the look consistent.

Disclosure and honesty

• Do not present AI images as photos of real events, people or places they do not show.
• Product listings must represent the actual product accurately.
• Follow platform rules on labelling AI-generated content, especially in advertising.

Client workflow

1. Agree the style guide and usage rights in writing.
2. Present options; iterate on chosen directions.
3. Deliver optimised web versions plus high-resolution originals.
4. Record which tool and plan generated each final image (for licensing questions later).

Exercise

Create a style guide and a set of ten images for a fictional bakery website: hero, product scenes, social posts. Optimise them for the web with srcset, write alt text, and measure the page's LCP before and after optimisation.

Check yourself

• Which formats suit photos, logos and transparent graphics?
• What makes good alt text?
• Why record which tool generated each image?