Die besten Bildformate für Webdesigner

Webdesigner müssen bei der Wahl eines Bildtyps für eine Webseite zwei Faktoren berücksichtigen: das Bildformat und die Seitenoptimierung. Damit deine Bilder scharf aussehen und deine Seiten in allen Browsern schneller laden, müssen beide stimmen.

Passt einer davon nicht, lädt die Website vielleicht blitzschnell, aber die Bilder sehen furchtbar aus. Oder die Bilder sind wunderschön, doch die Seiten brauchen eine Ewigkeit zum Laden. Beides ist ein Ärgernis. Ein absolutes No-Go! Genau darum geht es in diesem Artikel. Bildformate spielen im heutigen Webdesign eine wichtige Rolle.

Warum das Bildformat wichtig ist

Leistung: Bildformate haben unterschiedliche Dateigrößen. Manche brauchen mehr Speicherplatz als andere. Größere Bilddateien verlangsamen das Laden deiner Seiten und beeinträchtigen dadurch die Leistung der Website.

Skalierbarkeit: Die Bildqualität leidet, wenn ein Bild zu stark verkleinert oder vergrößert wird. Abhilfe schafft ein skalierbares Bildformat, das auf jeder Bildschirmgröße eine hohe Qualität gewährleistet.

Darstellung: Manche Bildformate können besonders viele Details darstellen und bieten dadurch eine höhere Qualität als andere.

Für einen einheitlichen Markenauftritt beschränken sich die meisten Designer auf ein oder zwei Formate für die gesamte Website. Unsere Faustregel: Bleib bei den Formaten, die ein gutes Gleichgewicht zwischen Qualität und Leistung bieten.

Die besten Bildformate fürs Web

Die beiden grundlegenden Bildtypen sind Raster- und Vektorbilder. Auf ihrer Basis wurden zahlreiche Bildformate entwickelt.

Mit Rasterbildern lassen sich feine Übergänge zwischen zahlreichen Farben in einem Farbverlauf erzeugen. Visuelle Effekte lassen sich leicht einbetten, weshalb Rasterbilder vor allem für Kameras verwendet werden. Eine Vektorbilddatei hingegen kann weder zahlreiche Farben unterstützen noch einen Farbverlauf erzeugen. Vektorbilder basieren auf mathematischen Berechnungen und lassen sich deshalb leicht skalieren.

Zu den besten Rasterformaten fürs Web gehören JPG, PNG, GIF, WebP und HEIC. Die besten Vektorformate sind SVG, AI und EPS.

Bevor wir diese Formate durchgehen, solltest du wissen, dass du jedes davon in ein anderes umwandeln kannst. Falls das gewählte Format nicht passt, keine Sorge: Mit Filestar kannst du es jederzeit umwandeln. Wenn du zum Beispiel GIF-Animationen verwenden möchtest, aber befürchtest, dass deine Website dadurch langsamer lädt, kannst du GIF in WebP umwandeln. Das geht ganz einfach und schnell. Schau dir auch dieses Video an: So wandelst du WebP in GIF um.

1. JPG

JPEG/JPG eignet sich am besten, wenn du Millionen von Farben darstellen möchtest. Wenn du mit naturgetreuen Bildern arbeitest oder eine Fotografie-Website erstellst, ist dies das richtige Format. Dank der Darstellung auffälliger Farben eignet es sich auch für soziale Medien.

JPG-Bilder werden stark komprimiert, wodurch kleine Bilddateien entstehen. Deshalb lassen sie sich sehr einfach hoch- und herunterladen. Bei der Bildoptimierung geht durch die verlustbehaftete Komprimierung meist etwas Bildqualität verloren. Die verlorenen Details sind für Betrachter jedoch praktisch unsichtbar, solange das Bild nicht immer wieder komprimiert wird.

Der größte Nachteil ist die fehlende Transparenz. JPG-Bilder lassen sich nicht transparent über andere Elemente legen. Dennoch bleiben sie die erste Wahl für die Darstellung von Fotos im Web.

2. GIF

GIFs sind heute dank ihrer Unterstützung für Animationen auf allen sozialen Plattformen ein beliebtes Kommunikationsmittel. Auf Websites werden sie hauptsächlich für kurze animierte Clips verwendet. Durch die vielen Einzelbilder sind die Dateien allerdings größer. Setze sie auf deiner Website deshalb sparsam und nur für Animationen ein.

Sie unterstützen zwar Transparenz, können aber nur 256 Farben darstellen. Unser Tipp: Verwende sie nicht für statische Bilder, da diese schlecht aussehen, und nutze GIFs niemals für komplexe Bilder.

3. PNG

PNG-Dateien sind im Web genauso beliebt wie JPG-Dateien, da sie Millionen von Farben unterstützen. Das Format wurde als Ersatz für GIF eingeführt und erzeugt im Vergleich kleinere Dateien. PNG verwendet eine verlustfreie Komprimierung, sodass die Qualität bei der Bildbearbeitung erhalten bleibt. Deshalb kannst du für Bilder mit weniger Farbdaten bedenkenlos PNG statt JPG verwenden.

Auch Screenshots lassen sich am besten im PNG-Format darstellen. Wenn du sie als JPG speicherst, werden die Kanten unscharf. Bilder mit viel Text, etwa Banner, wirken im JPG-Format ebenfalls ausgefranst. Da PNG Transparenz unterstützt, ist es auch für Logos und Symbole beliebt.

Insgesamt erhält PNG die Bildqualität deutlich besser, was es beliebter als JPG macht. Für Screenshots oder Bilder mit weniger Farbdaten ist es die erste Wahl.

4. HEIC/HEIF

Dies ist ein neuerer Bildcontainer, der auf HEVC-Komprimierung basiert. Er unterstützt im Vergleich zu anderen verfügbaren Formaten besonders viele Bildfunktionen und ist dadurch vielseitig einsetzbar: von der Komprimierung mehrerer Einzelbilder über Bilder mit mehreren Einzelbildern bis hin zu Nicht-Bilddaten, Animationen und mehr.

Diese Dateien sind kleiner als JPG-Bilddateien und bieten eine bessere Qualität. Websites, die HDR oder Auflösungen von 4K oder 8K darstellen, können HEIC nutzen, da es weniger Speicherplatz benötigt und zugleich die visuelle Qualität verbessert.

Das größte Problem ist jedoch die Unterstützung durch Browser und Betriebssysteme. Auf dem Mac lässt sich sehr einfach mit HEIC/HEIF arbeiten, aber du musst auch die Browser und Betriebssysteme deiner Website-Besucher berücksichtigen.

5. WebP

Google entwickelte WebP 2010 als Ersatz für PNG, JPG und GIF. Es kombiniert verlustbehaftete und verlustfreie Komprimierung, um kleinere Bilder mit hoher Qualität zu erzeugen. Außerdem unterstützt es Transparenz und Animationen. WebP wurde als webtaugliches Bildformat zur Seitenoptimierung entwickelt, damit Seiten schneller laden und besser funktionieren.

Der einzige Nachteil ist, dass es nur von Firefox, Microsoft Edge, Chrome und nativen Android-Apps unterstützt wird. Apple und iOS unterstützen WebP noch nicht.

6. SVG

Scalable Vector Graphics (SVG) ist eines der besten Vektorformate fürs Web. Es ist wie PNG und GIF verlustfrei und bietet optimale Bilder in jeder Auflösung und Größe. Beim Verkleinern oder Vergrößern werden die Bilder nicht verzerrt. Das Format unterstützt Animationen und Transparenz und kann indizierte sowie skriptgesteuerte Bilder darstellen.

SVG eignet sich besonders gut für Logos auf Websites. Statt SVG können auch AI und EPS verwendet werden.