LDNWebPerf September 2016 - Kornel Lesinski

by London Web Performance Group

Slide 1

Slide 1 text

SNAKE OIL IN IMAGE COMPRESSION Kornel Lesiński London Web Performance 2016

Slide 2

Slide 2 text

= WITHOUT LOSS = QUALITY 100% = IRREVERSIBLY LOSES QUALITY LOSSY LOSSLESS

Slide 3

Slide 3 text

QUALITY DEPENDS ON VIEWING CONDITIONS (CONTRAST, PIXEL SIZE)

Slide 4

Slide 4 text

The basic idea behind lossy compression is that eyes are imperfect and humans don't see every detail, so dototε tnot oro too εnott to bo εoon, εon bo roplocod nitn o roμpn opproεnoton.

Slide 5

Slide 5 text

FLIF GIF

Slide 6

Slide 6 text

WORST LOSSY FORMAT IS STILL SMALLER THAN THE BEST LOSSLESS

Slide 7

Slide 7 text

FLIF GIF 230KB 21KB

Slide 8

Slide 8 text

GIF 21KB JPEG 20KB 30KB?

Slide 9

Slide 9 text

QUALITY FILE SIZE

Slide 10

Slide 10 text

QUALITY FILE SIZE Red Blue

Slide 11

Slide 11 text

QUALITY FILE SIZE Red Blue

Slide 12

Slide 12 text

COMPARE AT EXACTLY THE SAME FILE SIZE

Slide 13

Slide 13 text

QUALITY FILE SIZE Red Blue

Slide 14

Slide 14 text

QUALITY FILE SIZE Red Blue

Slide 15

Slide 15 text

BENCHMARK ONLY USEFUL QUALITY RANGE

Slide 16

Slide 16 text

QUALITY FILE SIZE Red Blue

Slide 17

Slide 17 text

QUALITY

Slide 18

Slide 18 text

0 100

Slide 19

Slide 19 text

"QUALITY" SETTING IS MADE UP

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

0 100

Slide 22

Slide 22 text

Difference 1.1 Difference 3.5

Slide 23

Slide 23 text

PSNR (dB) / MSE Peak Signal To Noise Ratio / Mean Square Error ➤ Simple per-pixel diﬀerence ➤ Inaccurate, easy to game ➤ Loves blur, hates sharpness

Slide 24

Slide 24 text

SSIM Structural Similarity ➤ Quite decent ➤ Aware of noise and edges ➤ Score is tool-dependent ➤ MS-SSIM, HVS-PSNR, Butteraugli

Slide 25

Slide 25 text

COLOR? ALPHA? ➤ Grayscale? ➤ RGB? ➤ L*a*b*? https://kornel.ski/dssim

Slide 26

Slide 26 text

LOG2DSSIM BITS PER PIXEL 0.5 1 2

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

EXPORT LOSSY ONCE OPTIMIZE LAST

Slide 32

Slide 32 text

WebP BPG libjpeg MozJPEG CC BY Jon Sneyers youtu.be/YKmhZJ8H1Fc

Slide 33

Slide 33 text

WebP BPG libjpeg MozJPEG CC BY Jon Sneyers youtu.be/YKmhZJ8H1Fc

Slide 34

Slide 34 text

MOZJPEG JPEG-ARCHIVE IMGMIN DSSIM GNUPLOT kornelski ImageOptim.com