Optimale Bildformate im 21. Jahrhundert

Seit den frühen Tagen des Webs gehören Bilder zum Inventar. Wie haben sich Bildformate im Laufe der letzten knapp 30 Jahre gewandelt? Und wie hilft uns dieses Wissen heute, bessere und schnellere Websites zu bauen?

Diesen Fragen und einem Blick in die Zukunft widmet sich dieser Talk.

Transcript

1. Optimale Bildformate im 21. Jahrhundert
   „Für Web speichern“
   

   View Slide

2. It’s a me!
   Hey 👋
   • Simon Kraft
   
   
   • dewp.space/@simon
   
   
   • WordPress seit 2008
   
   
   • Señor Product Owner WP @ group.one
   
   
   • Möchtegern Fotograf
   

   View Slide

3. Simon Kraft 18.07.2023
   Lossy und
   Lossless
   

   View Slide

4. - Lossy
   Nutzt Methoden, die Bildqualität
   opfern, um die Dateigröße zu
   reduzieren.
   

   View Slide

5. - Lossless
   Nutzt Methoden, die die Dateigröße reduzieren,
   ohne dabei Bildqualität einzubüßen.
   
   
   

   View Slide

6. Simon Kraft 18.07.2023
   Eine kurze
   Geschichte der
   Bildformate
   HÖHLENMALEREI AUS LASCAUX CA. 36.000 – 19.000 V. CHR.
   

   View Slide

7. Simon Kraft 18.07.2023
   Bildformate
   GIF
   JPG
   PNG
   WebP
   SVG
   RAW
   HEIC
   AVIF
   BMP
   TIFF
   EPS
   

   View Slide

8. Simon Kraft 18.07.2023
   Bildformate
   GIF
   JPG
   PNG
   WebP
   SVG
   

   View Slide

9. Simon Kraft 18.07.2023
   • Von CompuServe als das Graphics Interchange Format erfunden
   
   
   • Transparenz und Animationen
   
   
   • Max. 256 Farben (255 bei Transparenz)
   
   
   • Lossless
   
   
   • Geringe Dateigröße
   

   GIF “Gif89a”
   

   View Slide

10. View Slide

11. Simon Kraft 18.07.2023
    • Von praktisch allen Editoren und Browsern
    unterstützt
    
    
    • Sehr kleine Dateigröße
    
    
    • Transparente + Animierte GIFs
    GIF Pros / Cons
    • Nur 256 Farben
    
    
    • Komprimiertes Video ist oft kleiner als
    animierte GIFs
    

    View Slide

12. Simon Kraft 18.07.2023
    • Von praktisch allen Editoren und Browsern
    unterstützt
    
    
    • Sehr kleine Dateigröße
    
    
    • Transparente + Animierte GIFs
    GIF Pros / Cons
    • Nur 256 Farben
    
    
    • Komprimiertes Video ist oft kleiner als
    animierte GIFs
    

    View Slide

13. Simon Kraft 18.07.2023
    • Optimal für kleine Dateigrößen
    
    
    • Wenn Animation, aber kein Video gewünscht ist
    
    
    • Wenn nicht zu viele Farben (aka nicht für Fotos)
    

    GIF Ideale Verwendung
    

    View Slide

14. Simon Kraft 18.07.2023
    Bildformate
    GIF
    JPG
    PNG
    WebP
    SVG
    

    View Slide

15. Simon Kraft 18.07.2023
    • 1992 von der Joint Photographic Experts Group (JPEG) geschaffen
    
    
    • Wurde schnell populär
    
    
    • 65.535 Farben (16 bit)
    
    
    • Lossy (vor allem bei höheren Kompressionen)
    
    
    • Kompression auf einer Skala 1-100 (WP nutzt 80 als Standard)
    
    
    • JPG2000 war Versuch eines Nachfolge Formats
    JPG
    

    View Slide

16. Simon Kraft 18.07.2023
    • Super Support überall (Standard-Format)
    
    
    • Beste Dateigröße/Qualität
    
    
    • Viel mehr Farben als GIF
    JPG Pros / Cons
    • Verliert bei hoher Kompression Qualität
    
    
    • Für professionelle Fotografie sind 65.000
    Farben nicht genug
    

    View Slide

17. Simon Kraft 18.07.2023
    • Wenn geringe Größe wichtig, aber hohe Qualität gewünscht sind
    JPG Ideale Verwendung
    

    View Slide

18. Simon Kraft 18.07.2023
    Bildformate
    GIF
    JPG
    PNG
    WebP
    SVG
    

    View Slide

19. Simon Kraft 18.07.2023
    • Portable Network Graphics
    
    
    • 16 Millionen Farben
    
    
    • Lossless
    
    
    • Kompression ähnlich der von ZIP auf ganze Datei, nicht auf Bildqualität
    
    
    • Sehr hohe Bildqualität
    
    
    • Transparenz
    PNG
    

    View Slide

20. Simon Kraft 18.07.2023
    • Beste Bildqualität unter Standardformaten
    
    
    • Semi-Transparenz
    PNG Pros / Cons
    • Größte Dateigröße unter Standardformaten
    
    
    • Keine Animation
    

    

    View Slide

21. Simon Kraft 18.07.2023
    • Hohe Bildqualität
    
    
    • Semi-Transparente Bildelemente
    PNG Ideale Verwendung
    

    View Slide

22. Simon Kraft 18.07.2023
    Bildformate
    GIF
    JPG
    PNG
    WebP
    SVG
    

    View Slide

23. Simon Kraft 18.07.2023
    • Scalable Vector Graphics
    
    
    • Kein wirkliches Bildformat
    
    
    • Altes Format, erst seit einigen Jahren breiter Browser-Support
    
    
    • Farben: alle RGB oder HEX Werte
    
    
    • Kann Serverseitig komprimiert werden - etwa gzip
    
    
    • Vektoren = unbegrenzte Skalierung
    
    
    • Durch Skripte dynamisch anpassbar
    SVG
    

    View Slide

24. Simon Kraft 18.07.2023
    • Unendliche Skalierbarkeit
    
    
    • Ziemlich kleine Dateigröße
    
    
    • Skriptbarkeit (Flexibilität)
    SVG Pros / Cons
    • Skriptbarkeit (Security)
    
    
    • Kein nativer WordPress Support
    
    
    • Für Fotos praktisch nicht nutzbar
    

    

    View Slide

25. View Slide

26. Simon Kraft 18.07.2023
    • Zum direkten Einbetten auf Websites
    
    
    • Wenn Bilder im Browser geändert werden sollen
    
    
    • Wenn Bilder auf Input reagieren sollen
    SVG Ideale Verwendung
    

    View Slide

27. Simon Kraft 18.07.2023
    Bildformate
    GIF
    JPG
    PNG
    WebP
    SVG
    

    View Slide

28. Simon Kraft 18.07.2023
    • Von Google 2010 entwickelt
    
    
    • Seit einigen Jahren solider Browser-Support
    
    
    • Als Ersatz für alle genannten Formate angedacht
    
    
    • 16 Millionen Farben
    
    
    • Lossy und Lossless als Option verfügbar
    WebP
    

    View Slide

29. Simon Kraft 18.07.2023
    • Sehr flexibel
    
    
    • Könnte das neue Standardformat werden
    WebP Pros / Cons
    • Bilder sind nicht zwingend kleiner
    
    
    • Kein nativer Support in WordPress
    

    View Slide

30. Simon Kraft 18.07.2023
    • Wenn Bilder wirklich kleiner werden
    
    
    • Wenn Rücksicht auf Legacy-Formate nicht wichtig ist
    WebP Ideale Verwendung
    

    View Slide

31. Simon Kraft 18.07.2023
    Zusammenfassung
    GIF
    JPG
    PNG
    WebP
    SVG
    

    View Slide

32. Simon Kraft 18.07.2023
    Zusammenfassung
    GIF
    JPG
    PNG
    WebP
    SVG
    Klein, 256 Farben, Transparent, Animation
    Gute Bildqualität bei niedriger Dateigröße
    Semi-Transparent, beste Bildqualität
    Vektor-Format, dynamisch anpassbar
    Möglicher Nachfolger für alle anderen Formate?
    

    View Slide

33. Simon Kraft 18.07.2023
    Bilder in/für
    WordPress
    optimieren
    ESA/WEBB, NASA & CSA, L. ARMUS, A. EVANS 2023
    

    View Slide

34. Warum eigentlich?
    • Ganz einfach: Performance
    
    
    • Bilder können schnell 50% der Ladezeit
    verursachen
    
    
    • WordPress komprimiert Bilder (nur
    moderat)
    
    
    • Auch „Für Web speichern“ hat noch Luft
    nach oben
    

    View Slide

35. Simon Kraft 18.07.2023
    • Manuell
    
    
    • Richtiges Dateiformat auswählen
    
    
    • (Wenn möglich) richtige Kompression auswählen
    
    
    • Bild mit richtigen Maßen speichern
    
    
    GIMP / Photoshop / Affinity Photo / Pixelmator
    Was kann man da machen?
    

    View Slide

36. Simon Kraft 18.07.2023
    • Automatisch
    
    
    • Plugin installieren
    
    
    • Einstellungen setzen
    
    
    • Bilder hochladen
    
    
    • (Richtiges Dateiformat auswählen)
    
    
    EWWW / Imagify / ShortPixel / Optimus
    Was kann man da machen?
    

    View Slide

37. Fragen?
    Vielen Dank
    • simon.blog
    
    
    • dewp.space/@simon
    

    View Slide