Optimize Cloudinary Image URL: Combat to Code Blog Header (Frontmatter + Social Preview)

[jeromehardaway]

🛠 Description

Optimize the Cloudinary image used as the blog header for “From Combat To Code: A Veteran’s Journey into Tech” to improve performance, reduce load times, and ensure responsive display quality across all devices and platforms. The current URL lacks optimal transformations for format, quality, cropping, and resolution, which are essential for Open Graph previews and visual consistency in featured blog cards.

⸻

✅ Acceptance Criteria
• The image.src field in the blog frontmatter includes the following Cloudinary transformations: f_auto, q_auto:good, dpr_auto, c_fill, g_auto, w_1200, h_675.
• The image appears clearly cropped, centered, and visually optimized.
• The updated image loads fast across mobile and desktop, without quality loss.
• The blog post renders correctly in Open Graph previews (e.g., on Facebook, Twitter, LinkedIn).
• Changes are committed to the blog file with an appropriate message (e.g., chore: optimize blog image for Combat to Code post).

⸻

📋 Implementation Notes

Replace the existing image.src in frontmatter:

Before:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto,g_auto/v1702011527/combat-to-code_pnmrth.png",
}

After:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto:good,dpr_auto,c_fill,g_auto,w_1200,h_675/v1702011527/combat-to-code_pnmrth.png",
}

These transformations ensure:
• Automatic delivery of efficient formats like WebP or AVIF (f_auto)
• Smart compression balancing quality and size (q_auto:good)
• Retina-ready visuals (dpr_auto)
• Framing with proper aspect ratio and center-of-interest cropping (c_fill,g_auto)
• Social-media optimized dimensions (w_1200,h_675)

⸻

🔗 Related Issues or PRs
• Cloudinary Image Transformations – Docs
• Open Graph Preview Best Practices
• No related issues at this time. Create a tracking issue if needed.