Revision 346: Wie optimiere ich meine Bilder furs Web?

Published: July 22, 2018, 10:10 p.m.

Einige Jahre nach der ersten Sendung (158) mit Trivago- und Ex-Akamai\nPerformance-Experte Tobias Baldauf (Twitter, GitHub) ist es wieder so weit:\nTobias besucht uns und gibt sein Wissen preis. Dieses mal besprechen wir sehr\ngezielt das Thema Bildoptimierungen.\n\n\nSCHAUNOTIZEN\n\n[00:01:36] SQIP \u2013 AKTUELLER STATUS, DIE ZUKUNFT\n\nSQIP ist eine Rendering-Technologie, die auf SVG basiert. Diese erm\xf6glicht es\nkleine Platzhalter-Bilder zu erstellen und auszuliefern, bevor das eigentliche\nBild geladen ist. Es gibt einige Implementierungen in CMS, wie Gatsby und Kirby.\n\n[00:13:55] PROGRESSIVES IMAGE ENCODING\n\nAbseits von SQIP, sprechen wir \xfcber Bild-Encodings, die Bilder schneller\nrendern. Dazu z\xe4hlt Progressive JPEG.\nWeitere Links:\n\n\n\n * Intersection Observer API\n * JPEG-Rehabilitation im Angesicht der Radware-Studie\n * Der paradoxe Kayak-Effekt\n * SVGO \u2013 SVG Optimierungstool\n * ImageOptim \u2013 Bild-Optimierungs-GUI f\xfcr macOS\n * Einige Bild-Formate, die man auch mal nutzen kann:\n * MOZJPEG\n * WebP, (wenn auch z.Z. nur in diesen Browsern unterst\xfctzt)\n * JPEG 2000\n * JPEG XR\n * HEIFF\n * FLIF\n * Image-Optimierung + Art Direction in der Cloud: Cloudinary\n * MSS \u2013 Regions of Interest in Bildern finden\n\n[00:55:04] WEB PERFORMANCE BUDGETS != FIXED THRESHOLDS\n\nWeb Performance Budgets sind sehr beliebt, sollten aber keine festen Thresholds\nhaben, argumentiert Tobias.\n\n[01:04:32] UX: WEB PERFORMANCE UND REVENUE IMPACT\n\nOft ist die Erwartung, dass man durch Bildkompression bessere Performance\nerreicht und somit Nutzer mehr durch Bildgalerien klicken. Nachforschungen von\nTrivago zeigen allerdings, dass die Benutzer einige Zeit brauchen, bis die\nbessere Performance beim Benutzer verstanden ist. Das bedeutet also: Geduld,\nKadenz beachten, User in Kohorten einteilen.\n\n[01:11:35] EIN AUSBLICK AUF DIE BILDALGORITHMEN DER ZUKUNFT\n\nWir sprechen \xfcber die Zukunft und schauen auf die zunehmende Fragmentierung im\nImage-Format-Markt. Tobias skizziert Custom Decoder f\xfcr Bilder mit WebAssembly.\n\n\n[01:23:28] KEINE SCHAUNOTIZEN\n\nNEUE WEBPERF CONFERENCES IN EUROPA: DELTAV\n\nEs gibt wieder eine Konferenz in Europa die sich mit dem Thema Web Performance\nbesch\xe4ftigt.