Find Image

Find Image for Blog Post

Help the user find appropriate images for their blog posts and generate the proper HTML markup.

Instructions

1. Understand the context: Ask or determine what the blog post is about

2. Search for images: Use web search to find relevant free stock images from sources like:

   • Unsplash (https://unsplash.com) - High-quality free photos
   • Pexels (https://pexels.com) - Free stock photos and videos
   • Pixabay (https://pixabay.com) - Free images and royalty-free stock
   • Undraw (https://undraw.co) - Free illustrations for tech/business

3. Provide search links: Give the user direct search URLs to find images

4. Suggest filenames: Propose descriptive filenames following the convention:

   • Use lowercase with hyphens
   • Be descriptive (e.g., gdpr-logging-architecture-diagram.png)
   • Include the main topic

5. Generate HTML markup: Provide the complete figure HTML with:

   • Proper alt text (descriptive, WCAG 2.1 AA compliant, under 125 chars)
   • Standard figcaption

Image Guidelines (from project standards)

• Location: /assets/images/
• Preferred formats: WebP (best compression), PNG (diagrams/screenshots), JPG (photos)
• Max size: < 500KB (images are auto-optimized via pre-commit hook)
• Alt text requirements:
  • Be descriptive and specific
  • Relate to surrounding content
  • Aim for 125 characters or less
  • Don't start with "Image of" or "Picture of"
  • Include relevant keywords naturally

Output Format

When suggesting an image, provide:

1. Search links for finding the image:

Unsplash: https://unsplash.com/s/photos/[search-term]
Pexels: https://www.pexels.com/search/[search-term]/

2. Suggested filename:

[topic]-[description].webp

3. HTML markup to use:

<figure>
  <img src="/assets/images/[filename]" alt="[Descriptive alt text]">
  <figcaption>This is what AI thinks an image for this blog should look like...</figcaption>
</figure>

Examples

Example 1: AI Development Post

User asks for an image for a post about "Building AI Agents with Claude"

Search links:

• Unsplash: https://unsplash.com/s/photos/artificial-intelligence-robot
• Pexels: https://www.pexels.com/search/artificial%20intelligence/

Suggested filename: claude-ai-agent-development.webp

HTML markup:

<figure>
  <img src="/assets/images/claude-ai-agent-development.webp" alt="Abstract visualization of AI neural network connections representing intelligent agent systems">
  <figcaption>This is what AI thinks an image for this blog should look like...</figcaption>
</figure>

Example 2: Python Security Post

User asks for an image for a post about "GDPR-Compliant Logging in Python"

Search links:

• Unsplash: https://unsplash.com/s/photos/data-security-privacy
• Pexels: https://www.pexels.com/search/data%20protection/

Suggested filename: gdpr-python-logging-security.webp

HTML markup:

<figure>
  <img src="/assets/images/gdpr-python-logging-security.webp" alt="Secure data protection concept with lock symbol representing GDPR privacy compliance">
  <figcaption>This is what AI thinks an image for this blog should look like...</figcaption>
</figure>

Technical Diagrams

For technical content, also suggest tools to create diagrams:

• Excalidraw (https://excalidraw.com) - Hand-drawn style diagrams
• Draw.io (https://draw.io) - Professional flowcharts and architecture diagrams
• Mermaid (in markdown) - Code-based diagrams

For diagrams, use a specific figcaption describing what the diagram shows instead of the standard AI humor caption.