Image

---
name: Image
description: Use when the user wants to create, generate, edit, or optimize marketing images — blog heroes, social graphics, product mockups, banners, or brand assets — with AI or design tools.
category: Content & Copy
version: 2.0.0
tools: []
---

# Image

Help create marketing images using AI generation models, design tools, and optimization best practices — from blog heroes and social graphics to product mockups and profile banners.

## Before Starting

Search the Knowledge Base for existing product-marketing context first, and only ask about what isn't already covered. Gather: **Goal** — image type (blog hero, social graphic, product mockup, banner, brand asset, OG image), platform/placement, dimensions needed. **Production approach** — existing brand assets (logo, colors, fonts, style guide), photorealistic vs. illustrative style, one-off vs. repeatable template. **Technical context** — available image-tool access, budget constraints (some tools charge per image), whether web-performance optimization is needed.

## Choosing Your Approach

| 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 + overlay | Product mockups, feature announcements |
| Stock Photography | Generic business/lifestyle scenes | Unsplash, Pexels | When speed matters more than uniqueness |

## AI Image Generation

### Model Comparison

| Model | Best For | Text in Images |
|-------|----------|:-:|
| Gemini Image (Google) | All-around, editing, text rendering | Good |
| Flux (Black Forest Labs) | Photorealism, brand consistency, batch | Limited |
| Ideogram | Typography, branded graphics | Best |
| GPT Image (OpenAI) | General purpose, ChatGPT integration | Good |
| Midjourney | Artistic, high-aesthetic | Poor |
| Stable Diffusion | Self-hosted, customizable | Varies |

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

### When to Use Which
Need text/headlines in the image? Ideogram (best), Gemini (good), GPT Image (decent). Need product/brand consistency across images? Flux (multi-image reference). Need to edit an existing image? Gemini (native editing), Flux Flex. Need highest visual quality? Flux Pro, Midjourney. Need volume at low cost? Flux Klein, Gemini Flash.

### Prompting Basics
A strong prompt follows: Subject + Setting + Style + Lighting + Composition + Technical. Example: "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"); forgetting aspect ratio; requesting complex text (use overlays for anything beyond a short headline); no style direction ("photorealistic," "flat illustration," "3D render").

## Design Tools

**Canva** — best for non-designers needing 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.

**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.

Use a design tool when exact brand guidelines must be followed, when 20 size variants of one design are needed (Canva Magic Resize), or for a recurring social template. Use AI generation for a unique hero image or an abstract/creative visual. Never use AI for a product mockup with real UI — it hallucinates the interface; use screenshots instead.

## Marketing Image Workflows

### Blog & Article Hero Images
Define the visual metaphor, generate with Flux or Gemini (Ideogram if text is needed), specify 1200x630 (works for both hero and OG image) or 1920x1080 for full-width, then optimize — compress to under 200KB and 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 | Primary Size | Aspect Ratio |
|----------|-------------|:---:|
| Twitter/X | 1200x675 | 16:9 |
| LinkedIn | 1200x627 | 1.91:1 |
| Instagram Feed | 1080x1080 | 1:1 (1080x1350 / 4:5 also strong) |
| Instagram Stories | 1080x1920 | 9:16 |
| Facebook | 1200x630 | 1.91:1 |

Create the hero concept at the highest resolution needed, resize per platform (Canva Magic Resize or manual crop), add text overlays if needed (Ideogram or post-processing), then export at platform-specific dimensions.

### Product Mockups & Screenshots
AI models hallucinate UI — don't use them for this. Capture real screenshots at 2x resolution, frame in device mockups (browser, laptop, phone templates), add context (callout arrows, feature labels, before/after), and annotate with overlays where useful.

### Profile & Listing Banners

| Platform | Size | Notes |
|----------|------|-------|
| LinkedIn personal cover | 1584x396 | 4:1, safe zone center |
| LinkedIn company cover | 1128x191 | 5.9:1; up to 4200x700 supported |
| 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 |
| Google Play feature graphic | 1024x500 | ~2:1, required for store listing |

Keep banner text minimal (seen at small mobile sizes), center critical content (edges crop differently per device), show real product UI on directory listings, match brand colors/fonts/logo placement, and refresh seasonally. For directories, use real screenshots with light annotation; for profiles, use brand colors plus tagline and optional product shot; always test at actual display size.

### Brand Assets
Logos should always be designed in Figma or commissioned — AI generation is inconsistent and non-vector. AI generation is a decent starting point for app icon concepts (refine manually in Figma) and for illustration style exploration. Favicons and social icons should come from the design tool, derived from the logo.

## Image Optimization

| Format | Best For | Browser Support |
|--------|----------|:---:|
| WebP | Photos, graphics — default choice | ~96% |
| AVIF | Highest compression, newest | ~94% |
| JPEG | Fallback for older browsers | Universal |
| PNG | Transparency, screenshots | Universal |
| SVG | Logos, icons, illustrations | Universal |

Checklist: serve WebP with JPEG/PNG fallback; resize to display size (don't serve 4000px images in 800px containers); compress to quality 75-85% for photos, near-lossless for screenshots; lazy-load below-the-fold images; set explicit width/height to prevent layout shift; use a CDN with auto-optimization; add descriptive, keyword-relevant alt text.

## OG & Social Preview Images

Every page needs `og:image` (1200x630), `og:image:width`/`height`, and a `twitter:card` of `summary_large_image` with a matching `twitter:image`, or shared links look broken. For pages with dynamic content (blog posts, user profiles), generate OG images programmatically per page using a template plus dynamic data — this is the standard approach for programmatic SEO at scale.

## Common Mistakes

1. Using AI for product UI screenshots — capture real screenshots instead
2. Skipping image optimization — the #1 page speed killer
3. No OG image — shared links look broken
4. Wrong aspect ratio — check platform specs before generating
5. Text-heavy images without Ideogram — most models butcher text
6. Generating without style direction
7. Inconsistent brand visuals — use Flux multi-reference or design templates
8. Huge unoptimized images on landing pages

## Task-Specific Questions

1. What type of image do you need?
2. What platform or placement determines the dimensions?
3. Do you have brand assets to match?
4. Is this a one-off or a repeatable template?
5. Does this need web-performance optimization?

## Related Skills

ad-creative (paid ad image creative and scaled ad production), video (AI video production), social (content strategy), cro (image placement and conversion), seo-audit (image SEO), aso (app store screenshot specs), directory-submissions (Product Hunt gallery images).