Animierte Bilder, Einblicke und Hintergrundinformationen

Websites nutzen unterschiedliche Bildtypen, z. B. in Raster- (Pixel) und Vektorformaten. Hierdurch erhalten Entwickler zwar viele Optionen; es stellt sich jedoch die Frage, welches Format sich am besten für welchen Anwendungsfall eignet?

Wir untersuchen die häufigsten Anwendungsszenarien für Bilder und stellen entsprechende Überlegungen und Empfehlungen vor.

Animationen

Eine animierte Grafik bezeichnet ein Bild, das mehr als einen Frame umfasst und so Bewegung darstellt.

Animationen können in verschiedenen Formaten auftreten (GIF, PNG und WebP), aufgrund der umfassenden Browserunterstützung verwenden die meisten Sites jedoch das GIF-Format (Hinweis: Dieses Format ist auf 256 Farben und 1-Bit-Transparenz beschränkt).

Transparente Bilder

Transparente Bilder sind nützlich, wenn Sie die Hintergrundfarbe, auf der Ihr Bild letztlich angezeigt wird, nicht genau kennen. Mit binärer Transparenz wird eine Farbe der indizierten Farbpalette als transparente Farbe gekennzeichnet. Eine fortschrittlichere Methode ist die Alphatransparenz: Hier werden die Transparenzinformationen in einem separaten Kanal, dem Alphakanal, gespeichert.

Die Anforderungen einfacher Transparenz werden vom GIF-Format und seiner binären Transparenz unterstützt. PNG, WebP, JPEG 2000 und JPEG XR hingegen bieten durch die Nutzung von Alphakanälen zusätzliche Möglichkeiten.

Hintergrundverläufe

So, wie Sie den Hintergrund eines Elements in CSS als einheitliche Farbe angeben können, können Sie auch einen Farbverlauf definieren. Hierbei verläuft eine Farbe in eine andere, und in CSS können Sie jeden Aspekt dieses Verlaufs steuern: von der Richtung des Verlaufs über die Auswahl beliebig vieler Farben bis hin zur Position der Farbänderungen.

Der Einsatz von Farbverläufen über CSS anstelle fester Bilddateien optimiert die Kontrolle und Performance.

Logos

Logos sind entweder reine Grafiken (Symbole, Icons) oder bestehen aus dem Namen des Unternehmens (ein Schriftzug oder eine Wortmarke).

Vektorformate, wie z. B. SVG, bieten die beste Qualität für Logos: glatte Kanten, Größenanpassung ohne Qualitätsverlust, kleine Dateigröße. Sie können jedoch auch Rasterformate – üblicherweise PNG – mit hoher Auflösung verwenden.

Cliparts

Clipart-Bildersammlungen können in Dokumente oder andere Anwendungen importiert werden. Bei diesen Bildern kann es sich um Raster- oder Vektorgrafiken handeln.

Das GIF-Format eignet sich gut für Bilder mit gleichbleibenden Farben (wie z. B. in Cartoons oder Cliparts). GIF-Bilder können auch auf Webseiten mit klarem Hintergrund positioniert werden, sodass sie für den gewünschten Effekt übereinander gelegt werden können.

Stockbilder

Stockbilder verfügen üblicherweise über eine Auflösung von 300 DPI (Dots per Inch) – in den meisten Fällen handelt es sich hierbei um Fotos.

Hi-Res JPEG hat sich für webbasierte Stockbilder (Originale) bewährt, da das Format dank verlustreicher Komprimierung das Gleichgewicht zwischen Qualität und Dateigröße hält. Wenn Sie die Qualität verlustloser Komprimierung wollen, sollten Sie das PNG-Format in Erwägung ziehen. Um die Bilddarstellung auf verschiedenen Medien, wie z. B. Web und Print, zu optimieren, eignet sich das TIFF-Format (Tagged Image File Format) am besten für Originale. Aber denken Sie daran: In diesem Fall müssen Sie das TIFF-Format in webgeeignete Formate umwandeln.

Responsive

Ein responsives Bild passt sich an die jeweiligen Umgebungsbedingungen, wie z. B. Größenänderungen, Zuschneidungen oder sogar Quellenänderungen, an. Der Einsatz responsiver Bilder kann zur Steigerung der Webperformance führen, da mobilen Nutzern mit schlechter Verbindung kleinere Dateien gesendet werden.

JPEG eignet sich für browserübergreifende Kompatibilität. Für die Anzeige von Bildern in kompatiblen Browsern eignen sich WebP (Chrome und Opera), JPEG 2000 (Safari) und JPEG XR (Internet Explorer und Edge) hervorragend.

Sprites

Sprites werden in Webdesigns eingesetzt, um die Performance zu steigern. Dies wird erreicht, indem mehrere kleine Bilder oder Symbole zu einem großen Bild, einem sogenannten Spritesheet oder Tileset, kombiniert werden.

Sprites werden auch für Symbole verwendet. Hier eignet sich das GIF- oder PNG-Format am besten, jedoch wird in einigen Fällen auch JPEG eingesetzt.

CSS (Cascading Style Sheets) wird oft eingesetzt, um die Bildanzeige zu unterstützen, jedoch handelt es sich bei den Sprites selbst im Normalfall um PNGs oder JPEGs.

Symbole

Symbole können als Buttons oder visuelle Indikatoren einer Website eingesetzt werden. Ähnlich wie die oben erwähnten Sprites werden die Iconsets oft gruppiert. Je nach Anwendungsfall gibt es viele Optionen für diese Art von Bild, allerdings bietet das SVG-Format die beste Performance. Auch Icon-Fonts können verwendet werden, wenn sie beim Laden der Seite gut gemanagt werden. Abseits der normalen Formate können auch GIF und PNG verwendet werden. Beim Laden eines Iconsets (als Icon-Font oder Sprite) müssen Sie berücksichtigen, wie viel Performance das Laden von Symbolen beansprucht, die Sie gar nicht verwenden.

Runde Ecken und Layoutkorrekturen

Der Einsatz von Bildern zur Korrektur von Format, Höhe und Breite oder für Effekte wie runde Ecken wird leider nach wie vor auf vielen Websites praktiziert. Kurz gesagt: Nutzen Sie hierfür keine Bilder, sondern CSS.

Runde Ecken werden in allen Browsern gut unterstützt und bieten wie unten gezeigt sogar einige erweiterte Einstellungen.

Zusammenfassung

Um die Wirkung Ihrer Bilder zu maximieren, müssen Sie das optimale Format für Ihren Anwendungsfall auswählen. Denken Sie daran: Jedes Format bietet Vor- und Nachteile, und Ihre Auswahl sollte diese Vor- und Nachteile berücksichtigen.

Erfahren Sie, wie Sie verschiedene Anwendungsszenarien Ihrer Onlinebilder mit Akamai Image Manager verwalten können.