# Grafiken, Bilder & Videos
Grafiken, Bilder und Videos sind besonders wichtig im Internet. Viele User scannen Text nur und lesen nicht alles durch. Bilder können benutzt werden, um die Aufmerksamkeit zu lenken und komplexe Dinge einfach zu erklären.
Viele Besucher einer Website verlassen die Seite wieder, wenn sie zu lange braucht, um zu laden. Die Schwelle hierfür liegt bei etwa 3 Sekunden. Da Bilder und Videos sehr ressourcenintensiv (Speicher, Ladezeit, Anzeigeleistung) sind, musst du sicherstellen, dass diese optimiert worden sind und falls dies noch nicht geschehen ist, du die Medien selbst noch aufbereitest.
# Welches Format für welchen Anwendungszweck?
Grundsätzlich gibt es zwei Kategorien, um Bilddateien im Web zu verwenden. Lossy und Lossless. Lossy bedeutet, dass beim Speichern und verändern der Bilddatei zunehmend die Qualität abnimmt, dafür aber die Dateigrösse sehr stark reduziert werden kann. Lossless hingegen kann ohne Verlust gespeichert werden, meistens steigt dadurch aber Dateigrösse.
# JPG
JPGs gehören zur Kategorie Lossy und sind am besten geeignet, um Fotos und Bilder mit vielen unterschiedlichen Farben darzustellen. Beispielsweise das unten gezeigte Foto eines Strandes. JPGs können gut komprimiert werden, d.h. ihre Dateigrösse kann verringert werden, ohne dass die Bildqualität nennenswert darunter leidet. JPGs unterstützen keine transparenten Flächen.
Bild von Fezbot2000 auf Unsplash
# PNG
PNGs unterstützen transparente Bereiche und sind am besten geeignet, wenn ein Bild nicht viele unterschiedliche Farben enthält oder es wichtig ist, dass etwas hinter dem Bild sichtbar bleibt. Da PNGs zur Kategorie lossless gehören, ist auch bei erhöhter Komprimierung die Bildqualität meist besser als bei JPG. Aufgrund von grösseren Dateien verlangsamt sich aber damit auch oft die Ladezeit deiner Website. Wenn immer möglich solltest du dieses Format nicht für Fotos und detailreiche Bilder wählen.
Bild von # WebP
WebP ist ein Bildformat von Google, dass die Vorteile von JPG (Komprimierung) und PNG (Transparenzen) kombiniert. Im Vergleich zu JPG/PNG bietet WebP bis zu 30% Dateigrösseneinsparungen. Die Browserunterstützung für WebP ist bei etwa 80%, sodass Websites für modernere Browser dieses Format benutzen können (Stand August 2020).
Weiterführende Links
- WebP – A New Image Format For The Web (developers.google.com)
# GIF
Das GIF Format ist insbesondere für kurze, animierte Bildabläufe geeignet. Im Prinzip ist es ein Video, welches als Bildformat gespeichert werden kann. Dadurch kannst du es auch wie ein normales Bild in HTML und CSS verwenden. Obwohl GIF zur Kategorie Lossless gehört ist dieses Format ohne starke Komprimierung meist kaum zu verwenden. Detailreiche GIFs können sehr schnell mehrere Megabyte gross sein. Unser Beispiel unten etwa "wiegt" 5.2MB. Zum Vergleich, das Strandfoto als JPG oben kommt gerade mal auf 0.8MB und liesse sich noch stärker komprimieren. Obwohl du auch ein statisches Bild als GIF speichern kannst, gibt es nur selten sinnvolle Anwendungszwecke dafür.
Bild von Gfycat
# SVG
SVG steht für “Scalable Vector Graphics” und hat sich als Standard für einfache, schematische Bilder, wie z.B. Icons und Logos etabliert. SVGs sind klein, lassen sich per CSS und Javascript animieren und im Aussehen verändern. Sie sind immer maximal scharf aufgelöst, da sie pfadbasiert aufgebaut sind und nicht pixelbasiert.
Im folgenden Beispiel ist auf den ersten Blick kaum ein Unterschied zu erkennen. Doch was passiert, wenn wir beide Grafiken vergrössern?
Probiere es aus
Aktiviere die Checkbox um den Unterschied beim Vergrössern zwischen PNG (links) und SVG (rechts) zu sehen
# Bildgrössen und Komprimierung
Bevor du deine Website im Internet zur Verfügung stellst, solltest du alle Bilder optimieren. Am einfachsten geht das mit einem Programm wie Optimage (Mac) oder ImageOptim (Windows/Mac). Dort kannst du deine Bilder einfach hineinziehen und das Programm erledigt den Rest. Der Qualitätslevel kann in den Einstellungen auf 80–90% eingestellt werden, um noch mehr Dateigrösse einzusparen. Der Besucher deiner Website sieht das meistens nicht, sodass eine schlechtere Bildqualität kein Manko darstellt. Bei Optimage kannst du zusätzlich einstellen, dass auch die Abmessungen deines Bildes verkleinert werden sollen.
Screenshot des Programms “ImageOptim”
# Bilder für das Web speichern
Neben der Dateigrösse sind auch die Abmessungen deiner Bilder relevant. Wie gross sollte ein Bild auf deiner Website also sein? Das lässt sich nicht allgemeingültig sagen, da Bilder heutzutage auch in einfacher, zweifacher oder dreifacher Auflösung für verschiedenste Screens ausgegeben werden können. Um es einfach zu halten, halte dich an folgende Daumenregel.
- Schaue, wie gross dein Bild erscheinen würde auf einem 27"-Bildschirm.
- Untersuche das Bild mit den Developer Tools. Im Responsive Modus kannst du als Auflösung 1920×1080 Pixel angeben. Wenn du das Bild untersuchst, siehst du die Abmessungen. In unserem Beispiel sind das 742×495 Pixel.
- Nehme von den 742×495 Pixel das Doppelte. Dein Bild sollte demnach 1484×990 Pixel gross sein. So wird es auf vielen Geräten scharf angezeigt.
Wichtig ist vor allem, dass du Bilder nicht bedeutend grösser einbettest, als sie dargestellt werden. Sofern ein Bild grösser als etwa 200 KB ist, sollte das ein Alarmzeichen für dich sein, dass du hier noch optimieren kannst. Die Abmessungen eines Bildes kannst du mit vielen verschiedenen Programmen verändern. Etwa mit dem zuvor erwähnten Optimage, der vorinstallierten Vorschau-App beim Mac, oder natürlich auch mit Adobe Photoshop.
# Videos
Videos sind am besten bei einem Videoservice wie Vimeo oder YouTube aufgehoben. Dort bekommst du einen Embed-Code (<iframe>), mit dem du das Video bei dir einbetten kannst. Der Vorteil an diesen Diensten ist, dass sie oft kostenlos sind und riesige Videos für dich speichern. Ausserdem wird dein Video auch in verschiedenen Auflösungen zur Verfügung gestellt, sodass die Qualität sich automatisch der verfügbaren Bandbreite deiner User angepasst wird. So hast du weniger Arbeit und kannst schnell Videos zur Verfügung stellen.
Nichts desto trotz wollen wir hier erwähnen, dass es natürlich auch möglich ist, Videodateien beispielsweise im MP4 Format direkt in HTML zu verwenden. Das geht mit dem <video> Tag. Damit Nutzer dein Video auch abspielen können, braucht es zudem noch das controls Attribut. Dadurch erscheinen, ähnlich wie bei Youtube oder Vimeo, Bedienelemente unterhalb des Videos. In HTML sieht das dann etwa so aus:
<video src="waves.mp4" controls loop autoplay muted></video>
Ergebnis
Mehr zu Thema Video