Optimize Cloudinary Image URL: AI-Enhanced Coding Education Blog Header

[jeromehardaway]

🛠 Description

Optimize the Cloudinary image used in the blog frontmatter to ensure fast loading, responsive display, and proper cropping for Open Graph and blog card views. The current image lacks explicit sizing and fill controls, which are important for social previews and layout consistency across devices.

⸻

✅ Acceptance Criteria
• The image.src in the frontmatter includes Cloudinary transformations: f_auto, q_auto:good, dpr_auto, c_fill, g_auto, w_1200, h_675.
• Image renders clearly on desktop and mobile and crops properly in 16:9 containers.
• Social previews display the image without clipping important parts.
• The change is committed with a message like: chore: optimize image for AI in VWC coding education blog.

⸻

📋 Implementation Notes

✅ Replace This:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto,g_auto/v1711322381/ai-teaching-vetswhocode_gixy7v.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/v1711322381/ai-teaching-vetswhocode_gixy7v.jpg",
}

Why This Works:
• f_auto chooses optimal format (WebP, AVIF, JPEG)
• q_auto:good keeps compression smart and efficient
• dpr_auto ensures sharpness on HiDPI screens
• c_fill,g_auto crops intelligently for layout fit
• w_1200,h_675 matches Open Graph and blog listing aspect ratio (16:9)

⸻

🔗 Related Issues or PRs
• Cloudinary Image Transformation Docs
• Open Graph Tag Recommendations

⸻