[MehranMarxian]

Requested by Mehran · project thread

Before: the heaviest pages downloaded 4–7 MB on a phone. Most images had no width/height, so the layout jumped while they loaded. Every page also downloaded a 279 KB TTF font.

After: the same pages look the same (verified below) but download a lot less. Layout no longer jumps as images arrive.

Bytes loaded after scrolling the whole page, 390 px phone:

Page	Before	After
Melancholic Toons	4.3 MB	1.5 MB
Journal (blog.html)	5.5 MB	3.1 MB
Portraits	3.0 MB	1.4 MB
Generative Art	3.9 MB	2.5 MB
Works	6.9 MB	5.2 MB
The MetaHumans post	2.2 MB	0.6 MB
Head Reconstruction	1.4 MB	0.65 MB
Homepage	6.1 MB	5.5 MB

The homepage barely moves because most of its weight is the Moondust video and the grainy slideshow photos (see follow-ups).

What changed

• 51 heavy JPEG/PNGs (>150 KB) now have WebP versions next to them, at quality 80 with the long edge capped at 2000 px. The live pages and the three live journal posts point at the WebP, a saving of 8.7 MB in total. The originals are kept (nothing deleted), and social cards (Images/og/) stay JPEG for link previews. Three files that didn't shrink by 10% were left alone.
• width/height on 237 <img> tags, set to each file's real pixel size. CSS still controls the displayed size; the attributes just let the browser reserve the space.
• PT Sans as WOFF2: 113 KB instead of 279 KB, with the TTF kept as a fallback and font-display: swap, so text shows immediately in a fallback font while the font loads.
• Docs: the overview's backlog item 3 is updated, there's a new item 13 (see below), and a changelog line.

How it was tested

• Layout identical: 20 pages loaded from main and from this branch in headless Chromium at 390 px and 1440 px, with reduced motion. Every image's position and size, and every page's height, match exactly (0 moved images).
• Every image loads: all images forced to load eagerly on 15 pages, 0 failed to decode, no 404s, no JavaScript errors.
• Quality: checked a WebP crop against the JPEG side by side (Melancholic Toons 6); no visible difference.
• The link check from Add PR checks for links, HTML validity and phone/desktop rendering #7 passes: 0 missing references.

Risks and follow-ups

• Repo grows by about 8 MB because the originals are kept. Once you've looked at the pages, the original JPEGs could go in the unused-media cleanup (task 5), with your OK.
• font-display: swap means that on a slow connection the first paint uses Arial for a moment before PT Sans arrives.
• Not in this PR, to avoid clashing with Fix looping videos on iPhone (Low Power Mode, unplayable WebM) #5 (the iPhone video fix): the homepage still loads all six slideshow photos plus the Moondust hero video on first view (about 5.5 MB). Loading slides one ahead of the slideshow would cut first-view weight by roughly 3 MB, and that needs a change in the hero script Fix looping videos on iPhone (Low Power Mode, unplayable WebM) #5 is editing.
• New backlog item 13: webfonts/PTSans_Regular/stylesheet.css still carries old page rules (body, html { display: flex }, main { display: flex }, …) that site.css imports on every page. That's the source of the "main lays out as a row" bug. Removing them needs a visual pass on every page.
• Not tested on a real phone or with Lighthouse, since the live site isn't reachable from my environment.

Suggestions

1. After Fix looping videos on iPhone (Low Power Mode, unplayable WebM) #5 merges, lazy-load the homepage slideshow (next slide only), for about 3 MB less on first view.
2. Move the @font-face into site.css and drop the legacy stylesheet import (backlog 13).