Summary
The Recode Website appears to use standard HTML <img> tags in several places rather than the Next.js <Image> component. This means images are not automatically lazy-loaded, resized, or served in modern formats (WebP/AVIF), resulting in unnecessarily large payloads and poor Core Web Vitals (LCP, CLS) scores.
Problem
- Raw
<img> tags load images at full resolution regardless of the device viewport, wasting bandwidth on mobile.
- Images are not lazy-loaded by default with raw
<img>, meaning below-the-fold images are fetched on initial page load.
- No automatic format optimization means PNG/JPG files are served instead of WebP/AVIF, which can reduce file size by 25–50%.
- Poor image optimization directly degrades Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) — two of Google's Core Web Vitals — impacting both user experience and SEO rankings.
Impact
- Slow initial page load for users on mobile or lower-bandwidth connections.
- Lower Google PageSpeed scores affect organic search ranking, reducing discoverability.
- Higher bandwidth costs for both the server and the end user.
Proposed Solution
- Audit the entire codebase for raw
<img> tag usage.
- Replace each
<img> with Next.js <Image>, providing the required width and height props (or using fill for responsive containers):
// Before
<img src="/blog/cover.png" alt="Blog cover" />
// After
import Image from 'next/image';
<Image
src="/blog/cover.png"
alt="Blog cover"
width={800}
height={400}
priority={isAboveFold}
/>
- Add
priority prop to above-the-fold images (hero images, logo) to preload them.
- Set appropriate
sizes attribute for responsive images to ensure the correct resolution is fetched per viewport.
- Run Lighthouse before and after to validate the improvement in performance scores.
Additional Notes
- I will document the before/after Lighthouse scores in the PR description as evidence of impact.
- I will also add any necessary
domains or remotePatterns configuration to next.config.ts for external image sources.
- Could you assign this to me?
Labels: bug, performance, seo, good first issue, GSSoC 2026
Summary
The Recode Website appears to use standard HTML
<img>tags in several places rather than the Next.js<Image>component. This means images are not automatically lazy-loaded, resized, or served in modern formats (WebP/AVIF), resulting in unnecessarily large payloads and poor Core Web Vitals (LCP, CLS) scores.Problem
<img>tags load images at full resolution regardless of the device viewport, wasting bandwidth on mobile.<img>, meaning below-the-fold images are fetched on initial page load.Impact
Proposed Solution
<img>tag usage.<img>with Next.js<Image>, providing the requiredwidthandheightprops (or usingfillfor responsive containers):priorityprop to above-the-fold images (hero images, logo) to preload them.sizesattribute for responsive images to ensure the correct resolution is fetched per viewport.Additional Notes
domainsorremotePatternsconfiguration tonext.config.tsfor external image sources.Labels:
bug,performance,seo,good first issue,GSSoC 2026