Optimize Cloudinary Image URL: Veterans Day 2023 Blog Header

[jeromehardaway]

🛠 Description

Optimize the frontmatter blog header image to ensure fast load performance, high visual quality, and correct rendering across social previews, blog cards, and responsive views. The image marks a featured Veterans Day update and should reflect the professionalism of the Vets Who Code brand across devices.

⸻

✅ Acceptance Criteria
• The image.src in the frontmatter is updated with Cloudinary transformations: f_auto, q_auto:good, dpr_auto, c_fill, g_auto, w_1200, h_675.
• The transformed image displays correctly on desktop and mobile.
• Open Graph cards render the image correctly without distortion or excess file size.
• The final frontmatter is committed with an appropriate commit message.

⸻

📋 Implementation Notes

✅ Replace this:

image:
{
src: "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto,g_auto/v1699678278/veterans-day_szcwx5.png",
}

✅ 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/v1699678278/veterans-day_szcwx5.png",
}

Why These Params?
• f_auto: Lets Cloudinary deliver modern formats like WebP or AVIF
• q_auto:good: Compresses efficiently while maintaining sharpness
• dpr_auto: Delivers high-DPI images where needed
• c_fill,g_auto: Ensures the subject is framed correctly and fills 16:9 space
• w_1200,h_675: Ideal size and aspect ratio for Open Graph preview images

⸻

🔗 Related Docs
• Cloudinary OG Image Optimization Guide
• Image Transformation Reference

⸻