Webseiten – Grafikformate

Eine Übersicht über gängige Grafikformate für Webseiten

Die meisten Bilder auf Webseiten werden im JPEG Format ausgeliefert. Das ist nicht immer sinnvoll, denn andere Grafikformate haben auch hier ihre speziellen Vorteile.

Mehr noch als bei Offline-Dokumenten sollten Sie hier auf die Dateigröße achten. Diese ist oft entscheidend dafür, wie schnell eine Seite geladen wird.

• Je schneller eine Seite geladen wird, desto zufriedener sind Ihre Besucher und Ihre Kunden.
  Die meisten warten nicht länger als 3 Sekunden auf das Laden der Seite.
• Als Seiten-Betreiber sparen Sie Speicherplatz, Bandbreite und Datenvolumen.
• Ihre Benutzer sparen Zeit, Datenvolumen und Speicherplatz.
• Weniger Speicherplatz, Bandbreite und Datenvolumen spart Energie und ist somit aktiver Umweltschutz.
  Der Energieverbrauch ist vor im Mobilfunk wesentlich höher, wie im Vergleich zu WLAN oder Kabelverbindungen.
• Das Ranking in Suchmaschinen wird durch kurze Ladezeiten positiv beeinflusst!

• Das Grafikformat (SVG, PNG, WebP usw.)
• Die Größe des Bildes in Pixel (px).
  Reduzieren Sie es auf die Größe, in der das Bild maximal, auf der Seite, dargestellt wird.
• Unterschiedliche Bildgröße, angepasst an verschiedene Bildschirme.
  Bei Vektorgrafiken braucht man hier nicht immer darauf achten. Allerdings könnten kleine Vorschaubilder als Bitmap kleiner sein wie eine SVG.
• Die Höhe der Kompression.
• Die Farbtiefe.
  Der Ausschnitt einer SW-Strichzeichnung muss nicht mit mehreren Millionen Farben gespeichert werden.
• Stellen Sie Hauptmotive frei und definieren Sie die Hintergründe per CSS, dadurch bleibt das Bild klein.
• Sie müssen nicht alle Bilder einer Seite beim Seitenaufruf laden lassen, sondern nur die sichtbaren.
  D. h. Lazy-Loading per Script oder HTML.
Wenn ein Bild Schatten werfen soll, erzeugen Sie diesen über CSS-Filter.
Dieser funktioniert auch für ungleichmäßige Konturen (siehe Titelbild) sowohl bei Bitmap- und SVG-Bildern.
Dadurch wird Ihr ursprüngliches Bild kleiner – eben um die fehlenden Daten für den Schatten.

SVG

Can I use: SVG

Die Dateien sind frei skalierbar und rotierbar, können Animationen beinhalten und sind meist von geringer Dateigröße.

Auf Webseiten am besten für Logos, Icons und Zeichnungen geeignet.
Mit zunehmenden Details im Bild kann auch die Dateigröße erheblich ansteigen. Hier liefern Sie Grafik besser in einem anderen Format aus.

In Webseiten können Sie SVG-Grafiken wie normale Grafiken einbinden.

    <img src="/images/Dokumentenoptimierung/Thorsten_H_Willert_-_Dokumentenoptimierung__Logo_SVG.svg" alt="Logo_SVG"/>

---

Lassen Sie sich nicht täuschen:
Auch wenn eine SVG-Datei evtl. größer als eine gleichwertige Rastergrafik sein sollte:
Ist die gzip-Kompression auf dem Web-Server / im CMS aktiviert, werden evtl. dennoch weniger Daten übertragen.

Übertragung des jeweils gleichen Bildes, in unterschiedlichen Formaten, aufgezeichnet mit der Netzwerkanalyse von FireFox:


Wenn Sie die Spalten Übertragung und Größe vergleichen, können Sie sehen, dass durch die aktivierte Kompression, bei SVG, viel weniger Daten übertragen werden, als die Dateigröße vermuten lässt. Die Bitmap-Grafiken erzeugen sogar etwas mehr an Datenvolumen, da hier noch der Overhead durch die Übertragung hinzukommt.

Das hat folgenden technischen Hintergrund:
SVG-Grafiken sind reine Text-Dateien, die sehr gut komprimiert werden können.
Die schon komprimierten PNG und JPEG-Dateien können hier nicht mehr verkleinert werden.

SVG als Favicon

SVGs lassen sich auch als Favicon verwenden. Dies hat den Vorteil, dass Sie die Datei nicht in unterschiedlichen Größen bereitstellen müssen:

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">

Inline-SVGs

Beispiele

<svg width="400" height="50">
	<rect width="400" height="50" style="fill:teal;stroke-width:2;stroke:black" />
</svg>

    <svg cx="100" cy="70" r="50" style="fill:teal;stroke-width:2;stroke:black" /> </svg>

Mehrfachverwendung einer Inline-SVG mit use

Um Ladezeiten zu verkürzen und den Quelltext mit Inline-SVGs kleinzuhalten kann man diese auch per use referenzieren und muss diese nicht mehrfach einfügen.

D. h. die eigentliche Inline-SVG an das Ende der HTML-Datei stellen und dieser eine ID vergeben. Die SVG muss mit display:none ausgeblendet sein.

Die Verwendung erfolgt folgendermaßen:

<svg height="100%" viewBox="0 0 600 400" width="100%">
	<title>Inline-SVG am Ende der Seite, wird hier verwendet</title>
	<use href="#dasBild" />
</svg>

<svg style="display:none" viewBox="0 0 600 400" width="100%">
	<g id="dasBild"> 
    	<!-- ganz viel Quellcode … -->
	</g>
</svg>

SVG-Bilder mit IMAGE-Tag

SVG-Bilder können auch Links auf andere (SVG-) Bilder enthalten.
Allerdings stellen Browser diese aus Sicherheitsgründen nicht korrekt dar.
Um diese dennoch darzustellen, kann man das SVG-Bild stattdessen über einen IFRAME oder OBJECT-Tag in HTML einbinden.

Bild mit verlinkten Bildern und Fallback, falls ein Browser dies nicht darstellen kann:

<object
	data="/images/Allgemein/Thorsten_Willert_-_Grafikformate_Title_image.svg"
	type="image/svg+xml"
	width="600">
    <img class="img-border" src="/images/Allgemein/Thorsten_Willert_-_Grafikformate_Title.png" width="600" />
</object>

Eine Content Security Policy (CSP) muss hierzu entsprechend angepasst werden z. B.:

# Allgemein …
Content-Security-Policy: object-src 'self';
# … oder ganz genau - nur diese Grafik:
Content-Security-Policy: object-src  https://www.thorsten-willert.de/images/Allgemein/Thorsten_Willert_-__Grafikformate_Title_image.svg;

CSS

CSS? Das sind doch keine Grafiken! Stimmt - man kann damit aber welche erzeugen. Diese sind ebenso frei skalierbar wie Vektorgrafiken und durch die Definition über Klassen wiederverwendbar.

Beispiele

Eine einfache Tortengrafik:

.torte {
	background-image: conic-gradient(teal 40%, lightseagreen 0 70%, Aquamarine 0);
	border-radius: 50%
}

oder Sonnenstrahlen:

.sonne {
	background-image: repeating-conic-gradient(gold 0 15deg, orange 16deg 30deg);
}

Etwas komplexer (mit Animation): Coffee von Louiz Loet

Weitere Beispiele folgen …

Nachteile

• Grafik ist diekt in den Quellcode bzw. die CSS eingebunden
• Kein Lazy-Loading möglich

PNG

Can I use: PNG

Transparenz und verlustlose Komprimierung sind die größten Vorteile für die Anwendung auf Webseiten.
Die Dateigröße können Sie durch eine Verringerung der Farben (< 256) weiter verkleinern.

Optimierung

Tools wie pingo oder pngquant helfen Ihnen dabei, die Größe von PNG-Dateien möglichst kleinzuhalten.

Noch kleiner?

Hat das Bild viel einfarbigen Hintergrund (Darstellung verkleinert) kann die PNG-Datei oft noch verkleinert werden, indem Sie:

1. Das Bild indiziert speichern (Farbpalette) und die Hintergrundfarbe auf Transparent setzen





2. Anschließend mit den genannten Tools optimieren.
3. Auf der Webseite den Hintergrund des Bildes wieder auf die ursprüngliche Farbe des Bildes stellen:

   
   <img
     style="background:#0e11a8"
     src="/images/Weboptimierung/Websitecarbon/Thorsten_Willert__Websitecarbon_Ergebnis.png"
     alt="Websitecarbon Ergebnis"
   />    
       

   

4. Wieder 2 KB weniger Grafik zum Übertragen! Der zusätzliche HTML-Code ist nur 26 Byte groß.

GIF

Can I use: GIF

GIF ist nicht für eine hohe Bildqualität zu gebrauchen, sondern eher für einfache Animationen.
Es besteht die Möglichkeit GIFs mit mehr als 256 Farben zu erzeugen, jedoch erzeugt dies oft Probleme bei der Darstellung. Für komplexere Animationen (und Filme) sollte das Format WebM eingesetzt werden. Hierdurch fallen auch sämtliche Begrenzungen durch das GIF-Format weg.
Alternativ ist für Animationen auch SVG möglich.

JPEG

Das am meisten verwendete Format für Bilder im Internet und (Consumer-) Digital-Kameras.

Optimierung

Setzen Sie JPEG-Dateien auf Ihren Seiten ein. Optimieren Sie diese:

• Verlustfrei mit jpegoptim,
• oder verlustbehaftet mit jpeg-recompress.

WebP

Can I use: WebP

Ein guter Ersatz für GIF, PNG, JPEG und WebP. Es bietet eine wesentliche bessere Kompression und Transparenz.
Das Format stammt aus der Video-Technik und erzeugt somit oft, wie auch AVIF, detailarme Bilder.

Fallback

Fallback in HTML für WebP, falls ein Browser das Format nicht darstellen kann.
Der img-Tag befindet sich innerhalb des picture-Tags, falls ein Browser auch den picture-Tag nicht unterstützt.

<picture>
	<source srcset="/images/Bild.webp" type="image/webp">
	<source srcset="/images/Bild.jpg" type="image/jpg">
	<img src="/images/Bild.jpg" alt="Ein schönes Bild" />
</picture>

AVIF

Das Format können noch nicht alle Browser darstellen.
Can I use: AVIF

Ein neuer Ersatz, für GIF, PNG, JPEG und WebP. Es bietet eine wesentliche bessere Kompression als JPEG (50 % kleiner) und WebP inklusive HDR und Transparenz.
Das Format stammt aus der Video-Technik und erzeugt somit oft, wie auch WebP, detailarme Bilder.

Fallback

Fallback in HTML für AVIF, falls ein Browser das Format nicht darstellen kann.
Der img-Tag befindet sich innerhalb des picture-Tags, falls ein Browser auch den picture-Tag nicht unterstützt.

<picture>
	<source srcset="/images/Bild.avif" type="image/avif">
	<source srcset="/images/Bild.webp" type="image/webp">
	<source srcset="/images/Bild.jpg" type="image/jpg">
	<img src="/images/Bild.jpg" alt="Ein schönes Bild" />
</picture>

Unterstützung von AVIF-Bildern

Eine Übersicht darüber gibt es auf Wikipedia, unter AOMedia Video 1.
Bisher können noch nicht sehr viele Programme mit dem Format umgehen.

FireFox

In FireFox, ab V77, kann die Unterstützung in about:config über image.avif.enabled aktiviert werden.
Ab FireFox V83 ist dies Standard. Die Farbdarstellung der Bilder ist allerdings noch nicht korrekt, egal ob ein Farbprofil eingebettet ist, oder nicht.

In aktuellen Version ist die Farbdarstellung korrekt.

Fallback in CSS

CanI Use: image-set

Auch in CCS gibt es ein Fallback für das backgound-image.

.bild {
	background-image: url("Bild.jpg");
	background-image: image-set(
		url("Gild.avif") type("image/avif"),
		url("Bild.webp") type("image/webp"),
		url("Bild.jpg") type("image/jpeg"));
}

Bitmaps als Inline-Grafik (Data-URI)

Nicht nur SVGs kann man als Inline-Grafik einbinden, sondern auch alle Bitmap-Formate.
Dies ist nur sinnvoll, wenn das Bild selten verwendet wird und relativ klein ist. Die eingebundenen Bilder werden base64 kodiert, wodurch die Bilder ca. 30 % mehr Daten benötigen. Zum Ausgleich findet eine Netzwerkabfrage weniger statt. Die HTTP-Kompression beim Transfer wird dieses Problem ebenfalls etwas verringern.

Das Ganze erfolgt über eine Data-URI nach dem Schema:
data:[<mime type>][;charset=<Zeichensatz>][;base64],<Daten>

Als Beispiel das RSS-Logo:

Einsatz als img

Am besten nur bei einmaliger Verwendung des Bildes verwenden.

<img
	src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAALVBMVEUAAAAAAAAHAgDBdRfibAjgagLdVAD5YwD1gwf8oRvThTrlqGPnuoPz3sn+/v0CWCHgAAAABXRSTlMCGS0W3DbSs18AAACDSURBVHjaY4ADk1AQcGZg8NhzZubMmS0CTIJMSiEMDIICTAx39n4MAiphYvh3dy2zApCV0fd2x7qXbQpMDP8/mtxlAUn9rmHS+ghi/NU7oPzAgIEh/d712Kfrjikw/RPgU2D88IGBifHDpx8H3wG1u6eVA0GKAoNJGgg4KTAwKoGBAADzpS03P4sgrwAAAABJRU5ErkJggg=="
/>

Einsatz mit CSS

Für mehrfache Verwendung des Bildes.

.rdf {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAALVBMVEUAAAAAAAAHAgDBdRfibAjgagLdVAD5YwD1gwf8oRvThTrlqGPnuoPz3sn+/v0CWCHgAAAABXRSTlMCGS0W3DbSs18AAACDSURBVHjaY4ADk1AQcGZg8NhzZubMmS0CTIJMSiEMDIICTAx39n4MAiphYvh3dy2zApCV0fd2x7qXbQpMDP8/mtxlAUn9rmHS+ghi/NU7oPzAgIEh/d712Kfrjikw/RPgU2D88IGBifHDpx8H3wG1u6eVA0GKAoNJGgg4KTAwKoGBAADzpS03P4sgrwAAAABJRU5ErkJggg==)
	no-repeat
	left center;
}

Auswahlhilfe für Bitmap-Formate

• Die obige Darstellung ist für Bilder gedacht, die schon als Bitmap-Grafik vorliegen.
• Bei häufig verwendeten Icons bietet sich an, eine Icon-Schriftart zu verwenden.
• Für (nicht zu komplexe) Zeichnungen und alles, was kein Foto darstellt, ist SVG am geeignetsten.
• Einfache Formen lassen sich auch über CSS darstellen (wie die obige Baumdarstellung).

Mehr zum Thema

Software

• GIMP
• Inkscape

Weiterführende Informationen

• Google: Metadaten zu Bildrechten
• CSS-Shapes
• The Shapes of CSS
• Hot Cup of CSS Coffee
• PURE CSS ART GALLERY
• Prof. Daniel Lemire: What is the space overhead of Base64 encoding?

Begriffserklärung

• PDF
• SVG
• Vektorgrafik
• EMF
• WMF

Downloads

---