Kontakt

Allgemeines zu Bildern und Grafiken

Bilder und Grafiken im Web: Welches Dateiformat für welches Bild und in welcher Auflösung. Was man bei responsiven Layouts beachten sollte und andere nützliche Informationen.

Welches Dateiformat wofür

Grafik, auch mit Text, wenn nicht gleich als SVG, immer als PNG.

Fotos als JPG.

Sprites immer als PNG (wegen der erforderlichen Transparenz...).

GIFs werden nur noch für animierte Bilder eingesetzt.

Bilderrahmen

Bilderrahmen können sehr einfach über das Stylesheet erzeugt werden. Dadurch ist die Dateigröße der Bilder kleiner und man kann Farben und Größen einfach und zentral ändern. Also den Entwickler machen lassen.

Auflösung und Speichern

72 dpi sind ausreichend, auch für Retina Displays.

JPGs als "progressive" abspeichern, der Bildaufbau erfolgt sonst von oben nach unten. Fällt bei schlechten Internetanbindungen auf.
Auch "für Web optimiert" abspeichern ist sehr empfehlenswert. Photoshop erzielt hier recht gute Ergebnisse. Für MAC-User: ImageOptim soll sehr gute Ergebnisse liefern.

Sprites

Kommen viele kleine Grafiken zum Einsatz, lohnen sich CSS-Sprites. Wichtig wäre hier, dass die Abstände zwischen den Icons irgendwie "genormt" sind. Auch eine einheitliche "Richtung" (alles nebeneinander oder untereinander) erfreut den Entwickler.

Es gibt auch SVG-Sprites. Diese können aber automatisiert erstellt werden.

Grundsätzlich sind SVGs einem PNG vorzuziehen, allein wegen der zu übertragenden Datenmenge. Auch sind Sprites im herkömmlichen Sinne hier meisten gar nicht notwendig. Bei einem SVG können hover- oder andere Effekte auch mit CSS erzielt werden.

Pattern

Pattern immer so klein wie möglich. Da sie meist als Hintergrundbild eingesetzt werden, kann man auch mehrere verschiedene Bilder anzeigen. Bildschirmfüllende Hintergrundbilder, die nicht als Pattern ausführbar sind, sollten mind. 2560px breit und 1600px hoch sein.

Aufbereitung für verschiedene Bildschirmgrößen

Responsive Bilder haben (hatten) einen Nachteil: Auf kleinen Monitoren wurde dasselbe Bild geladen wie auf großen, was gerade auf mobilen Geräten zu überflüssig großen und zeitfressenden Downloads geführt hat. Seit nahezu alle verwendeten Browser das <srcset>- sowie das <picture>-Element beherrschen, und ältere Browser mittels eines "Polyfills", hat sich hier viel getan.

srcset

Hier wird dem Browser ein Bild in verschiedenen Größen zum Download angeboten. Zusätzlich werden Anweisungen mitgeliefert, wie groß das Bild bei welcher Monitorgröße sein wird. Der Browser "wählt" dann die am besten passende Bildgröße aus.

picture

Wie bei srcset, aber mit der Möglichkeit, je nach Monitorgröße oder -ausrichtung andere Bilder zu laden. So kann z.B. auf einem Tablet im Hochformat auch ein hochformatiges Bild angezeigt werden, im Querformat ein querformatiges. Hier kann man also je nach Monitorausrichtung und -größe "Art Direction" betreiben.

Die entsprechenden Bilder werden auf dem Webserver aus dem größten Bild automatisch erzeugt. Man legt also nur letzteres an und läd dieses hoch.

Vorsicht: Bilder/Grafiken können auf Smartphones auch mal größer als auf der Screen sein! Es empfiehlt sich daher, diese erst zu finalisieren, wenn das Layout komplett steht und getestet ist!

Aufbereitung von Bildern für hochauflösende Displays

Praktisch alle Tablets und Smartphones neuerer Bauart haben hochauflösende Displays. Auch viele Notebooks und Desktopmonitore sind so ausgestattet.

Hochauflösende Displays werden als 4K- oder 5K-Monitore oder als Retina-Displays (Apple) bezeichnet.

Hochauflösende Displays haben physikalisch mehrere Pixel, wo "normale" Displays nur eines haben. Folge: Kommt ein Bild mit normaler Auflösung daher, so teilt das hochauflösende Display ein Bildpixel auf z.B. 4 physikalische Pixel auf. Ergebnis: Das Bild, insbesondere ein PNG, ist unscharf.
In der Darstellung bleibt ein Pixel jedoch ein Pixel. D.h., die 4 physikalischen Pixel eines hochauflösenden Displays sind zusammen genauso groß wie ein Pixel eines "normalen" Displays. Sie werden vom Browser auch wie ein Pixel behandelt.

Trick: Man zeigt ein doppelt so großes Bild an, skaliert auf die Originalgröße. Also: Kein 1 x 1 px Bild, stattdessen ein 2 x 2 px Bild, allerdings auf 1 x 1 px  skaliert.

  • JPGs: Werden wie folgt behandelt:
    1. Die Bilder werden mit doppelter Kantenlänge angelegt (also z.B. 400px statt 200px wie im Layout).
    2. Die "Qualität" (JPG-Kompression) wird auf 40-60% reduziert (manche "vertragen" mehr, manche weniger, ggf. ausprobieren).
    3. Die Bilder werden auf der Webseite mit 200px Kantenlänge dargestellt.
      Hierdurch werden die Bilder auf Standarddisplays wie gehabt, und auf Retina Displays erheblich schärfer angezeigt. Durch die höhere Kompression ist die Dateigröße nicht erheblich größer als bei konventionell aufbereiteten Bildern.
      Da moderne Monitore sehr gut interpolieren, kann man, statt mit doppelter Kantenlänge, auch mit Faktor 1,5 arbeiten. Allerdings muss dann die JPG-Kompression geringer sein.
  • PNGs: Diese sollten in der Standardgröße (Layout) und in doppelter Größe vorliegen. Der Effekt ist sehr deutlich sichtbar, auch auf Smartphones.
  • SVGs: Machen gar keine Probleme, da beliebig skalierbar, und sind, was einfache Grafiken angeht, das Mittel der Wahl.
  • GIFs: Sollten wie PNGs behandelt werden (sowieso nur noch bei Animationen interessant; wobei hier auch Sprite- oder SVG-Animationen eine Alternative wären).

Es ist möglich, die Auflösung eines Monitors abzufragen und ein entsprechendes Bild zum Download anzubieten. Das funktioniert auch mit srcset und picture.