VOL. IV · CH. 4.7 · VISUAL DESIGN
Image Optimization & SVG
The single most common, most fixable cause of a slow-feeling product.
1 min read · 263 words
4.7.1Definition
Image optimization reduces file size and serves appropriately sized images per context, without perceptibly harming visual quality. SVG (Scalable Vector Graphics) is a vector image format that stays crisp at any size and scales far better than raster formats for icons, logos, and simple illustrations.
4.7.2Why It Exists
Unoptimized images are consistently one of the largest contributors to slow page loads, directly harming both user experience and, for public content, search ranking (per Chapter 2's marketing/SEO cross-references). Optimization exists to deliver the same visual result at a fraction of the transferred data.
4.7.3Raster vs. Vector
| Raster (JPEG, PNG, WebP) | Vector (SVG) |
|---|---|
| Best for photographs, complex imagery | Best for icons, logos, simple illustrations |
| Fixed resolution — degrades when scaled up | Infinitely scalable with no quality loss |
| Larger file size for complex detail | Extremely small file size for simple shapes |
4.7.4Common Mistakes
- Serving a single, full-resolution image to every device regardless of actual display size, wasting bandwidth on mobile.
- Using raster formats for icons and logos that would be smaller and sharper as SVG.
- No lazy-loading for images below the initial viewport, forcing everything to load upfront.
4.7.5Best Practices
- Serve responsive image sizes matched to actual display context (`srcset` or equivalent), not one fixed file for all devices.
- Use SVG for any icon, logo, or simple illustration; reserve raster formats for photographic content.
- Lazy-load offscreen images by default.
Real-World ExampleModern e-commerce product pages serve WebP images at multiple resolutions via `srcset`, so a phone downloads a meaningfully smaller file than a 4K desktop monitor viewing the identical page.