WordPress Hero Image Speed Optimization

My homepage hero currently relies on a CSS background­-image. That approach is hurting Largest Contentful Paint and delaying the overall load, especially on mobile. I want the section rebuilt so the hero graphic is delivered as a regular element that browsers can preload and lazy-load intelligently. Key objectives • Primary goal: shorter page-load times, with measurable Lighthouse improvements. • Highest priority device group: mobile phones. • Visual requirement: the entire image must remain visible on small screens; no cropping or alternate artwork—just scale it down proportionally. Scope of work 1. Refactor the hero section in my WordPress theme (PHP + HTML + CSS) to swap the background property for an inline . 2. Maintain existing layout, buttons, overlays, and responsive behaviour. 3. Apply best-practice performance tweaks—width/height attributes, srcset/sizes, lazy loading, and preload where appropriate. 4. Test thoroughly across major mobile browsers and desktop to confirm no layout shifts or CLS issues. 5. Provide before/after Lighthouse or PageSpeed Insights screenshots so we can quantify the gain. Deliverables • Updated theme files or a child-theme patch. • Any custom CSS/JS added. • A concise read-me explaining edits and rollback steps. • Performance report demonstrating improvement on mobile. Acceptance criteria The page achieves noticeably faster LCP (<2.5 s on 4G) without breaking the hero design, and the full image shows on all screen sizes. Tools you’ll probably touch: WordPress theme editor, PHP, HTML5 picture/img, responsive CSS, Lighthouse, PageSpeed Insights.