perf: convert theme screenshots to lossless WebP

[limonte]

Part of #258 — the WebP item, scoped to the images that can safely be converted.

Result

The 11 theme screenshots in the Themes table: 304 KB → 88 KB, a 71% cut, with pixel-identical output.

Lossless, not lossy

These are UI screenshots containing text, so I expected a quality tradeoff. There isn't one — for flat-colour images like these, lossless WebP is smaller than lossy:

themes-dark.png   22102 bytes
  -q 82            4884
  -q 90            5912
  -q 95            6962
  -lossless        4240   <-- smallest AND pixel-identical

So the text in every screenshot stays exactly as crisp as before. Verified dimensions are preserved (900×430 in, 900×430 out), which also means the width/height attributes added in #268 remain correct.

No <picture> fallback: WebP has been supported everywhere since Safari 14 / iOS 14 in 2020.

Why only the theme screenshots

The sponsor logos (488 KB, the larger pile) and plus.png are hotlinked by the main sweetalert2 repo's README — I checked, and it references sweetalert2.github.io/images/plus.png and sweetalert2.github.io/images/sponsors/…. Renaming those files would break someone else's README, so they're deliberately untouched. The theme screenshots are site-local and regenerated from the sweetalert2 sandbox (per the comment at the top of Themes.tsx), with zero external references.

Verification

• All 11 referenced .webp files exist; 0 remaining .png references in Themes.tsx, and no other file in the repo referenced them.
• Build ships 11 .webp and 0 themes-*.png to dist/images/.
• The bundle references themes-dark.webp, and the width={300} height={143} attributes are intact.
• bun run lint and bun run build pass.

Two findings that stop the rest of #258

Deleting unreferenced images wouldn't help any metric. I audited all 78 files in public/images/ and found 16 unreferenced ones (171 KB) — but nothing requests them, so they cost zero page weight and zero CWV. It's repo housekeeping, not SEO. Worse, "unreferenced here" isn't "unused": the README hotlinking above proves external references exist, and sweetalert2.gif (84 KB) looks like exactly that kind of asset. I've left them alone.

Two of those 16 are committed .DS_Store files (16 KB) that get deployed to the live site — /images/.DS_Store would be publicly fetchable. That's worth fixing as hygiene, but it's not SEO and doesn't belong in this PR.

🤖 Generated with Claude Code

[limonte]

Correction to the closing note in this PR: the .DS_Store claim was wrong.

I wrote that two committed .DS_Store files "get deployed to the live site" and that /images/.DS_Store would be publicly fetchable. Neither part holds:

1. They were never committed. git ls-files | grep DS_Store returns nothing — they're untracked local files.
2. They are not on the live site. Both return 404:

https://sweetalert2.github.io/images/.DS_Store   HTTP 404
https://sweetalert2.github.io/.DS_Store          HTTP 404

The reason is that build.yml builds from a clean actions/checkout, so those files don't exist in CI. They only get copied into a local dist/ by Vite's publicDir handling, which is what I was looking at when I wrote the note.

There is no hygiene fix needed here. A repo-level .gitignore entry for .DS_Store would only help contributors who lack a global rule — marginal, and unrelated to this issue.

My apologies for the noise; the WebP change itself is unaffected.