Beyond the Basics of Image Optimization

Martin Splitt & Una Kravets

  • GDE
  • Mozillian
  • 3d.io

Note (❌ why ❌ basics ❌)

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

Responsive Images

<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

Optimizers

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

  1. Downloading image
  2. Reading header (setup)
  3. Decoding image
  4. VRAM upload
  5. Composite
  6. ✨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

Shader playground

Beyond the Basics

Designing for Performance

Spot the Difference!

409 KB

264 KB

409 KB

0.533 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

A * B

rgb(10, 200, 50)

rgb(150, 100, 150)

----------------

rgb(10, 100, 50)

How does that work?

una.im/CSSgram

random image #1
random image #1
random image #1
random image #1

How does that work?

CSS Filters

See the Pen Cross-browser filter effects by Amelia Bellamy-Royds (@AmeliaBR) on CodePen.

❌ Fill ❌

How does that work?

DIY Image Optimizing with CSS Filters

Contrast trick

  1. Improve compression
  2. Correction via shader multiply

Vs.

Blend Modes

3.6 MB

Gif

24.7 MB

TL;DR never use gifs

mp4: 3.5 MB

webm: 1.3 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>

Wrap Up

Image processing pipeline

Optimisations

Can we use it?

We can haz blend-mode, please?

Use it & vote for it!

Thank you!

@g33konaut @una