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“
2. It’s a me! Hey 👋 • Simon Kraft • dewp.space/@simon • WordPress seit 2008 • Señor Product Owner WP @ group.one • Möchtegern Fotograf
3. Simon Kraft 18.07.2023 Lossy und Lossless
4. - Lossy Nutzt Methoden, die Bildqualität opfern, um die Dateigröße zu reduzieren.
5. - Lossless Nutzt Methoden, die die Dateigröße reduzieren, ohne dabei Bildqualität einzubüßen.
6. Simon Kraft 18.07.2023 Eine kurze Geschichte der Bildformate HÖHLENMALEREI AUS LASCAUX CA. 36.000 – 19.000 V. CHR.
7. Simon Kraft 18.07.2023 Bildformate GIF JPG PNG WebP SVG RAW HEIC AVIF BMP TIFF EPS
8. Simon Kraft 18.07.2023 Bildformate GIF JPG PNG WebP SVG
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”
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
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
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
14. Simon Kraft 18.07.2023 Bildformate GIF JPG PNG WebP SVG
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
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
17. Simon Kraft 18.07.2023 • Wenn geringe Größe wichtig, aber hohe Qualität gewünscht sind JPG Ideale Verwendung
18. Simon Kraft 18.07.2023 Bildformate GIF JPG PNG WebP SVG
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
20. Simon Kraft 18.07.2023 • Beste Bildqualität unter Standardformaten • Semi-Transparenz PNG Pros / Cons • Größte Dateigröße unter Standardformaten • Keine Animation 

21. Simon Kraft 18.07.2023 • Hohe Bildqualität • Semi-Transparente Bildelemente PNG Ideale Verwendung
22. Simon Kraft 18.07.2023 Bildformate GIF JPG PNG WebP SVG
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
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 

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
27. Simon Kraft 18.07.2023 Bildformate GIF JPG PNG WebP SVG
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
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
30. Simon Kraft 18.07.2023 • Wenn Bilder wirklich kleiner werden • Wenn Rücksicht auf Legacy-Formate nicht wichtig ist WebP Ideale Verwendung
31. Simon Kraft 18.07.2023 Zusammenfassung GIF JPG PNG WebP SVG
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?
33. Simon Kraft 18.07.2023 Bilder in/für WordPress optimieren ESA/WEBB, NASA & CSA, L. ARMUS, A. EVANS 2023
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
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?
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?
37. Fragen? Vielen Dank • simon.blog • dewp.space/@simon