Bildformate

Die Wahl des Bilddateiformats für Deine Webseite ist von großer Bedeutung, denn die Bilder auf Deiner Website spielen eine wichtige Rolle für das Online-Erlebnis der Besucher.

Menschen sind von Natur aus visuell gesteuert – wir nehmen Bilder schneller wahr als Worte.

Bilder werden zuerst gescannt, bevor der Text gelesen wird.

Jedes Format wird für einen bestimmten Zweck verwendet und hat seine Vor- und Nachteile.

In diesem Beitrag erfährst Du, warum Bildformate wichtig sind, welche Unterschiede es gibt und wann Du die einzelnen Formate einsetzen solltest, um Deinen Website-Besuchern das bestmögliche Nutzererlebnis zu bieten.

Die Wahl des richtigen Bildformats ist entscheidend

Alle Grafiken im Internet sind Bilddateien. Diese Dateien gibt es in vielen Formaten. Obwohl Du das ursprüngliche Bildformat mithilfe von Converter-Tools in einen anderen Typ konvertieren kannst, ist dies nicht immer sinnvoll. Jede Datei ist für einen bestimmten Verwendungszweck bestimmt. Die Dateien auf Deiner Website sollten im Idealfall eine kleine Dateigröße haben und schnell geladen werden, ohne dass die Qualität darunter leidet.

Vektor- und Rasterdateien

Bildformate werden in zwei Hauptkategorien unterteilt: Rasterdateien und Vektordateien. Jede Kategorie hat ihren eigenen Verwendungszweck. Vektorgrafiken verwenden Linien, Punkte und Polygone zur Darstellung eines Bildes. Sie eignen sich am besten für einfache geometrische Formen sowie Logos und Icons. Vektoren können ohne Qualitätsverlust stufenlos skaliert werden und sind daher ideal für hochauflösende Bildschirme und unterschiedliche Größen. Vektoren sind jedoch nicht das beste Dateiformat zum Speichern von Fotos. Zu Vektordateiformaten gehören SVG, PDF, EPS und AI.

Rastergrafiken verwenden Pixelwerte innerhalb eines rechteckigen Rasters, um ein Bild darzustellen. Sie eignen sich am besten für komplexe Bilder wie Fotos. Im Gegensatz zu Vektoren sind diese Dateitypen auflösungsabhängig und basieren auf ihrer Größe, sie können also nicht skaliert werden, ohne an Qualität zu verlieren und verpixelt zu wirken. Die meisten Bilder im Internet liegen im Rasterformat vor. Zu den Raster-Dateiformaten gehören JPEG, PNG, GIF, TIFF und PSD.

Bildauflösung und Abmessungen

Die Auflösung ist der Detailreichtum im Bild. Die Bildauflösung wird in PPI (Pixel pro Zoll) für die Bildschirmauflösung und in DPI (Dots per Inch) für die Druckerauflösung angegeben. Höhere Auflösungen bedeuten, dass es mehr Pixel/Punkte pro Zoll gibt, was zu mehr Pixelinformationen führt und ein hochwertiges, scharfes Bild erzeugt.

Tatsächlich funktionieren Bilder auf dem Bildschirm anders als auf dem Drucker. Warum? Weil Du die Pixelabmessungen von Monitoren berücksichtigen musst und nicht die Größe des zu druckenden Objekts. Jeder Monitor hat eine andere Bildschirmauflösung. Die Anzeigequalität verbessert sich ständig mit neuen Technologien. Das kann es schwierig machen, eine Website mit Bildern zu gestalten, die auf allen Geräten perfekt angezeigt werden. Bei gedruckten Bildern benötigst Du mindestens 300 DPI, um eine gute Bildqualität in einer brauchbaren Größe zu erhalten. DPI und PPI haben einen erheblichen Einfluss auf die Druckqualität eines Bildes, nicht aber auf seine Online-Anzeigequalität.

Die physische Größe eines Bildes bezieht sich auf die Abmessungen, die es im Druck haben würde (z. B. 5" x 7") oder die Pixelabmessungen, die im Web angezeigt werden (z. B. 500 Pixel x 700 Pixel). Die Auflösung und die Pixelgröße wirken sich auf die Speichergröße aus: wie viel Platz ein Bild auf der Festplatte oder in Deinem Webbrowser einnimmt. Wenn Du fotografierst oder scannst, solltest Du Deine Bilder mit einer hohen Auflösung und Größe aufnehmen. Es ist einfacher, die Größe des Bildes zu reduzieren (Pixelinformationen zu verwerfen) als es zu vergrößern (Pixelinformationen zu erzeugen). Optimiere Deine Bilder mit konsistenten Pixelmaßen, um die Leistung und die Anzeige im Internet zu verbessern. Lade Deine Bilder in einer ähnlichen Größe hoch wie die, die Du anzeigen möchtest.

Verlustbehaftet und verlustfrei

Alle Rasterdateien sind entweder verlustbehaftet oder verlustfrei. Bei der verlustfreien Komprimierung werden Bilder optimiert. Ein verlustbehaftetes Bildformat wird auf eine geringere Größe komprimiert, indem beim Speichern des Bildes Daten entfernt werden. Dies kann zu einer geringeren Bildauflösung führen, ist aber ideal für die Verwendung im Internet, wo die Dateigröße und die Download-Geschwindigkeit entscheidend sind. Bei einem verlustfreien Bildformat werden alle Daten der Originaldatei erfasst. Es geht nichts verloren und die Auflösung wird daher nicht verringert. Beginne immer mit Deinem Originalfoto in einem verlustfreien Format und bewahre eine Kopie davon auf, zusätzlich zu Deinen optimierten Website-Fotos.

Bilddateiformate für das Web: Wann ist welches Format zu verwenden?

Die Wahl des besten Bildformats hängt von der Art des Bildes und dem Ziel ab. Fotos sollten im JPG-Format gespeichert werden, während für Logos und einfache Illustrationen PNG- oder SVG-Dateien verwendet werden sollten. Beachte, dass JPG- und PNG-Dateien die gleiche Qualität und geringere Dateigröße auch mit dem weniger bekannten Format WebP erreichen können.

Insgesamt sind verlustbehaftete Bildformate mit geringer Auflösung am besten geeignet, wenn eine geringe Dateigröße und schnelles Laden wichtiger sind als eine hohe Bildqualität. Allerdings ist es möglich, ein Bild für das Web zu optimieren, ohne dabei zu viel Qualität zu verlieren. Das Optimieren von Fotos für Deine Website ist nicht immer einfach und erfordert einige Experimente und Tests. Sobald Du Deine Bilder jedoch optimiert hast, wird sich die Geschwindigkeit Deiner Website verbessern. Teste die Bilder auf Deiner Website mit einem Bildgeschwindigkeitstest, um zu sehen, welche Inhalte optimiert werden können.

Gängige Bildformate, die im Internet verwendet werden, sind JPEG, PNG, WebP, SVG und GIF. Nicht jedes Format wird von allen Browsern unterstützt, wie TIFF- oder BMP-Dateien. Diese Bilddateitypen werden im Allgemeinen von Webbrowsern problemlos angezeigt:

JPEG

Eine JPG-Datei ist ein rasterbasiertes Bild, das für die Verwendung im Web und im Druck bestimmt ist. Das JPG-Format ist das Standarddateiformat von Digitalkameras und wird aufgrund seiner Komprimierung und universellen Unterstützung am häufigsten im Internet verwendet. Diese Dateien eignen sich am besten für die Speicherung von Fotos mit kleinen Dateigrößen und wenig spürbarem Qualitätsverlust. JPGs verwenden eine verlustbehaftete Komprimierung, was bedeutet, dass die Qualität bei jeder erneuten Speicherung abnimmt. JPGs müssen in der richtigen Größe und Auflösung für den jeweiligen Verwendungszweck gespeichert werden. Die Plattformen der sozialen Medien verwenden eine bestimmte Bildgröße, um die Auflösung zu kontrollieren, Verpixelung und Bilddehnung zu vermeiden und sicherzustellen, dass das Foto vollständig zu sehen ist.

PNG

Eine PNG-Datei ist der Standard für die Verwendung auf einer Webseite. Diese Dateien sind pixelbasiert und können nicht vergrößert werden, ohne dass sie verpixelt wirken. Ähnlich wie bei JPGs bedeutet dies, dass sie in der richtigen Größe für die Endverwendung exportiert werden müssen. Eine PNG-Datei unterstützt jedoch transparente Hintergründe und behält aufgrund der verlustfreien Komprimierung insgesamt eine höhere Bildqualität als JPGs für Grafiken. Du kannst eine PNG-Datei ohne Qualitätsverlust speichern.

PNG-Dateien eignen sich besser für Grafiken mit weniger Farben und schnellen Farbübergängen, die scharf bleiben müssen, wie Logos, Symbole und einfache Illustrationen. Verwende PNG-Dateien auf Deiner Website und in sozialen Medien, da sie auf digitalen und mobilen Displays ein schärferes, klareres Bild erzeugen. Optimiere Deine PNG-Dateien für Deine Website, indem Du die Dateigröße so gering wie möglich hältst und damit eine ausreichende Qualität garantierst.

WebP

WebP ist ein Bildformat, das 2010 von Google speziell für eine bessere verlustfreie und verlustbehaftete Komprimierung von Webbildern entwickelt wurde. Ein Format der nächsten Generation wie JPEG 2000 und WebP hat eine bessere Webkompression als PNG oder JPEG. Der Wechsel von JPEG und PNG zu WebP kann helfen, Serverplatz zu sparen, da die Bildkomprimierung die Schärfe des Originalbildes beibehält und die Dateigröße erheblich reduziert. Das bedeutet weniger Datenverbrauch und schnellere Downloads. WebP reduziert die Dateigröße um fast 35 Prozent im Vergleich zu JPEG und 50 Prozent zu PNG. Leider ist das WebP-Format nicht mit den meisten CMS-Plattformen wie WordPress kompatibel und erfordert oft eine Plug-in-Erweiterung oder eine Umgehung, um diese Dateien hochzuladen.

SVG

SVG ist eine erweiterbare Auszeichnungssprache (XML) für vektorbasierte Bilder zur Beschreibung zweidimensionaler Grafiken. Eine SVG verwendet kein Pixelformat, wodurch das Bild skaliert werden kann und eine sehr hohe Qualität beibehalten wird. Diese Dateien unterstützen transparente Hintergründe und können in Bildbearbeitungsprogrammen und Webbrowsern geöffnet werden. Die SVG-Datei ist das ideale Format für Logos, Icons und einfache Illustrationen, da sie im Vergleich zu PNG und JPG die schärfste Grafikqualität bietet.

GIF

GIF ist das animierte Bildformat, das von allen wichtigen Webbrowsern und den meisten Bildbearbeitungsprogrammen unterstützt wird. GIFs als Format liefern Transparenz und Animation und können stark komprimiert werden, um die Dateigröße zu verringern. Es ist ein verlustfreies Rasterformat, das sich am besten für animierte Grafiken eignet, für die nur wenige Farben benötigt werden. GIF unterstützt nur 256 Farben und ist daher nicht zum Speichern von Fotos geeignet. Bildbearbeitungsprogramme wie Adobe Photoshop, GIMP, Microsoft GIF Animator und Giphy kannst Du zur Erstellung von GIFs verwenden.

Fazit

Wenn es darum geht, das richtige Format für Deine Website zu wählen, kann das Verständnis der verschiedenen Dateitypen und ihres Verwendungszwecks Dir helfen, die Bildqualität und Leistung zu verbessern. Aber die Auswahl des richtigen Dateiformats ist nur der erste Teil. Nachdem Du das passende Format gewählt hast, musst Du Deine Bilder mit der richtigen Pixelgröße, der optimalen Dateigröße, SEO-Schlüsselwörtern und Alt-Text optimieren.