Optimize Cloudinary Image URL: Hiring in the AI Era Blog Header (Frontmatter + Social)

[jeromehardaway]

🛠 Description

Optimize the Cloudinary image used in the blog post frontmatter to improve page load time, Open Graph rendering, and visual clarity across responsive breakpoints. The current image lacks transformation parameters and should be updated to match standard blog header best practices for the Vets Who Code platform.

⸻

✅ Acceptance Criteria
• The image.src in the frontmatter includes the following Cloudinary transformations: f_auto, q_auto:good, dpr_auto, c_fill, g_auto, w_1200, h_675.
• The optimized image appears correctly in social previews, featured blog sections, and on blog post pages.
• The update does not break any rendering or layout behavior across mobile and desktop.
• The change is committed with a clear message such as: chore: optimize blog image for Hiring Wrong in the Era of AI post.

⸻

📋 Implementation Notes

✅ Replace this:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/v1718478746/hiring-era-of-ai_jfj4dm.jpg",
}

✅ With this optimized version:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto:good,dpr_auto,c_fill,g_auto,w_1200,h_675/v1718478746/hiring-era-of-ai_jfj4dm.jpg",
}

Why These Parameters:
• f_auto: Automatically delivers AVIF or WebP where supported
• q_auto:good: Balances file size and quality
• dpr_auto: Ensures the image is crisp on high-DPI screens
• c_fill, g_auto: Ensures proper cropping and aspect ratio framing
• w_1200, h_675: Ideal 16:9 ratio for blog headers and Open Graph sharing

⸻

🔗 Related Issues or PRs
• Cloudinary Image Transformation Reference
• Open Graph Image Sizing Guidelines

⸻