Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Bilddateiformate fürs Web

Bilder bremsen das Web

Sie verursachen den weitaus grössten Anteil an Traffic einer gewöhnlichen Website. Bilder fürs Web sollen daher immer so leicht wie möglich sein, bzw. so stark komprimiert sein, dass die Qualitätseinbusse von Auge noch nicht sichtbar ist. Und sie sollen nur so gross sein, wie sie effektiv dargestellt werden. Das ist nicht ganz einfach bei all den unterschiedlich grossen Displays und der zurecht wachsenden Verbreitung responsiver Layouts. Trotzdem: Macht euch die Mühe und speichert jedes Foto und jede Grafik so optimal wie möglich. Es stehen 4½ Formate zur Auswahl und wenn ihr in Photoshop oder Illustrator «für Web speichert», gibts allerhand Einstellungsmöglichkeiten und einen Live-Vorher-Nachher-Vergleich samt Gewichtsangabe.

.jpg

24 Bit/16,7 Mio. Farben
Gute Wahl für Fotos und fotoähnliche Bilder

JPEGs können für einen progressiven Bildaufbau gespeichert werden. Das Bild wird so beim Laden zuerst in einer niedrigen Qualität «angedeutet» und in 3 Durchgängen geladen bis die endgültige Qualität sichtbar ist. Vorteil: Der User sieht von Anfang an schemenhaft einen Bildinhalt. Nachteil: Die Datei wird etwas schwerer dadurch. Wurde das Bild nicht für den progressiven Bildaufbau gespeichert, zeigt der Browser das Bild erst nach dem vollständigen Laden an. Wirklich sichtbar wird das heute nur noch mit den langsameren Internetverbindungen im «Outback». Zusätzlich kann die Bildqualität eines JPEGs beim Speichern annähernd stufenlos eingestellt werden – je schlechter desto leichter. Die Bezeichnung JPEG geht auf die «Joint Photographic Experts Group» zurück, welche die JPEG-Norm entwickelt hat.

Nachfolgend ein Qualitäts-Gewichts-Vergleich mit Bildern in doppelter Pixeldichte (retina) für unsere Laptops:

Und dasselbe noch in Standardpixeldichte für unsere grossen Schulbildschirme:

.png 8

8 Bit/256 Farben
Gutes Format für Grafiken und «harte Kanten»

Portable Network Graphics: Um trotz des «Farbmangels» weiche Farbabstufungen zu erreichen, kann ein Dithering (optisches Ineinandergreifen der Farben mittels Pixelneuanordnung) eingesetzt werden. Die Datei wird dadurch unbedeutend schwerer. Von den 3 Dithering-Methoden (Diffusion, Muster, Rauschen) ist Diffusion die natürlichste. Durch den Bildaufbau Interlaced wird das Bild beim Laden zeilenweise aufgebaut. Vor- und Nachteile wie beim progressiven JPG … sieht aber besser aus. Wirklich sichtbar wird das heute nur noch mit den langsameren Internetverbindungen im «Outback». PNG-8 bietet zudem die Möglichkeit, einzelne Pixel statt mit einer Farbe mit Transparenz zu versehen. Diese farblosen Pixel bilden «Löcher», durch welche der Hintergrund zu sehen ist. Hier ein Beispiel mit verschiedenen, heiklen Stellen. Urteilt selbst. Eigentlich wird PNG-8 nur noch für Kleinstgrafiken wie feine Linien oder Abbildungen, die nur aus Vertikalen und Horizontalen bestehen oder gelegentlich für eine Textur.

.png 24

24 Bit/16,7 Mio. Farben
Einziges Format für Bitmapgrafiken mit Alpha-Transparenz

Verlustfreie Bildkompression! Bietet als einziges Bitmapformat die Möglichkeit, eine Alpha-Transparenz zu speichern. Die Alpha-Transparenz funktioniert wie ein zusätzlicher Farbkanal und definiert, welche Bildteile wie stark deckend/transparent sind. Auch bei PNG-24 ist der Bildaufbau interlaced möglich. PNG-24 sind in der Regel ein Stück schwerer als JPEGs in entsprechender Qualität.

.gif

Einziges Bitmapformat für Moving-Gifs … logisch
Ansonsten passé

Graphics Interchange Format: Vorläufer der PNG-8 mit den selben Eigenschaften und Möglichkeiten, aber mit einer schlechteren Kompression. Es ist das einzige Webbitmapformat, das mehrere Einzelbilder speichern kann und so Animationen möglich macht – ohne Ton wohl gemerkt. Nicht verwechseln mit Videodateien. Passt auf: Lange Animationen werden schnell schwer und bremsen den Browser beim Abspielen.

.svg

Vektorgrafiken im Web
Auflösungsunabhängig!

Scalable Vector Graphics: Für Nicht-Pixelgrafiken das Format der Zukunft, weil ultraleicht, zugänglich für Suchmaschinen und per CSS und Skripte steuerbar, denn es handelt sich bei SVG um einen entfernten Verwandten von HTML. Der Einbau funktioniert eigentlich gleich wie bei anderen Bildformaten: in HTML via Image-Tag und in CSS via Hintergrundbild. Da Safari 6 und ältere Versionen Schwierigkeiten haben und Internet Explorer 8 und älter SVG gar nicht verstehen, ist es nicht ganz so einfach. Ich komme im Detail darauf zurück. Trotzdem hier mal ein Gewichtsvergleich. Man schrumpfe mal das Browserfenster, um die Qualitätseinbusse beim PNG zu sehen.

.webp

Vielleicht mal eine gute Wahl für Fotos und fotoähnliche Bilder

Einfach damit niemand sagen kann, ich hätte was unterschlagen. WebP ist ein neues Webbilddateiformat aus dem Hause Google. Es sieht sehr vielversprechend aus in Sachen Qualität vs. Gewicht – sprich ein Stück besser als JPG. Zur Zeit ist das Format allerdings nur von Googles eigenem Browser Chrome lesbar und für andere Browser sind Fallbacks nötig. Oder Plugins; das Zielpublikum hat aber grundsätzlich keine exotischen Plugins installiert. Zu umständlich für mich, aber sicher interessant, was daraus wird, wenn Firefox, Safari und Microsoft Edge auf diesen Zug aufspringen. Beim Retina-Beispiel mit dem Wassertrinkerfoto oben würden wir in der Maximalqualität rund 50 % Gewicht sparen.


Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.