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.
Vorteile:
- 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!
Grafiken über 1,5 MB sind, auch heute noch mit DSL, im reellen Betrieb sehr unschön. Wenn Sie nicht gerade gezielt Bilder und Grafiken präsentieren, dann versuchen Sie die Bilder klein zu halten, oder entsprechende Vorschauen (Galerie) anzubieten.
Die Größe der Bilder können Sie im wesentlichen über folgende Faktoren beeinflussen:
- Das Grafikformat.
- 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 darauf achten! - Die Höhe der Kompression.
- Die Farbtiefe.
Der Ausschnitt einer SW-Strichzeichnung, muss nicht mit mehreren Millionen Farben gespeichert werden. - Stellen Sie Motive entsprechend frei und benutzen für das Hauptmotiv einfarbige Hintergründe. Auch dies reduziert die Dateigröße.
- Sie müssen nicht alle Bilder einer Seite beim Seitenaufruf laden lassen, sondern nur die sichtbaren.
D. h. Lazy-Loading per Script oder HTML:loading="lazy"
.
SVG
Can I use: SVGDie 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äßt. Die Bitmap-Grafken erzeugen sogar etwas mehr an Datenvolumen, da hier noch der Overhead durch die Übertragung hinzugkommt.
Das hat folgenden technischen Hintergrund:
SVG-Grafiken sind reine Text-Dateien die sehr gut komprimiert werden könnnen.
Die schon komprimierten PNG und JPEG-Dateien können hier nicht mehr verkleinert werden.
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">
Wenn Sie die gleiche SVG öfter verwenden wollen, vermeiden Sie es, diese als Inline-SVGs einzubinden. Diese vergrößern unnötig Ihre Seite und können vom Browser nicht gecached werden.
Handelt es sich um sehr einfache Grafiken, ist eine Inline-SVG wiederum effektiver, anstatt diese als externe Datei einzubinden.
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>
SVG-Bilder mit IMAGE-Tag
SVG-Bilder können auch Links auf andere (SVG-) Bilder enthalten.Allerdings stellen Browser diese aus Sicherheitsgründen nicht mehr 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 Secuiity 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;
PNG
Can I use: PNGTransparenz 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 klein zu halten.Noch kleiner?
Hat das Bild viel einfarbigen Hintergrund (Darstellung verkleinert) kann die PNG-Datei oft noch verkleinert werden, indem Sie:- Das Bild indiziert speichern (Farbpalette) und die Hintergrundfarbe auf Transparent setzen
- Anschließend mit den genannten Tools optimieren.
- 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" />
Durchsichtiges Bild auf farbigem Hintergrund - Wieder ein 1 kb weniger Grafik zum Übertragen! Der zusätzliche HTML-Code ist nur 26 Byte groß.


GIF
Can I use: GIFGIF 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.
Manchmal werden ganze Werbefilme (oder andere Filme) als GIF-Animation ausgeliefert.
Dadurch soll meist umgangen werden, dass eingebettete Videos nicht automatisch abgespielt werden.
Dies ist äußerst unschön, da diese Dateien eine extreme Größe haben und somit, gerade im Mobilbereich, ein hohes Datenvolumen verbrauchen.
Dadurch soll meist umgangen werden, dass eingebettete Videos nicht automatisch abgespielt werden.
Dies ist äußerst unschön, da diese Dateien eine extreme Größe haben und somit, gerade im Mobilbereich, ein hohes Datenvolumen verbrauchen.
Das Abspielen von GIF-Animationen lässt sich abschalten. Dennoch wird die Animation vollständig heruntergeladen und nur das erste Bild (Frame) angezeigt!
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.Am besten geeignet für Fotos oder Grafiken, bei denen es nicht auf zu sehr auf die Details ankommt.
Optimierung
Setzen Sie JPEG-Dateien auf Ihren Seiten ein. optimieren Sie diese:- Verlustfrei mit jpegoptim,
- oder verlustbehaftet mit jpeg-recompress.
Bei der Optimierung von JPEG beachten Sie bitte, dass Suchmaschinen wie Google, die IPTC-Metadaten aus Bildern ausliesen.
Deshalb ist es sinnvoll diese beizubehalten und evtl die passenden Angaben, wie z. B. Copyright, Aufnahmedatum oder den Standort des Motivs, in die Metadaten zu speichern.
Deshalb ist es sinnvoll diese beizubehalten und evtl die passenden Angaben, wie z. B. Copyright, Aufnahmedatum oder den Standort des Motivs, in die Metadaten zu speichern.
WebP
Can I use: WebPEin guter Ersatz für GIF, PNG, JPEG und WebP. Es bietet eine wesentliche besseren Kompression und Transparenz.
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 besseren Kompression als JPEG (50% kleiner) und WebP inklusive HDR und Transparenz.
Für Bilder mit geringer Farbtiefe, Zeichnungen oder Text ist PNG vorzuziehen. Das ergibt eine bessere Qualtität und geringere Dateigrößen. Ja nach Quelle ist auch SVG dann die bessere Lösung.
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>
FireFox
In FireFox, ab V77, kann die Unterstützung inabout: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.
Unterstützung von AVIF-Bilder
Eine Übersicht darüber gibt es auf Wikipedia, unter AOMedia Video 1.Bisher können noch nicht sehr viele Programm mit dem Format umgehen.
Die Beispiele auf dieser Seite wurden mit GIMP gespeichert.
Entscheidungshilfe
- Vorlage
- Farbe
- Foto
- Allgemein
- JPEG
- Internet o.
Transparenz- WebP / AVIF
- Allgemein
- Zeichnung
Screenshot
Farbiger Text
Farbige Zeichnungen- PNG
(evtl. reduzierte Farbpalette / Dithering)
- PNG
- Foto
- Graustufen
- Foto
- Allgemein
- JPEG
- Internet o.
Transparenz- WebP / AVIF
- Allgemein
- Zeichnung
Screenshot
Text mit Zeichnungen
Sehr kleiner Text
Handschrift- PNG
(Graustufen,
evtl. reduzierte Farbpalette / Dithering)
- PNG
- Foto
- Schwarz-Weiß
- Reiner Text
- PNG /TIFF
(2 Farben / Dithering)
- Farbe