Step 9: Legacy Image Formats

The Problem

Using legacy formats like JPEG and PNG results in larger file sizes compared to modern formats like WebP and AVIF.

Issues:

  • Larger file sizes
  • Slower page loads
  • More bandwidth usage
  • Poor compression

Problematic Code:


<img
  src="large-image.jpg"
  alt="Legacy format"
/>

Compare these image formats in the Network tab. Notice the file sizes:

JPEG Format (Legacy)

JPEG image

Original JPEG: ~64KB

PNG Format (Legacy)

PNG image

PNG version: ~276KB