Image Optimization
Reducing the bytes an image costs without reducing what the visitor sees.
Analogy Mental model
Converting a raw photograph to a well-compressed JPEG. A fraction of the size, and the eye cannot tell at the size it is displayed.
In practice What you actually do
Serve modern formats with fallbacks, provide several widths through srcset so a phone does not download a desktop asset, defer below-the-fold images, and size the file to the slot it occupies. A CDN with image transformation does this without a build step.
Where people get burned Pitfalls
The most common error is a two-thousand-pixel photograph displayed at three hundred. Same picture, four times the bytes, and usually the element that defines the largest contentful paint.
This entry was written in English from the Chinese original, not machine-translated. Read the Chinese version →