/iblai-marketing-image

Produce marketing images using AI generation, design tools, and optimization best practices — blog heroes, social graphics, product mockups, profile banners, brand assets.

Step 0: Context Check

Read .agents/product-marketing-context.md (or .claude/product-marketing-context.md on older setups) first. Only ask for what isn't there.

Pull this context:

1. Image Goal

• Type (blog hero, social graphic, product mockup, banner, brand asset, OG image)
• Platform/placement (website, social, directory listing, app store, email)
• Dimensions needed

2. Production Approach

• Existing brand assets? (Logo, colors, fonts, style guide)
• Photorealistic or illustrative?
• One-off or repeatable template?

3. Technical Context

• API keys for image tools? (Gemini, Replicate/Flux, Ideogram)
• Budget constraints? (Some tools charge per image.)
• Optimize for web performance?

Choosing Your Approach

AI Image Generation

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

Model Comparison

| Model | Best For | Text in Images | API | Cost | |-------|----------|:-:|-----|------| | Gemini Image (Google) | All-around, editing, text rendering | Good | Gemini API | Check pricing | | Flux (Black Forest Labs) | Photorealism, brand consistency, batch | Limited | BFL API, Replicate, fal.ai | Check pricing | | Ideogram | Typography, branded graphics | Best | Ideogram API | Check pricing | | GPT Image (OpenAI) | General purpose, ChatGPT integration | Good | OpenAI API | Check pricing | | Midjourney | Artistic, high-aesthetic | Poor | No official API | Subscription-based | | Stable Diffusion | Self-hosted, customizable | Varies | Open source | Free (GPU costs) |

Note: DALL-E 3 is deprecated. OpenAI's current image models are the GPT Image family (gpt-image-1, etc.).

When to Use Which

Need text/headlines in the image?
├── Yes → Ideogram (best), Gemini (good), GPT Image (decent)
└── No ↓

Need product/brand consistency across images?
├── Yes → Flux (multi-image reference)
└── No ↓

Need to edit an existing image?
├── Yes → Gemini (native editing), Flux Flex
└── No ↓

Need highest visual quality?
├── Yes → Flux Pro, Midjourney
└── No ↓

Need volume at low cost?
└── Flux Klein, Gemini Flash

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 for anything beyond short headlines
• No style direction — "photorealistic," "flat illustration," "3D render"

Per-model prompting guides: [references/ai-image-prompting.md](references/ai-image-prompting.md).

Design Tools

For templated, brand-consistent work where AI 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: API exists 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: 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 |

Workflows

Blog & Article Hero Images

Sets tone, improves shareability, required for OG/social previews.

1. Define the concept — visual metaphor for the topic
2. Generate with AI — Flux or Gemini for photorealistic, Ideogram if text needed
3. Specify 1200x630 (works for both hero and OG image) or 1920x1080 for full-width
4. 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

Workflow:

1. Create the hero concept at highest resolution needed
2. Use Canva Magic Resize or manual crop for platform variants
3. Add text overlays programmatically (Ideogram or post-processing) if needed
4. Export at platform-specific dimensions

Product Mockups & Screenshots

AI models hallucinate UI — don't use them here.

1. Capture real screenshots of your product at 2x resolution
2. Frame in device mockups — browser frame, laptop, or phone templates
3. Add context — callout arrows, feature labels, before/after comparisons
4. Annotate with code — Hyperframes or HTML/CSS for programmatic overlays

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

Profile & Listing Banners

Often the first visual impression.

Best practices:

• Keep text minimal — banners read 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 — consistent colors, fonts, logo placement
• Update seasonally — stale banners signal an inactive product

Workflow:

1. Pick the platform(s) and note exact dimensions
2. For directories (Product Hunt, G2): real product screenshots with light annotation
3. For profiles (LinkedIn, Twitter): brand colors + tagline + optional product shot
4. Generate with Canva/Figma templates or Ideogram (if text-heavy)
5. Test at actual display size — zoom out to check readability

Brand Assets

| 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 affects page speed, which affects SEO and conversions.

Format Guide

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 & Social Preview Images

What shows when your URL is shared on social, 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

1. Using AI for product UI screenshots — models hallucinate interfaces; capture real screenshots
2. Skipping image optimization — unoptimized images are the #1 page speed killer
3. No OG image — shared links look broken without a preview image
4. Wrong aspect ratio — always check platform specs before generating
5. Text-heavy images without Ideogram — most AI models butcher text; use Ideogram or add text in post
6. Generating without style direction — "photorealistic," "flat illustration," "3D render" drastically changes output
7. Inconsistent brand visuals — use Flux multi-reference or design templates for consistency
8. Huge images on landing pages — compress, resize, lazy load

Task-Specific Questions

1. Image type? (Blog hero, social graphic, mockup, banner, brand asset)
2. Platform or placement? (Determines dimensions.)
3. Brand assets to match? (Colors, fonts, logo, style guide.)
4. One-off or repeatable template?
5. API keys for image generation tools?
6. Optimize for web performance?

Related Skills

• iblai-marketing-ad-creative: Paid ad image creative, platform-specific ad specs, scaled ad production
• iblai-marketing-video: AI video production and programmatic video
• iblai-marketing-social-content: What to post and content strategy
• iblai-marketing-page-cro: Image placement and conversion optimization on landing pages
• iblai-marketing-seo-audit: Image SEO (alt text, file names, lazy loading)
• iblai-marketing-aso-audit: App store screenshot specs and optimization
• iblai-marketing-directory-submissions: Product Hunt gallery and directory listing visuals