Definition
The end-to-end process of producing web images at correct dimensions, format, and compression level—including Retina scale exports, sRGB color space, transparency handling, and post-export optimization tools.
Why It Matters
It is the process of balancing image quality with file size, which is the single most important factor for website speed and performance. A disciplined optimization workflow is what ensures that a digital product remains fast and responsive on all devices and networks.
Core Concepts
- sRGB Color Space: Standard for consistent cross-browser color display.
- Retina Strategy: Export @2x/@3x assets; use
srcsetfor delivery. - Work at @1x: Design at layout size; export scaled versions from vector sources.
- JPEG Quality: 40–60% often sufficient; slight blur aids compression.
- PNG Optimization: Reduce bit depth, use ImageAlpha/TinyPNG for PNG-24→PNG-8 alpha.
- Tools: ImageOptim, TinyPNG, Kraken.io, imagemin build plugins.