Working Draft

Revision 346: Wie optimiere ich meine Bilder fürs Web?


Listen Later

Einige Jahre nach der ersten Sendung (158) mit Trivago- und Ex-Akamai Performance-Experte Tobias Baldauf (Twitter, GitHub) ist es wieder so weit: Tobias besucht uns und gibt sein Wissen preis. Dieses mal besprechen wir sehr gezielt das Thema Bildoptimierungen.

Schaunotizen
[00:01:36] SQIP – aktueller Status, die Zukunft
SQIP ist eine Rendering-Technologie, die auf SVG basiert. Diese ermöglicht es kleine Platzhalter-Bilder zu erstellen und auszuliefern, bevor das eigentliche Bild geladen ist. Es gibt einige Implementierungen in CMS, wie Gatsby und Kirby.
[00:13:55] Progressives Image Encoding
Abseits von SQIP, sprechen wir über Bild-Encodings, die Bilder schneller rendern. Dazu zählt Progressive JPEG.
Weitere Links:

  • Intersection Observer API
  • JPEG-Rehabilitation im Angesicht der Radware-Studie
  • Der paradoxe Kayak-Effekt
  • SVGO – SVG Optimierungstool
  • ImageOptim – Bild-Optimierungs-GUI für macOS
  • Einige Bild-Formate, die man auch mal nutzen kann:
    • MOZJPEG
    • WebP, (wenn auch z.Z. nur in diesen Browsern unterstützt)
    • JPEG 2000
    • JPEG XR
    • HEIFF
    • FLIF
    • Image-Optimierung + Art Direction in der Cloud: Cloudinary
    • MSS – Regions of Interest in Bildern finden
    • [00:55:04] Web Performance Budgets != Fixed Thresholds
      Web Performance Budgets sind sehr beliebt, sollten aber keine festen Thresholds haben, argumentiert Tobias.
      [01:04:32] UX: Web Performance und Revenue Impact
      Oft ist die Erwartung, dass man durch Bildkompression bessere Performance erreicht und somit Nutzer mehr durch Bildgalerien klicken. Nachforschungen von Trivago zeigen allerdings, dass die Benutzer einige Zeit brauchen, bis die bessere Performance beim Benutzer verstanden ist. Das bedeutet also: Geduld, Kadenz beachten, User in Kohorten einteilen.
      [01:11:35] Ein Ausblick auf die Bildalgorithmen der Zukunft
      Wir sprechen über die Zukunft und schauen auf die zunehmende Fragmentierung im Image-Format-Markt. Tobias skizziert Custom Decoder für Bilder mit WebAssembly.
      [01:23:28] Keine Schaunotizen
      Neue WebPerf Conferences in Europa: DeltaV
      Es gibt wieder eine Konferenz in Europa die sich mit dem Thema Web Performance beschäftigt.
      ...more
      View all episodesView all episodes
      Download on the App Store

      Working DraftBy Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer


      More shows like Working Draft

      View all
      Chaosradio by Chaos Computer Club Berlin

      Chaosradio

      7 Listeners

      Bits und so by Undsoversum GmbH

      Bits und so

      23 Listeners

      Wissenschaft und Technik by Bayerischer Rundfunk

      Wissenschaft und Technik

      9 Listeners

      Raumzeit by Metaebene Personal Media - Tim Pritlove

      Raumzeit

      11 Listeners

      Logbuch:Netzpolitik by Metaebene Personal Media - Tim Pritlove

      Logbuch:Netzpolitik

      7 Listeners

      c’t uplink - der IT-Podcast aus Nerdistan by c’t Magazin

      c’t uplink - der IT-Podcast aus Nerdistan

      5 Listeners

      Apfelfunk by Malte Kirchner & Jean-Claude Frick

      Apfelfunk

      8 Listeners

      heiseshow by heise online

      heiseshow

      2 Listeners

      UKW by Metaebene Personal Media - Tim Pritlove

      UKW

      1 Listeners

      kurz informiert by heise online by heise online

      kurz informiert by heise online

      2 Listeners

      Mac & i - der Apple-Podcast by Mac & i

      Mac & i - der Apple-Podcast

      0 Listeners

      Wo wir sind ist vorne. by Moritz Glantz und Sarah Groß

      Wo wir sind ist vorne.

      0 Listeners

      Bit-Rauschen: Der Prozessor-Podcast von c’t by c't Magazin

      Bit-Rauschen: Der Prozessor-Podcast von c’t

      1 Listeners

      KI-Update – ein heise-Podcast by Isabel Grünewald, heise online

      KI-Update – ein heise-Podcast

      6 Listeners

      Passwort - der Podcast von heise security by Dr. Christopher Kunz, Sylvester Tremmel

      Passwort - der Podcast von heise security

      3 Listeners