Fetching Relevant Images

Use Cases

• Images for HTML templates, documents, presentations
• Need proper attribution and legal use
• Finding high-quality free images

Source Selection

Need an image?

• Personal/Educational (not published): Wikimedia Commons (attribution required) or Unsplash/Pexels/Pixabay (CC0, no attribution)
• Published (blog, website): CC0 sources safest, Wikimedia Commons good with attribution
• Commercial: Must use CC0 or commercial licenses

License Types

License	Attribution?	Commercial?	Modifications?
CC0	No	Yes	Yes
CC BY	Yes	Yes	Yes
CC BY-SA	Yes	Yes	Yes (same license)
Public Domain	No	Yes	Yes

Free Image Sources

CC0 (No Attribution Required)

Pixabay (pixabay.com) - 5.7M+ images, proprietary license (formerly CC0), no attribution Unsplash (unsplash.com) - 300K+ photos, high-quality, no attribution Pexels (pexels.com) - Photos/videos, clean aesthetic, no attribution Others: Burst (burst.shopify.com), StockSnap (stocksnap.io)

Attribution Required

Wikimedia Commons (commons.wikimedia.org) - 100M+ files, CC BY or CC BY-SA, best for historical/cultural/educational content Flickr Commons (flickr.com/commons) - Public domain from 70+ institutions

Workflows

Option 1: Programmatic Script (Easiest)

Use the helper script for automated extraction:

# Step 1: Search for images
python3 scripts/fetch_wikimedia_image.py "paella valenciana"

# Step 2: Extract URL from File: page (copy URL from WebSearch results)
python3 scripts/fetch_wikimedia_image.py \
  --file-page "https://commons.wikimedia.org/wiki/File:01_Paella_Valenciana_original.jpg" \
  --verify --html --alt "Authentic Valencian paella"

Output:

📸 Image Information
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Filename:     01_Paella_Valenciana_original.jpg
Direct URL:   https://upload.wikimedia.org/wikipedia/commons/e/ed/01_Paella_Valenciana_original.jpg
License:      CC BY-SA (check file page for exact version)
Attribution:  Photo: Wikimedia Commons, [License]

🔍 Verifying URL...
   ✅ URL verified (HTTP 200, valid image)

📝 HTML Snippet
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<div class="image-container">
    <img src="https://upload.wikimedia.org/..." alt="Authentic Valencian paella">
    <div class="image-caption">
        Authentic Valencian paella (Photo: Wikimedia Commons, CC BY-SA 2.0)
    </div>
</div>

Script location: ~/.claude/plugins/marketplaces/warren-claude-code-plugin-marketplace/claude-context-orchestrator/snippets/local/documentation/fetching-images/scripts/fetch_wikimedia_image.py

Alias tip: Add to your shell profile:

alias wikimg='python3 ~/.claude/plugins/marketplaces/warren-claude-code-plugin-marketplace/claude-context-orchestrator/snippets/local/documentation/fetching-images/scripts/fetch_wikimedia_image.py'

Then use: wikimg "mofongo" --count 5

Option 2: Manual Workflow (Full Control)

1. Search: site:commons.wikimedia.org [topic] file jpg
2. Find File: page: Navigate to File:Image_name.jpg
3. Extract direct URL:

   WebFetch("https://commons.wikimedia.org/wiki/File:...",
            "Get the direct https://upload.wikimedia.org URL")
   

   • Look for: https://upload.wikimedia.org/wikipedia/commons/[hash]/[filename]
4. Verify URL:

   curl -I "https://upload.wikimedia.org/wikipedia/commons/7/72/2008_Sagrada_Familia_11.JPG"
   # Should return: HTTP/2 200
   

5. Add attribution:

   <img src="https://upload.wikimedia.org/..." alt="Description">
   <p class="attribution">Photo: [Author] via Wikimedia Commons, [License]</p>
   

Attribution formats:

• "Photo: Wikimedia Commons, CC BY-SA 4.0"
• "Photo: [Photographer] via Wikimedia Commons, CC BY 2.0"
• "Source: Wikimedia Commons (Public Domain)"

CC0 Sources (Easiest)

1. Search: Visit site or site:unsplash.com [topic]
2. Download: Click Download or copy image address
3. Use:

   <img src="https://images.unsplash.com/..." alt="Description">
   <!-- Attribution optional but appreciated -->
   

Fair Use (U.S. Law)

Four-factor test determines fair use:

1. Purpose: Educational/nonprofit favored, commercial disfavored, transformative favored
2. Nature: Factual works favored, creative less favored
3. Amount: Small portions favored, entire work disfavored
4. Market effect: No harm favored, substitution disfavored

Important: Fair use is case-by-case. Educational doesn't automatically qualify. When in doubt, use licensed images.

Technical Best Practices

Never Hotlink

❌ <img src="https://someones-site.com/their-image.jpg"> ✅ <img src="./images/my-image.jpg"> or <img src="https://upload.wikimedia.org/...">

Always Verify URLs

curl -I "[image-url]" | grep -E "(HTTP|content-type)"
# Should see: HTTP/2 200, content-type: image/jpeg

Wikimedia URL Extraction

❌ Don't guess URLs (hash directory is MD5-based, unpredictable) ✅ Extract from File: page using WebFetch

Responsive Images

<img src="image-800.jpg"
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     alt="Description">

Lazy Loading

<img src="image.jpg" loading="lazy" alt="Description">

Common Mistakes

❌ "I can guess Wikimedia URLs" → Hash directories are MD5-based and unpredictable. Always extract from File: page.

• Example: Guessing /commons/5/50/Image.jpg when it's actually /commons/7/72/Image.jpg = 404 error
• Solution: Use WebFetch or the script to extract the real URL

❌ "Skip URL verification" → Even correct-looking URLs can be broken. Always verify with curl.

• Solution: curl -I [url] | grep HTTP should show HTTP 200

❌ "Google Images = free" → Check license, use Advanced Search → Usage Rights → "Free to use or share" ❌ "Personal use = no copyright" → License terms always apply ❌ "Giving credit = allowed" → Need proper license, then add attribution ❌ "Educational = fair use" → All four factors must be considered ❌ "No watermark = free" → Find source and check explicit license

Lessons from Practice

From real debugging sessions:

1. 404 errors from Wikimedia? → You guessed the URL structure. Extract it properly instead.

   • URLs have hash-based paths: /commons/[hash]/[filename]
   • The hash is MD5-based on the filename, but unpredictable without calculation
   • Fix: Always use WebFetch to extract from the File: page

2. Images not showing in browser? → Verify the URL actually works before embedding.

   • Even if URL looks correct, test with: curl -I [url]
   • Check for HTTP 200 and content-type: image/jpeg

3. Which workflow to use?

   • Quick/single image: Use the script (--file-page --verify --html)
   • Multiple images: Manual WebFetch workflow for batch processing
   • Learning/understanding: Manual workflow to see each step

Code Examples

HTML with Attribution

<figure>
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/72/2008_Sagrada_Familia_11.JPG"
       alt="Sagrada Familia stained glass window" loading="lazy">
  <figcaption>
    Sagrada Familia, Barcelona
    <br><small>Photo: Wikimedia Commons, CC BY-SA 2.5</small>
  </figcaption>
</figure>

CSS Attribution Styling

.attribution {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.5rem;
}

JavaScript Image Verification

const img = new Image();
img.onload = () => console.log('✅ Image loaded:', img.naturalWidth + 'x' + img.naturalHeight);
img.onerror = () => console.error('❌ Image failed to load');
img.src = 'your-image-url.jpg';

Quick Checklist

• License identified? (CC0, CC BY, CC BY-SA, Fair Use)
• Allows intended use? (Personal, published, commercial)
• Attribution needed? (Prepared to add)
• URL verified? (curl -I [url])
• Not hotlinking? (Download or use allowed CDN)
• Quality sufficient? (Check resolution)
• Culturally appropriate? (Check context)

Resources

Official:

• U.S. Copyright Office Fair Use: copyright.gov/fair-use/
• Creative Commons Licenses: creativecommons.org/licenses/
• Wikimedia Commons License Guide: commons.wikimedia.org/wiki/Commons:Licensing

Search Tools:

• Google Images Advanced → Usage Rights
• Creative Commons Search: search.creativecommons.org/
• Wikimedia Commons Search: commons.wikimedia.org/

Summary

Personal/Educational:

1. Pixabay/Unsplash/Pexels (CC0, easiest)
2. Wikimedia Commons (highest quality, needs attribution)
3. Always verify URLs
4. License terms apply even for personal use

Published/Commercial:

1. Use CC0 or commercial licenses only
2. Double-check each image's terms
3. When in doubt, use CC0 or consult lawyer

Key: Millions of free, high-quality images exist legally. Use them instead of risking copyright infringement.