Jetzt aber schnell!

Bildoptimierung für das Web

Michael Seifert - 2018-09-28
Daniel An (2018) – Find out how you stack up to new industry benchmarks for mobile page speed

Users are more likely to bounce on slower pages

Nati Shalom (2008) - Amazon found every 100ms of latency cost them 1% in sales

Page weight distribution on 2018-08-15

Choosing the right quality

JPEG with quality 100 (949 KiB)
JPEG with quality 85 (161 KiB)
JPEG with quality 70 (107 KiB)
JPEG with quality 55 (82 KiB)
JPEG with quality 40 (65 KiB)
JPEG with quality 25 (46 KiB)
JPEG with quality 10 (22 KiB)

Image quality metrics

  • Structural similarity (SSIM)
  • Peak Signal-to-Noise Ratio (PSNRHVS-M)
  • Butteraugli

Image encoders targeting a specific metric

Choosing a raster format

Generally performs better than JPEG 1
  1. Simone et al. (2009) - Subjective evaluation of JPEG XR image compression
JPEG XR browser support
Better compression performance than JPEG and JPEG XR 1
  1. Simone et al. (2009) - Subjective evaluation of JPEG XR image compression
JPEG 2000 browser support
Perfomance comparison of lossy WebP (blue) vs lossy JPEG (red) compression.
WebP produces images that are 25 % – 34 % smaller
WebP browser support

High Efficiency Image Format (HEIF),
Better Portable Graphics (BPG)

Based on HEVC intra-frame coding

Produces files that are approx. 28% smaller than JPEG and generally smaller than WebP

HEIF browser support

AV1 Image Format (AVIF)

Based on AV1 intra-frame coding

Same container format as HEIF

Specification not finalized

Which format should I use?

Use different raster formats for different browser clients

Generally prefer newer over older formats, if supported

AV1 is being broadly adopted in the industry. AVIF has a good chance to receive the same attention.

Don't use GIFs

Searching for that bug that no one else managed to find

Original GIF (780 KiB)
MP4 Video (57 KiB)
H.264 in MP4 container browser support

Vector formats (SVG)

Resolution scales indefinitely

Supports animation and interactivity

Use whenever possible!

Optimize SVGs

Original SVG (5.4 KiB)
SVG minified by SVGO (4.1 KiB; 24.5 % smaller)

Different image sizes for responsive layouts

<img srcset="mobile.jpg   480w,
             tablet.jpg   720w,
             desktop.jpg 1080w">
Above and below the fold content

Lazy loading with lazySizes

<img data-src="image.jpg" class="lazyload" />
<img data-srcset="mobile.jpg   480w,
                  tablet.jpg   720w,
                  desktop.jpg 1080w"

Perceived performance

Skeleton screens

Skeleton screen using grey areas for objects that are not loaded yet

Low-quality image placeholders

Reference image (54 KiB)
Low-resolution placeholder (442 B)

SVG image placeholders

Reference image (54 KiB)
SVG placeholder (936 B, 440 B w/ Brotli)

Creating SVG placeholders using SQIP

Reference image
Approximated SVG using Primitive

Measure, don’t guess!
PageSpeed Insights

Thank you!