Beyond the Basics of Image Optimization
Martin Splitt & Una Kravets
Image Best Practices
A *very* quick reminder of good image optimization practices
Good ol' formats
Format |
PNG |
JPEG |
GIF |
Size* |
848K |
98K |
270K |
Transparency? |
✅ |
❌ |
✅* |
Encoding |
Lossless |
Lossy |
Lossless* |
*) milage may vary, depending on type of image!
The new ones
Format |
PNG |
JPG |
WebP |
HEIF |
Size |
1300K |
829K |
129K |
248K |
Encoding |
Lossless |
Lossy |
Either |
Lossy |
Transparency |
✅ |
❌ |
✅ |
✅ |
Optimized for |
Quality |
Size |
Size |
Quality |
JPG
HEIF
<picture>
+ srcset
<picture>
<source media="(max-width: 799px)" srcset="dog-300w.jpg">
<source media="(min-width: 800px)" srcset="dog-800w.jpg">
<img src="dog-800w.jpg" alt="A very cute dog">
</picture>
srcset
+ sizes
<img
srcset="dog-320w.jpg 320w,
dog-480w.jpg 480w,
dog-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px, 800px"
src="dog-800w.jpg" alt="A very cute dog">
Media Queries
MozJPEG
- 10-16% smaller
- optimises encoder settings
mozjpeg -outfile minified.jpg original.png
optipng
- up to 18% smaller
- improves filtering & removes redundancy
optipng -out minified.png original.png
img-loader for Webpack
Combines the previous tools in a Webpack Loader
npm install img-loader
Pixel Rendering 101
How the Browser Makes Images
Lifecycle of an image
- Downloading image
- Reading header (setup)
- Decoding image
- VRAM upload
- Composite
- ✨Display✨
PNG Header
89 50 4E 47 0D 0A 1A 0A .. ..
PNG Header
89 50 4E 47 0D 0A 1A 0A .. ..
Decoding
Composite
Layer 1: 255 000 128
Layer 2: 000 255 128
Output: ??? ??? ???
Composite
Layer 1: 255 000 128
Layer 2: 000 255 128
Output: 255 255 128
Composite?
Compositing is running shaders with all layers as input

Composite?
Compositing is running shaders with all layers as input

Beyond the Basics
Designing for Performance
Spot the Difference!
409 KB
264 KB
409 KB
0.533 KB
Facebook Headers: 200 bytes
Source
"Blur Up"
Histogram Scope Reduction
279 kb
217 kb
291 kb
229 kb
922 kb
733 kb
Black & White Doesn't Have to Be Boring!
CSS Blend Modes
- Darken
- Multiply
- Color Burn
- Lighten
- Screen
- Color Dodge
- Overlay
- Soft Light
- Hard Light
- Difference
- Exclusion
- Hue
- Saturation
- Color
- Luminosity
rgb(10, 200, 50)
rgb(150, 100, 150)
----------------
rgb(10, 100, 50)
❌ Fill ❌
DIY Image Optimizing with CSS Filters
Contrast trick
- Improve compression
- Correction via shader multiply
Vs.
Blend Modes
3.6 MB
Gif
24.7 MB
<video>
<source src="src/video.mp4"
type='video.mp4;
codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="src/video.webm"
type='video.webm;
codecs="vp8, vorbis"'/>
</video>
Image processing pipeline
Optimisations
We can haz blend-mode, please?
Use it & vote for it!
Thank you!
@g33konaut @una