Optimize Cloudinary Image URL: Josh Morton Blog Headshot (Frontmatter Thumbnail)

[jeromehardaway]

🛠 Description

Optimize the featured image used in the blog post frontmatter to improve page load speed, responsiveness, and display quality across devices. The image is a headshot of Josh Morton and is prominently displayed as the blog’s thumbnail and Open Graph preview. Using Cloudinary transformations will help reduce file size and ensure it looks sharp on all screens.

⸻

✅ Acceptance Criteria
• The image.src in the frontmatter YAML is updated to include f_auto, q_auto:good, dpr_auto, c_thumb, g_face, r_max, w_800, h_800.
• The optimized image appears clearly cropped and centered with no clipping or quality loss.
• Image still renders properly on social previews, blog index, and mobile devices.
• The transformation is verified with a live preview or in staging before pushing to production.

⸻

📋 Implementation Notes

✅ Frontmatter Change

Before:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto,g_auto/v1721082085/josh-morton.jpg",
}

After:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto:good,dpr_auto,c_thumb,g_face,r_max,w_800,h_800/v1721082085/josh-morton.jpg",
}

Why this works:
• f_auto: Delivers the most efficient format (webp, avif) based on the viewer’s browser.
• q_auto:good: Applies a smart compression setting with balanced quality.
• dpr_auto: Automatically scales for Retina/HiDPI screens.
• c_thumb, g_face, r_max: Crops a centered, circular thumbnail around the detected face.
• w_800, h_800: Keeps it appropriately sized for preview and page load.

⸻

🔗 Related Issues or PRs
• Cloudinary – Image Transformations Reference
• Cloudinary – Smart Cropping by Face Detection

⸻