Image Optimization Strategies for Pixelfed Photo Viewer

🔍 Part 1: Inspecting Undocumented APIs

How to Discover API Structure Without Documentation

When working with APIs (especially undocumented ones), you can learn everything you need directly from the response:

1. Console Logging (What we just added)

   • Log the full object: console.log('Full object:', myObject)
   • Log available keys: console.log('Keys:', Object.keys(myObject))
   • Log nested objects: console.log('Nested:', myObject.nestedProperty)
   • Use JSON.stringify for pretty printing: console.log(JSON.stringify(myObject, null, 2))

2. Browser DevTools Network Tab

   • Open DevTools → Network tab
   • Make an API request
   • Click on the request → Response tab
   • See the raw JSON structure
   • You can copy the response and use JSON formatters online

3. Browser DevTools Console

   • After fetching data, inspect it interactively
   • Type the variable name and explore with tab completion
   • Use Object.keys(), Object.values(), Object.entries() to explore

4. TypeScript/Type Definitions (if available)

   • Some projects have TypeScript definitions
   • Check GitHub repos for .d.ts files
   • Look for API client libraries that might have types

5. API Response Headers

   • Check Content-Type to know format
   • Look for Link headers (pagination)
   • Check for rate limiting headers

What We’re Looking For in Pixelfed API

Based on Mastodon API (which Pixelfed is based on), media attachments typically have:

• url - Full-size image URL
• preview_url - Smaller preview version
• remote_url - Original remote URL (if from another instance)
• meta - Object containing:
  • small - { width, height, size, aspect }
  • medium - { width, height, size, aspect }
  • original - { width, height, size, aspect }

Next Steps: After you load the page, check the browser console to see what fields are actually available!

🚀 Part 2: Netlify Optimization Strategies

Since you control your Netlify hosting, here are optimization ideas that work with Astro (and will carry forward):

1. Netlify Image CDN (Netlify Image Optimization)

Netlify has built-in image optimization that works as a proxy/CDN:

<!-- Instead of direct Pixelfed URL -->
<img src="https://pixelfed.social/storage/media/abc123.jpg">

<!-- Use Netlify's image CDN -->
<img src="/.netlify/images?url=https://pixelfed.social/storage/media/abc123.jpg&w=400&q=80">

Benefits:

• Automatic resizing (add &w=400 for width)
• Automatic format conversion (WebP, AVIF)
• Quality control (&q=80 for quality)
• Caching and CDN delivery
• Works with any image URL (including Pixelfed)

Implementation:

• Create a helper function to wrap Pixelfed URLs
• Use smaller sizes for gallery grid
• Use full size only for modal

Note: Requires Netlify Image Optimization addon (may have usage limits on free tier)

2. Netlify Edge Functions (Image Proxy)

Create a Netlify Edge Function that:

• Fetches images from Pixelfed
• Resizes them server-side
• Caches them on Netlify’s CDN
• Serves optimized versions

Benefits:

• Full control over image processing
• Can add watermarking, compression, format conversion
• Caching at Netlify’s edge locations
• Works with your existing setup

Implementation:

• Create netlify/edge-functions/image-proxy.ts
• Route requests like /api/images/:id?size=thumb
• Fetch from Pixelfed, resize, cache, return

3. Netlify Redirects for Image Caching

Use Netlify’s redirect rules to:

• Cache images with longer TTL
• Add cache headers
• Proxy through Netlify’s CDN

# netlify.toml
[[redirects]]
  from = "/pixelfed-images/*"
  to = "https://pixelfed.social/storage/:splat"
  status = 200
  force = true
  headers = { Cache-Control = "public, max-age=31536000, immutable" }

4. Netlify Build Plugins

Create a build-time plugin that:

• Pre-fetches images during build
• Downloads and optimizes them
• Stores optimized versions
• Generates responsive image sets

Benefits:

• Images optimized at build time
• No runtime processing needed
• Can use tools like Sharp for optimization

5. Service Worker for Image Caching

Use a service worker to:

• Cache images in browser
• Serve cached versions on repeat visits
• Prefetch next page images
• Implement progressive loading

Benefits:

• Works entirely client-side
• No server changes needed
• Offline capability

☁️ Part 3: AWS S3 Optimization Strategies

Since you have AWS S3, here are strategies that leverage your existing infrastructure:

1. S3 as Image Cache/Proxy

Architecture:

Pixelfed → Netlify Function → S3 → CloudFront → Browser

Flow:

1. Netlify Function receives request for image
2. Checks S3 cache first
3. If not cached, fetches from Pixelfed
4. Resizes/optimizes image
5. Uploads to S3
6. Serves from S3 (or CloudFront)

Benefits:

• Persistent cache (survives deployments)
• Fast delivery via CloudFront
• Cost-effective storage
• Can batch optimize

2. S3 + Lambda@Edge for Dynamic Resizing

Use Lambda@Edge with CloudFront to:

• Resize images on-the-fly
• Convert formats (WebP, AVIF)
• Serve from CloudFront edge locations

URL Pattern:

https://cdn.yoursite.com/images/abc123.jpg?w=400&h=300&q=80

Benefits:

• Automatic format selection (based on browser support)
• Dynamic sizing
• Global CDN delivery
• Pay only for what you use

3. S3 + Sharp for Batch Processing

Create a Netlify Function that:

• Runs on a schedule (cron)
• Fetches new Pixelfed posts
• Downloads images
• Generates multiple sizes (thumb, medium, large)
• Uploads to S3 with organized structure

S3 Structure:

s3://your-bucket/pixelfed/
  ├── thumb/
  │   └── photo-123.jpg
  ├── medium/
  │   └── photo-123.jpg
  └── large/
      └── photo-123.jpg

Benefits:

• Pre-processed images
• Fast delivery
• Organized structure
• Can regenerate sizes if needed

4. S3 Lifecycle Policies for Cost Optimization

Set up S3 lifecycle rules:

• Move older images to Glacier (cheaper storage)
• Delete images after X days
• Optimize storage costs

5. CloudFront Signed URLs (If Needed)

If you want to control access:

• Generate signed URLs for images
• Time-limited access
• Can integrate with authentication

🎯 Recommended Implementation Path

Phase 1: Quick Wins (No Infrastructure Changes)

1. ✅ Add API inspection logging (done)
2. Use preview_url if available for gallery thumbnails
3. Add loading="lazy" to gallery images
4. Implement connection-aware loading

Phase 2: Netlify Optimization (Medium Effort)

1. Use Netlify Image CDN (if available on your plan)
2. Or create Netlify Edge Function for image proxy
3. Cache images with appropriate headers

Phase 3: AWS Integration (More Effort, More Control)

1. Set up S3 bucket for image cache
2. Create Netlify Function to fetch/optimize/store
3. Serve from S3 via CloudFront
4. Implement batch processing for new images

📊 Performance Comparison

Current Setup

• Direct Pixelfed URLs
• Full-size images for everything
• No caching
• No optimization

After Quick Wins

• Preview URLs for thumbnails
• Lazy loading
• ~50-70% reduction in initial load

After Netlify Optimization

• CDN delivery
• Automatic format conversion
• Resizing
• ~70-85% reduction in load time

After AWS Integration

• Full control
• Persistent cache
• Global CDN
• ~85-95% reduction in load time

🔧 Next Steps

1. Check the console after loading the page to see what the API returns
2. Choose optimization level based on your needs
3. Start with Phase 1 (quick wins) - I can implement these now
4. Evaluate results before moving to Phase 2/3

Would you like me to implement Phase 1 optimizations once we see what the API returns?