Optimize Cloudinary Image URL: Offcanvas Sidebar Mobile Background

[jeromehardaway]

🛠 Description

Optimize the Cloudinary background image used in the mobile Offcanvas component to reduce load time, improve performance on slower connections, and ensure crisp rendering on modern screens. The image appears as a background on the right-aligned mobile sidebar, so it must be delivered in an efficient and responsive format without sacrificing visual quality.

⸻

✅ Acceptance Criteria
• Replace the hardcoded background image URL with an optimized version using Cloudinary transformations (f_auto, q_auto:good, dpr_auto, c_limit, w_360).
• Image remains visually sharp, properly covered, and legible behind the before overlay.
• Image loads quickly across mobile and tablet devices.
• Layout and animations are not disrupted by the change.
• Code is committed and reviewed without regression in functionality or responsiveness.

⸻

📋 Implementation Notes

Update this portion of the class in your component:

tw-bg-[url('https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1698904153/mobile-image_ssvugk.png')]

To:

tw-bg-[url('https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto:good,dpr_auto,c_limit,w_360/v1698904153/mobile-image_ssvugk.png')]

This ensures the image:
• Loads in the best format (webp/avif) for the user
• Is resized to an appropriate width (360px) for the sidebar on mobile
• Is compressed efficiently with good visual quality
• Renders sharply on high-DPI displays thanks to dpr_auto

Test across iOS and Android browsers to confirm legibility and responsiveness.

⸻

🔗 Related Issues or PRs
• Cloudinary Docs – Background Images Optimization
• N/A (create GitHub Issue if tracking needed)

⸻