Guides visual content planning and creation across website, social media, email, and other channels. Images are needed not just for websites—social posts, infographics, and repurposed content all require visuals. Visual-first planning in content calendars improves engagement; cross-channel consistency and repurposing maximize ROI.
When invoking
On
first use
, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On
subsequent use
or when the user asks to skip, go directly to the main output.
exists, read Section 12 (Visual Identity) for brand consistency.
Identify:
Context
Article, social post, infographic, email, landing page
Channels
Which platforms will use this visual
Repurposing
Will this visual be adapted for other formats?
1. When to Use Images
Content Type
Visual Need
Notes
Article / Blog
Hero image, in-article images, screenshots
See
image-optimization
for web (alt, WebP, LCP)
Social post
Single image, carousel, or link preview
Platform-specific specs below
Infographic
Primary format; data visualization
Repurpose to social (cropped), blog (full)
Case study
Customer photo, results chart, logo
Repurpose to LinkedIn carousel, blog
Product update
Screenshot, feature graphic
Changelog, email, social
Email
Header image, inline graphics
Keep lightweight; many clients block images
Landing page
Hero, trust badges, screenshots
See
hero-generator
,
image-optimization
2. Website vs Social vs Email
Context
Priority
Skill
Website
Alt text, WebP, LCP, responsive, lazy loading
image-optimization
Social posts
Platform dimensions, aspect ratio, file size
Platform skills
(X, LinkedIn, Pinterest, etc.)
OG / Twitter Cards
1200×630, 1200×675 for link previews
open-graph
,
twitter-cards
Email
Inline-friendly; avoid heavy images; alt for blocked
email-marketing
3. Platform Image Specs (Social)
Platform
Post Image
Stories / Reels
Profile
Notes
X (Twitter)
1200×675 (16:9), 800×800
—
400×400
See
twitter-x-posts
LinkedIn
1200×627, 1200×1200; carousel up to 20
—
400×400
See
linkedin-posts
; vertical preferred on mobile
Pinterest
1000×1500 (2:3)
—
165×165
Alt text ~25% more impressions; see
pinterest-posts
Instagram
1080×1350 (4:5), 1080×1080
1080×1920 (9:16)
320×320
4:5 outperforms square on feed
Facebook
1200×630, 1080×1080
1080×1920
320×320
YouTube
Thumbnail 1280×720
—
800×800
General
1080px width works across most platforms; vertical (4:5, 9:16) outperforms square on mobile-first feeds. Keep critical elements (logo, text) in safe center—platforms may crop.
4. Visual Repurposing
Principle
One core visual → multiple crops/formats → multiple channels.
Core Visual
Adaptations
Channels
Infographic
Full (blog), cropped sections (Instagram, LinkedIn carousel), square (X)
Blog, LinkedIn, Instagram, X
Case study graphic
Hero (blog), single slide (LinkedIn), story (Instagram)
Blog, LinkedIn, Instagram
Product screenshot
Hero (landing), post (X, LinkedIn), email header
Website, social, email
Quote graphic
Square (X, LinkedIn), 4:5 (Instagram)
X, LinkedIn, Instagram
Workflow
Design at largest needed size; export platform-specific crops. Use consistent colors, fonts, logo placement (see
brand-visual-generator
).
5. Visual-First Content Planning
Plan images in content calendar
Don't add visuals as afterthought; visuals drive engagement
Batch by theme
Create visuals for a topic cluster or campaign together for consistency
Repurposing column
In calendar, note which core piece becomes which visual format for which channel
Asset library
Organize by campaign/theme; tag for reuse
6. Format-Specific Notes
Infographics
Dimensions
800–1200px width; height varies by content
Export
PNG for web; PDF for download
Repurpose
Slice into 3–5 slides for LinkedIn carousel; single stat for X/Instagram
Social Post Images
Text overlay
Keep minimal; many platforms deprecate text-heavy images
Branding
Logo in corner; consistent with
brand-visual-generator
Alt text
Add for LinkedIn, Pinterest, X (accessibility + Pinterest SEO)
Article / Blog Images
Hero
Often LCP candidate; optimize per
image-optimization
In-article
Support narrative; alt text descriptive
Screenshots
Annotate when helpful; keep file size low
Output Format
Visual plan
(what images for what content)
Specs
by context (platform dimensions, format)
Repurposing
map (one visual → multiple outputs)
References
to platform skills and image-optimization