Skip to content
Optimal Lab

Frontend · interactive

Images and fonts

On most pages, images and fonts outweigh all the JavaScript. A full-size JPEG in a small slot, a gallery nobody scrolls to, and six weights of a font each cost seconds on a phone. Apply the fixes. Sizes and timings are illustrative.

  • Hero image: 1200 KB
  • Gallery images: 2800 KB
  • Fonts: 480 KB
  • Everything else: 300 KB
Initial download
4.78 MB
LCP (slow 4G)
3.6 s
Text visible
2.4 s

4.8 MB before the user sees anything useful, and text stays invisible while fonts download.

  1. 1

    AVIF and WebP are typically 30–70% smaller than JPEG at the same quality.

    Use <picture> for fallbacks.

  2. 2

  3. 3

  4. 4

In production

Tools and technologies

Images and fonts are most of a typical page's weight.

Not tied to one language — use these names when you search docs or design a system.