Quick Start

IMAGE Framework Checklist:
□ Authentic vs stock decision
□ Mood board → brief
□ Composition for text overlay
□ Message amplification check
□ Format optimization
□ Alt text strategy

Workflow

Stock Photo Red Flags:

• Generic handshakes, pointing at laptops
• Perfect diversity casting that looks staged
• Overly polished office environments
• Models looking directly at camera with forced smiles

Choose Authentic When:

• Real customer testimonials/case studies
• Product demonstrations
• Company culture content
• Technical/process documentation

Progress:

• Collect 15-20 reference images
• Identify 3 core mood descriptors (e.g., "confident," "innovative," "accessible")
• Note lighting patterns (soft/hard, warm/cool)
• Document color palette (3-5 hex codes)
• Write brief: "Capture [mood] feeling through [lighting] with [composition] for [audience]"

Text Overlay Zones:

• Left third or right third for headlines
• Bottom third for CTAs
• Avoid center placement over faces
• Maintain 40% negative space minimum

Breathing Room Guidelines:

• 20% margin from image edges
• No critical elements in crop danger zones
• Mobile-first composition (works at 375px width)

Rule: Image should show the HOW or WHO, not repeat the WHAT.

Web Delivery:

• WebP primary, JPEG fallback
• 1200px width maximum
• 80% quality for photography
• 90% quality for graphics with text

Compression Targets:

• Hero images: <200KB
• Content images: <100KB
• Thumbnails: <50KB

Template: [Action/emotion] [subject] [context] [relevant keywords]

Examples:

• ❌ "Business meeting"
• ✅ "Confident marketing team reviewing analytics dashboard during quarterly planning session"

Examples

Example 1: SaaS Landing Page Input: Need hero image for "Streamline Your Workflow" headline Output:

• Image: Team member organizing digital kanban board, shot from over shoulder
• Composition: Subject right third, board left third for headline overlay
• Alt text: "Project manager organizing workflow on digital kanban board with team collaboration tools"

Example 2: Case Study Input: Customer success story about 40% efficiency gain Output:

• Image: Real customer at their workspace, candid moment reviewing results
• Composition: Environmental portrait with workspace context
• Alt text: "Operations director analyzing improved efficiency metrics in modern office setting"

Best Practices

Brand Consistency:

• Maintain 70/30 ratio authentic/stock across campaigns
• Establish lighting mood (warm/professional vs cool/technical)
• Use consistent depth of field approach

Technical Standards:

• Test all images at mobile sizes first
• Validate WebP support with progressive enhancement
• Include EXIF data removal in workflow

Team Collaboration:

• Brief photographers with mood boards, not just shot lists
• Create shared library with approved image treatments
• Document successful image-copy combinations for reuse

Common Pitfalls

• Mood whiplash: Mixing warm authentic photos with cold stock imagery
• Optimization afterthought: Adding compression as final step instead of shooting for web specs
• Alt text keyword stuffing: "Business professional team meeting collaboration software dashboard analytics"
• Center-heavy composition: Forgetting mobile crop behavior
• Literal interpretation: Showing exactly what the headline says instead of supporting it

Team Rubric Scoring (1-5 scale)

Authenticity: Does it feel real and on-brand? Composition: Works with text overlay and mobile crop? Message: Amplifies rather than repeats copy? Technical: Optimized format and file size? Accessibility: Descriptive, SEO-friendly alt text?

Minimum passing score: 20/25