Aus dem Kurs: Grundkurs Webtechniken 1: HTML

Überblick: die wichtigsten Grafikformate im Web – Tutorial zu HTML

Aus dem Kurs: Grundkurs Webtechniken 1: HTML

Gratismonat starten Für Ihr Team erwerben

Überblick: die wichtigsten Grafikformate im Web

“

Ein Bild sagt nicht nur mehr als 1000 Worte. Im Web lädt es oft auch länger, denn jedes Kilobyte muss vom Webserver zum Browser übertragen werden. Die Dateigröße von Bildern ist im Web also wichtig und daher ist es nicht überraschend, dass Formate mit Dateikompression am beliebtesten sind. Los geht es hier mit einem kleinen Überblick. Zunächst einmal Rastergrafiken, also Bilder, die aus Pixeln bestehen. Sehr beliebt sind JPEG mit der Dateiendung jpg. Das ist ein Kompromiss aus Dateigröße und Bildqualität. Das kann man selbst einstellen. Ping, PNG geschrieben, ist ein verlustfreies Dateiformat. Das heißt also, die Qualität ist sehr gut, aber die Dateien sind meistens etwas größer und GIF gibt es eigentlich nur noch für Animationen in Social Media. Ansonsten wird das kaum noch benötigt. WebP ist ein relativ neues Dateiformat. Das wird aber überholt von zwei anderen Dateiformaten namens JPEG XL, was relativ neu ist und sehr, sehr gut komprimiert und besonders von AVIF. Das scheint der Kandidat, dem die Zukunft gehört. Denn die großen Browserhersteller haben sich anscheinend darauf geeinigt, dass sie AVIF unterstützen und nicht JPEG XL und WebP komprimiert einfach schlechter als dieses neue Format. Momentan hat AVIF das Problem, dass alte Browser und andere Programme das noch nicht richtig unterstützen. Aber das scheint nur noch eine Frage der Zeit zu sein. Vektorgrafiken bestehen anders als Rastergrafiken nicht aus Pixeln, sondern aus mathematischen Berechnungen. Der große Vorteil ist, dass sie skalierbar sind. SVG Scalable Vector Graphics, da steckt das schon drin. Das heißt, man kann Vektorgrafiken beliebig vergrößern, ohne dass sie an Qualität verlieren. Das geht mit allen Pixelbildern nicht. Kurzer Überblick zu den typischen Anwendungsgebieten. Logos sind ganz oft JPEG, PNG oder SVG. Fotos, normale Fotos sind meist JPEG und in Zukunft vielleicht AVIF. Und Fotos mit Transparenz sind PNG, weil das kann JPEG nicht, aber AVIF als Dateiformat kann auch Transparenz. Das wird man also sehen, wie sich das entwickelt. Und Icons sind momentan am beliebtesten mit SVG, weil kleine Icons, die können dann beliebig skaliert werden und sind relativ groß. Egal, welches Dateiformat Sie nutzen, Sie sollten auf jeden Fall darauf achten, dass es optimiert ist. Das heißt, das Bild sollte nicht größer sein als nötig und es sollte komprimiert sein. Hier sind zwei Online Dienste compressordie.com, mit dem man diverse Dateiformate komprimieren kann und es gibt hier noch squoosh.app und hier kann man einfach ein Bild hinziehen und dann wird es optimiert, komprimiert. Und hier ist ein Beispiel. Das Original ist ein PNG-Bild mit 1,62 MB und mit optimiertem JPEG bleiben davon noch 154 über. Einen Qualitätsunterschied kann man wirklich kaum sehen. Und mit dem Dateiformat AVIF wird das noch einmal reduziert auf 93,9. So weit der Überblick zu Grafikformaten im Web.

Inhalt