Optimize Cloudinary Image URL: Newsletter Section Background

[jeromehardaway]

🛠 Description

Optimize the full-width Cloudinary background image used in the NewsletterArea component. This background image sits behind the newsletter subscription form and must load quickly, scale responsively, and appear crisp on modern devices. Improving its delivery enhances user experience and performance, especially on first page load.

⸻

✅ Acceptance Criteria
• The background image URL is updated with Cloudinary optimization parameters: f_auto, q_auto:good, dpr_auto, c_fill, w_1920, and h_1080.
• The image covers the container fully with no stretching or compression artifacts.
• The layout and text layering are visually preserved on all screen sizes.
• The optimized URL is committed and replaces the current image in the NewsletterArea component.
• Component is tested on mobile, tablet, and desktop viewports.

⸻

📋 Implementation Notes

Update this image src:

src="https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1678670156/website-images/vetswhocode-newsletter-bg.jpg"

With this optimized version:

src="https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto:good,dpr_auto,c_fill,w_1920,h_1080/v1678670156/website-images/vetswhocode-newsletter-bg.jpg"

This ensures:
• Modern format (WebP or AVIF) is delivered where supported
• Resolution is appropriate for full-screen backgrounds
• Image compression is automatically optimized for quality and size
• Pixel density scaling is handled for retina displays

Test it with Lighthouse to verify improvement in page weight and speed.

⸻

🔗 Related Issues or PRs
• Cloudinary Docs – Background Image Delivery
• Tailwind Object Utilities – object-cover

⸻