[poc] Homepage image optimization

[wackerow]

Description

• Implements Art Direction approach for loading separate image assets depending on screen size
• Applies this to homepage SectionBanner images and hero
• SectionBanner images now using a "portrait" version on desktop, which is a different version of the image with sides cropped out, optimized for how we display these images on desktop. srcset used to tell next/image to target 512px width, since these do not extend full width.
• SectionBanner on mobile uses existing landscape images, optimized for 100vw since they extend full width.
• Apply similar approach to homepage Hero image, but in reverse, where 2xl+ screens can get away with a slightly cropped version (trimming top and bottom), while other screens still need the full image.
• Quality of images dropped throughout. Hero image has progressive quality drop from 20 on largest, to 10, to 5 on smallest screens. (of course, optimizing for load speed)

Todo

• [ ] Compare Lighthouse performance scores for homepage with production—both desktop and mobile
• [ ] Gather feedback on optimal quality setting, balancing trade-offs of load speed vs visual quality

If scores show improvement, we can extract a re-usable component that uses this approach.

Related Issue

Ongoing performance initiatives: Homepage / Lighthouse LCP score

[netlify[bot]]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	42d783d7663dc89c7e66fbe49bb4b1aab322a2c7
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/68c029e1f60dc900087fab41
😎 Deploy Preview	https://deploy-preview-15677--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 44 (no change from production) Accessibility: 96 (🟢 up 1 from production) Best Practices: 92 (🔴 down 8 from production) SEO: 92 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[wackerow]

Noting- Much of this PR was simply testing out various image sizes and won't be merged, though a few aspects here we could still benefit from, such as loading portrait-cropped versions of the homepage section banners for desktop. Lower priority at the moment

[wackerow]

Noting that lighthouse scores aren't really responding much to these changes, and we've identified that the Nav component is much more of the problem here; not just the images. That being said, the image improvements will still help contribute to faster loads and better UX.

Trimmed off the testing commits from this branch and opened those separately for further testing in #16004. This PR keeps the "art direction" changes and quality adjustments.

Could consider backing off on the quality drop here, though after testing it sounds like most folks found the lower-than-normal quality settings to appear perfectly fine without too much pixel-peeping. Feedback still welcome.