SEO: image issues — missing alt (2), zero lazy loading (61 imgs), no width/height (CLS), 1.8 MB of PNG/JPEG

[limonte]

Problem

61 <img> elements across src/ and recipe-gallery/, with several issues:

Missing alt

• src/components/Prtnr.tsx:86 — <img src={prtnr.imageUrl} />
• recipe-gallery/sweetalert2-laravel.tsx:96

(The rest do have alt; Header.tsx correctly uses alt="" for the decorative logo track.)

Zero lazy loading

$ grep -rno 'loading="lazy"' src recipe-gallery --include=*.tsx | wc -l
0

Nothing on the site is lazy-loaded. The worst case is Sponsors.tsx, which eager-loads ~40 sponsor logos far below the fold on the homepage — all competing for bandwidth with the LCP element. Every one of them should be loading="lazy" decoding="async".

The GitHub-stars <iframe> at src/components/Header.tsx:39 (ghbtns.com) also has no loading="lazy" and sits at the very top of the page.

Missing intrinsic dimensions

Most <img> have no width/height (some do — e.g. Themes.tsx passes width={300}). Without both dimensions the browser can't reserve space, so images popping in shift layout → CLS, which is a Core Web Vitals ranking signal.

No modern formats

public/images/ is 1.8 MB of PNG/JPEG/GIF with only one .webp (prtnrs/deel.webp). Notable offenders:

• public/images/prtnrs/hostinger.png — 332 KB
• public/images/picture.jpg — 156 KB
• public/images/sweetalert2.gif and nyan-cat.gif — animated GIFs

WebP/AVIF would cut most of these by 60–80%.

Suggested fix

1. Add alt to the two images missing it (Prtnr should use the partner name; alt="" if genuinely decorative).
2. Add loading="lazy" decoding="async" to all below-the-fold images — centralise it in the Sponsors/Prtnr render loops rather than per-link.
3. Add loading="lazy" to the GitHub-stars iframe.
4. Add width/height to every <img>.
5. Convert public/images/** to WebP (keep PNG fallback only where needed); re-compress hostinger.png.

Impact

Medium — direct CLS/LCP improvement, and CWV is a ranking signal.

[limonte]

Corrections after re-checking this issue against the current code. Two of the four findings don't hold up.

1. "missing alt (2)" — nothing to do

One of the two was in Prtnr.tsx, deleted in #261. The other, recipe-gallery/sweetalert2-laravel.tsx:96, always had an alt — my original grep was line-based and that <img> tag spans multiple lines, so the attribute sat on a line the filter never saw.

A multi-line-aware scan reports 59 images, 0 missing alt. The alt="" cases (Header.tsx logo track, sponsor plus.png) are correct — both are decorative with adjacent text.

2. "no width/height (CLS)" — largely wrong

styles/styles.scss sets, under .frameworks-integrations, .sponsors:

img {
  width: 5em;
  height: 5em;
}

Both dimensions are fixed in CSS, so 44 of the 59 images (40 sponsor logos + 4 framework logos) reserve their box before load and contribute zero CLS. Adding intrinsic width/height attributes there would be inert — CSS wins.

The genuine candidates are far narrower, and each needs its own layout reasoning rather than a mechanical sweep:

• the 10 .theme-comparison images in Themes.tsx — grid-stacked overlays at grid-area: 1/1 with width/height: 100% against an auto-height row
• #logo-text in Header.tsx — CSS width: 28em with no height
• the laravel screenshot — inline maxWidth: 840 with no height

3. "zero lazy loading" — correct, fixed in #264

Confirmed: zero loading="lazy" across all 59 images. 56 are now lazy; the 3 above-the-fold logos stay eager, since lazy-loading the LCP element makes LCP worse.

4. WebP/AVIF — still valid, but smaller than stated

public/images/ is 1.3 MB, not 1.8 MB — prtnrs/hostinger.png (332 KB, the worst single offender) went away with #261. What's left: sponsors/ 488 KB across 40 files, picture.jpg 156 KB, sweetalert2-social.png 100 KB (the OG image, never rendered on-page), and two GIFs at 84 KB + 60 KB.

Remaining scope for this issue

WebP/AVIF conversion, plus the three narrow CLS cases above. Keeping this open for those.

[limonte]

Closing. The measurable work here is done; two of the four original findings were wrong, and the remainder has no effect on any Core Web Vital.

Shipped

Item	Where
loading="lazy" decoding="async" on 56 of 59 images (3 above-the-fold logos stay eager, since lazy-loading the LCP element delays it)	#264
Intrinsic dimensions on the 4 images that genuinely lacked an aspect ratio, plus height: auto where CSS constrains width	#268
11 theme screenshots to lossless WebP: 304 KB → 88 KB, pixel-identical	#273

Findings that were wrong

• "missing alt (2)" — nothing to fix. One was in Prtnr.tsx, deleted in chore: remove Prtnr and Partners components #261; the other always had an alt that my line-based grep couldn't see because the tag spans multiple lines. A multi-line-aware scan reports 59 images, 0 missing alt.
• "no width/height (CLS)" — mostly wrong. .frameworks-integrations, .sponsors already sets img { width: 5em; height: 5em }, so 44 of 59 images reserve their box before load and contribute zero CLS. Adding attributes there would be inert.

Both corrected in this comment.

Not doing: the remaining sponsor-logo bytes

Measured properly, the opportunity is much smaller than the issue claimed:

• 37 referenced sponsor logos total 364 KB — the original 1.8 MB / 488 KB figures counted orphans nothing requests, and prtnrs/hostinger.png (332 KB, the worst single file) left with chore: remove Prtnr and Partners components #261.
• Only 9 files are oversized for their ~100px slot (194 KB); the other 28 are already ≤300px.
• Resizing those 9 would save roughly 120 KB of lazy, below-the-fold bytes — no effect on LCP, CLS or INP.

They also can't be renamed: the main repo's README and SPONSORS.md hotlink all 37 by exact filename, so a .webp conversion would break both. Resizing in place would work but needs a PNG optimiser (pngquant/oxipng); sips re-encodes PNG so poorly it inflated two test files roughly 3×.

Not worth a tool dependency and 9 re-encoded binaries for deferred bytes that move no metric. Reopen if the sponsors section ever moves above the fold.