Description
🛠 Description
Optimize the high-resolution Cloudinary headshot of Jerome Hardaway used in the ProfileBio component to reduce page load time while preserving sharpness on all devices. The current image is large and uncompressed, which may negatively affect Core Web Vitals, especially on mobile. Applying Cloudinary transformations will help deliver a lighter, retina-ready version more efficiently.
⸻
✅ Acceptance Criteria
• The profile image URL is updated with Cloudinary parameters: f_auto, q_auto:good, dpr_auto, c_fill, g_face, w_470, and h_470.
• The visual quality remains high and the image appears clear and centered.
• Image loads quickly across desktop and mobile devices.
• No changes to layout, figure scaling, or aspect ratio.
• Component is committed with an appropriate message and tested responsively.
⸻
📋 Implementation Notes
Replace this line:
src="https://res.cloudinary.com/vetswhocode/image/upload/v1683429329/jerome-headshot-bw-3900.jpg"
With the optimized version:
This ensures:
• The image format is optimized per browser (f_auto)
• Compression level balances speed and quality (q_auto:good)
• Display is crisp on high-DPI screens (dpr_auto)
• Image is cropped to focus on the face and sized correctly (g_face, w_470, h_470)
⸻
🔗 Related Issues or PRs
• Cloudinary Docs – Cropping & Face Detection
• Cloudinary Docs – Automatic Format and Quality Selection
⸻