image

$2c

2. Production Approach

• Do you have existing brand assets? (Logo, colors, fonts, style guide)

• Do you need photorealistic or illustrative style?

• Is this a one-off or a template for repeated use?

3. Technical Context

• Do you have API keys for any image tools? (Gemini, Replicate/Flux, Ideogram)

• Budget constraints? (Some tools charge per image)

• Do you need the image optimized for web performance?

Choosing Your Approach

Pick the right tool for the job:

Approach

Best For

Tools

When to Use

AI Generation

Original images from text prompts

Gemini/Nano Banana, Flux, Ideogram

Blog heroes, social graphics, lifestyle scenes

AI Editing

Modify existing images

Gemini, Flux Flex

Background removal, style changes, variations

Design Tools

Templated, brand-consistent assets

Canva, Figma

Profile banners, social templates, presentations

Screenshot + Overlay

Product UI showcases

Browser screenshot + code overlay

Product mockups, feature announcements

Stock Photography

Generic business/lifestyle scenes

Unsplash, Pexels

When speed matters more than uniqueness

AI Image Generation

Generate original images from text prompts. The fastest way to create unique marketing visuals.

Model Comparison

Model

Best For

Text in Images

API

Cost

Gemini Image (Google, "Nano Banana" / Nano Banana Pro)

All-around, editing, multi-image reference, text rendering

Good

Gemini API

Check pricing

Flux (Black Forest Labs — Pro 1.1, Kontext, Dev, Schnell)

Photorealism, brand consistency, batch; Kontext for in-image editing

Limited

BFL API, Replicate, fal.ai

Check pricing

Ideogram 3.0

Typography, branded graphics, accurate text rendering

Best

Ideogram API

Check pricing

ChatGPT Images 2.0 / GPT Image (OpenAI)

General purpose, ChatGPT integration, native editing

Good

OpenAI API

Check pricing

Midjourney v7

Artistic, high-aesthetic, art-directed visuals

Improved

No official API; Discord + Web

Subscription-based

Recraft V3

Vector + brand-consistent illustrations, design assets

Strong

Recraft API

Per-credit

Stable Diffusion 3.5 / SDXL

Self-hosted, customizable, fine-tunable

Varies

Open source

Free (GPU costs)

Note: DALL-E 3 is fully deprecated. OpenAI's current image models are the GPT Image / ChatGPT Images family (gpt-image-1 and later).

When to Use Which

Need text/headlines in the image?

├── Yes → Ideogram 3.0 (best), Gemini (good), GPT Image / ChatGPT Images (decent)

└── No ↓

Need product/brand consistency across many images?

├── Yes → Flux (multi-image reference), Gemini Nano Banana Pro, Recraft V3

└── No ↓

Need to edit an existing image (in-place)?

├── Yes → Gemini (native editing), Flux Kontext, ChatGPT Images

└── No ↓

Need vector / illustrative brand assets?

├── Yes → Recraft V3 (best for vector + brand consistency), Midjourney (artistic)

└── No ↓

Need highest visual quality / art direction?

├── Yes → Flux Pro 1.1, Midjourney v7

└── No ↓

Need volume at low cost?

└── Flux Schnell, Gemini Flash, Stable Diffusion (self-hosted)

Prompting Basics

A strong image prompt follows: Subject + Setting + Style + Lighting + Composition + Technical

A laptop on a minimal white desk showing a dashboard UI,

soft directional lighting from the left, shallow depth of field,

clean commercial photography style, 16:9 aspect ratio, 4K

Common mistakes:

• Too vague ("a business image") — add specific details

• Forgetting aspect ratio — always specify dimensions

• Requesting complex text — use overlays instead for anything beyond short headlines

• No style direction — "photorealistic," "flat illustration," "3D render"

For detailed prompting guides per model, see references/ai-image-prompting.md.

Design Tools

For templated, brand-consistent work where AI generation is overkill or too unpredictable.

Canva

Best for non-designers who need polished output fast.

• Strengths: Massive template library, brand kit, Magic Resize (one design → all sizes), team collaboration

• Best for: Social graphics, presentations, email headers, simple banners

• Limitations: Less control than Figma, templates can look generic

• Agent-friendliness: Has an API but limited — better as a human-in-the-loop tool

Figma

Best for teams with design systems or pixel-perfect needs.

• Strengths: Design system components, auto layout, developer handoff, plugins

• Best for: OG images via templates, design system assets, complex layouts

• Limitations: Steeper learning curve, requires design skill

• Agent-friendliness: Has an API and MCP server for reading designs

When to Use Design Tools vs. AI Generation

Scenario

Design Tool

AI Generation

Exact brand guidelines must be followed

Yes

Maybe (with strong ref images)

Need 20 size variants of one design

Yes (Canva Magic Resize)

No

Unique hero image for a blog post

No

Yes

Recurring social media template

Yes

No

Product mockup with real UI

No (use screenshots)

No (hallucinated UI)

Abstract/creative visual

No

Yes

Marketing Image Workflows

Blog & Article Hero Images

The image at the top of every post. Sets tone, improves shareability, required for OG/social previews.

• Define the concept — what visual metaphor represents the topic?

• Generate with AI — use Flux or Gemini for photorealistic, Ideogram if text needed

• Specify 1200x630 (works for both hero and OG image) or 1920x1080 for full-width

• Optimize — compress to <200KB, serve as WebP with JPEG fallback

Prompt pattern:

[Visual metaphor for topic], clean modern style,

bright natural lighting, shallow depth of field,

professional blog header aesthetic, 1200x630

Social Media Graphics

Platform-specific images for organic posts.

Platform

Primary Size

Aspect Ratio

Notes

Twitter/X

1200x675

16:9

Large image card

LinkedIn

1200x627

1.91:1

Feed image

Instagram Feed

1080x1080

1:1

Square; 1080x1350 (4:5) also strong

Instagram Stories

1080x1920

9:16

Full screen vertical

Facebook

1200x630

1.91:1

Link share image

Workflow:

• Create the hero concept at highest resolution needed

• Use Canva Magic Resize or manual crop for platform variants

• Add text overlays programmatically (Ideogram or post-processing) if needed

• Export at platform-specific dimensions

Product Mockups &#x26; Screenshots

Showcase your product UI in context. AI models hallucinate UI — don't use them for this.

• Capture real screenshots of your product at 2x resolution

• Frame in device mockups — use browser frame, laptop, or phone templates

• Add context — callout arrows, feature labels, before/after comparisons

• Annotate with code — Hyperframes or HTML/CSS for programmatic overlays

Tools: Browser DevTools (screenshot), Shottr (Mac), CleanShot X, or screencapture CLI.

Profile &#x26; Listing Banners

Banners for profiles, directory listings, and marketplace pages. Often the first visual impression.

Platform

Size

Notes

LinkedIn personal cover

1584x396

4:1, safe zone center

LinkedIn company cover

1128x191

5.9:1; LinkedIn recommends up to 4200x700

Twitter/X header

1500x500

3:1, partially obscured by avatar

Product Hunt gallery

1270x760

5:3, up to 6 images

G2 profile

1280x720

16:9, product screenshots preferred

GitHub social preview

1280x640

2:1, shows in link cards

App Store screenshots

Varies by device

See aso skill for full specs

Google Play feature graphic

1024x500

~2:1, required for store listing

Best practices:

• Keep text minimal — banners are seen at small sizes on mobile

• Center critical content — edges get cropped differently per device

• Show the product — real UI screenshots outperform abstract graphics on directory listings

• Match your brand — use consistent colors, fonts, logo placement

• Update seasonally — stale banners signal an inactive product

Workflow:

• Pick the platform(s) and note exact dimensions

• For directories (Product Hunt, G2): use real product screenshots with light annotation

• For profiles (LinkedIn, Twitter): use brand colors + tagline + optional product shot

• Generate with Canva/Figma templates or Ideogram (if text-heavy)

• Test at actual display size — zoom out to check readability

Brand Assets

Logos, icons, and illustrations. AI generation has limits here.

Asset

AI Generation

Design Tool

Notes

Logo

Poor — inconsistent, not vector

Yes (Figma)

Always design or commission logos

App icon

Decent starting point

Yes (Figma)

Generate concepts, refine manually

Illustrations

Good for style exploration

Depends

AI for concepts, finalize in design tool

Favicons

No

Yes

Derive from logo

Social icons

No

Yes

Use platform-provided assets

Image Optimization

Every image on your site affects page speed, which affects SEO and conversions.

Format Guide

Format

Best For

Compression

Browser Support

WebP

Photos, graphics — default choice

Lossy + lossless

~96%

AVIF

Highest compression, newest

Better than WebP

~94%

JPEG

Fallback for older browsers

Lossy only

Universal

PNG

Transparency, screenshots

Lossless

Universal

SVG

Logos, icons, illustrations

Vector (scales)

Universal

Optimization Checklist

• Serve WebP with JPEG/PNG fallback (<picture> element or CDN auto-format)

• Resize to display size — don't serve 4000px images in 800px containers

• Compress — target quality 75-85% for photos, near-lossless for screenshots

• Lazy load below-the-fold images (loading="lazy")

• Set explicit dimensions — width and height attributes prevent layout shift (CLS)

• Use a CDN with auto-optimization (Cloudflare, Vercel, Imgix, Cloudinary)

• Add alt text — descriptive, keyword-relevant, not stuffed

Quick Optimization Commands

# Convert to WebP (using cwebp)

cwebp -q 80 input.png -o output.webp

# Batch convert with ImageMagick

mogrify -format webp -quality 80 *.png

# Optimize JPEG (using jpegoptim)

jpegoptim --max=80 --strip-all *.jpg

# Check image sizes on a page

curl -s https://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20

OG &#x26; Social Preview Images

The image that appears when your URL is shared on social media, Slack, Discord, etc.

Required Meta Tags

<meta property="og:image" content="https://yoursite.com/og/page-name.jpg" />

<meta property="og:image:width" content="1200" />

<meta property="og:image:height" content="630" />

<meta name="twitter:card" content="summary_large_image" />

<meta name="twitter:image" content="https://yoursite.com/og/page-name.jpg" />

Dynamic OG Images

Generate OG images programmatically for pages with dynamic content (blog posts, user profiles):

• Vercel OG (@vercel/og) — generates images at the edge using JSX

• Satori — converts HTML/CSS to SVG (powers Vercel OG)

• Cloudinary — URL-based text overlay on template images

Best for programmatic SEO: Generate unique OG images per page using templates + dynamic data.

Common Mistakes

• Using AI for product UI screenshots — models hallucinate interfaces; capture real screenshots

• Skipping image optimization — unoptimized images are the #1 page speed killer

• No OG image — shared links look broken without a preview image

• Wrong aspect ratio — always check platform specs before generating

• Text-heavy images without Ideogram — most AI models butcher text; use Ideogram or add text in post

• Generating without style direction — "photorealistic," "flat illustration," "3D render" drastically changes output

• Inconsistent brand visuals — use Flux multi-reference or design templates for consistency

• Huge images on landing pages — compress, resize, lazy load

Task-Specific Questions

• What type of image do you need? (Blog hero, social graphic, mockup, banner, brand asset)

• What platform or placement? (This determines dimensions)

• Do you have brand assets to match? (Colors, fonts, logo, style guide)

• Is this a one-off or a repeatable template?

• Do you have API keys for any image generation tools?

• Does this need to be optimized for web performance?

Related Skills

• ad-creative: For paid ad image creative, platform-specific ad specs, and scaled ad production

• video: For AI video production and programmatic video

• social: For what to post and content strategy

• cro: For image placement and conversion optimization on landing pages

• seo-audit: For image SEO (alt text, file names, lazy loading)

• aso: For app store screenshot specs and optimization

• directory-submissions: For Product Hunt gallery images and directory listing visuals