Jetzt aber schnell! Bildoptimierung für das Web Michael Seifert - 2018-09-28 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 Generally performs better than JPEG 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 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
Designed to be conformant to HEIF
AV1 is supported in Chrome >=70 and Firefox Nightly.
=> AVIF support expected to come
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 H.264 in MP4 container browser support Vector formats (SVG) Resolution scales indefinitely
Supports animation and interactivity
Use whenever possible!
Different image sizes for responsive layouts <img srcset="mobile.jpg 480w,
tablet.jpg 720w,
desktop.jpg 1080w">
Above and below the fold content <img data-src="image.jpg" class="lazyload" />
<img data-srcset="mobile.jpg 480w,
tablet.jpg 720w,
desktop.jpg 1080w"
class="lazyload">
Skeleton screens Skeleton screen using grey areas for objects that are not loaded yet Low-quality image placeholders Creating SVG placeholders using SQIP