Die verschiedenen Bildformate sind uns allen schon einmal begegnet und damit einhergehend auch die Frage welches Bildformat sich für ein Projekt nun am besten eignet. Wie sieht es aus mit Auflösung, Größe und Anwendungsbereich von JPEG, PNG und Co. - Das schauen wir uns in diesem Beitrag an.
Einführung in gängige Bildformate
Schauen wir uns als erstes die wichtigsten Bildformate an, die uns tagtäglich begegnen. Dazu gehören JPEG, PNG und GIFs.
JPEG: Optimal für Fotografien
JPEG ist eines der gängigsten Bildformate, das besonders für detailreiche Fotografien und realistische Bilder geeignet ist. Dateigrößen können durch die Reduktion von Daten, die sogenannte Kompression, verringert werden, wodurch JPEG ein vielfältig einsetzbares Bildformat ist und vorzugsweise im Web verwendet wird. Aufgrund seiner Eigenschaften wird es auch verlustbehaftetes Format genannt, denn JPEG Dateien können individuell komprimiert werden. Der Grad der Kompression kann anhand der benötigten Dateigröße und der individuellen Bereitschaft zu Qualitätsverlusten bestimmt werden. Die historische Entwicklung von JPEG geht auf das Jahr 1986 zurück, als die Joint Photographic Experts Group gegründet wurde, um Standards für die Bildkompression festzulegen.
Erstellt in Canva, Auto: Eric Mclean, Radfahrer: Masood Aslami, Passant mit Hund: Mart Production, Passant mit Aktentasche: Lara Jameson, Hintergrund: Gije Cho
PNG: Verlustfreie Qualität für Grafiken
Das PNG Format ist, im Gegenzug zu JPEG Dateien, ein verlustfreies Bildformat. Es wurde speziell für den Einsatz im Internet entwickelt und hat den großen Vorteil, dass es erstmalig Transparenzen darstellen konnte. Das PNG Bildformat unterstützt eine umfangreiche Farbpalette und eignet sich aufgrund seiner verlustfreien und scharfen Darstellung ideal für Grafiken mit klaren Linien. PNG wurde in den 1990er Jahren als Alternative zu anderen Formaten wie GIF eingeführt und hat sich als Standard für Webgrafiken etabliert.
GIF: Animationen und Grafiken mit begrenzten Farben
GIF ist ein verlustfreies Bildformat, das häufig für Animationen und einfache Grafiken im Web verwendet wird. Es unterstützt Transparenzen und ermöglicht die Darstellung von bis zu 256 Farben; mehr jedoch nicht. Aufgrund der begrenzten Farbpalette ist GIF nicht optimal für Fotografien, sondern eher für Grafiken mit klaren Bereichen und begrenzten Farben geeignet. GIF wurde in den späten 1980er Jahren eingeführt und hat sich als beliebtes Format für kurze Animationen und einfache Grafiken im Internet etabliert. Am beliebtesten für sogenannte "Gifs" ist wohl die Plattform Giphy.
Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Bildformate für Spezielle Anwendungen
Neben den Klassikern gibt es noch die Sonderformate SVG und RAW. Schauen wir uns diese beiden Formate und ihre Anwendungsfälle etwas genauer an.
SVG für Skalierbare Vektorgrafiken
SVG ist ein Vektorformat, das auf XML basiert und zweidimensionale Vektorgrafiken darstellt. Vektorformat? XML? Ein kleiner Exkurs: Bilder können im sogenannten Vektorformat oder Pixelformat dargestellt werden. Im Pixelformat werden Bilder in winzig kleinen Rastern dargestellt und jedes Quadrat im Raster, also jedes "Pixel", hat eine eigene Farbe. In der Gesamtbetrachtung ergeben die vielen einzelnen Pixel dann ein Gesamtbild.
Vektoren hingegen werden mithilfe mathematischer Formeln, Linien und Kurven beschrieben; dafür wird XML als "Programmiersprache" benötigt. Dadurch können Grafiken beliebig skaliert werden und sind trotzdem gestochen scharf, was das SVG Format vor allem für Logos, Icons und allgemein grafische Elemente im Web interessant macht. SVG wurde erstmals 2001 als offener Standard veröffentlicht und hat seitdem aufgrund seiner Skalierbarkeit und Anpassungsfähigkeit an verschiedene Bildschirmgrößen an Bedeutung gewonnen.
RAW für Professionelle Fotografie
RAW ist eigentlich kein richtiges Bildformat, sondern ein allgemeiner Begriff für unverarbeitete Bilddaten direkt von der Kamera. Es enthält alle Informationen, die von einem Bildsensor aufgenommen wurden, ohne jegliche Kompression oder Bearbeitung. RAW-Dateien bieten Fotograf:innen die maximale Kontrolle über die Bildbearbeitung und ermöglichen eine nachträgliche Anpassung von Belichtung und Weißabgleich. Allerdings haben RAW Dateien in der Regel auch größere Dateigrößen. Da es nicht standardisiert ist, gibt es verschiedene RAW-Formate, die von unterschiedlichen Kameraherstellern verwendet werden.
Optimierung von Bildern für Websites: Praktische Tipps
Bilder sind ein wesentlicher Bestandteil jeder Website, aber sie können auch die Ladezeit erheblich beeinträchtigen, wenn sie nicht richtig optimiert werden. Hier sind einige praktische Tipps, wie du deine Bilder für eine schnellere Ladezeit und eine verbesserte Usability optimieren kannst:
1. Richtige Bildformate wählen
Wähle das richtige Bildformat für den jeweiligen Verwendungszweck. Verwende JPEG für hochauflösende Fotos, PNG für Bilder mit transparenten Hintergründen und GIF für einfache Grafiken und Animationen.
2. Bildgröße anpassen
Skaliere deine Bilder auf die tatsächliche Größe, die sie auf der Website haben sollen. Vermeide es, Bilder in der HTML- oder CSS-Datei zu verkleinern, da dies die Ladezeit erhöht.
3. Kompression verwenden
Nutze Bildkompressions-Tools, um die Dateigröße zu reduzieren, ohne die Qualität stark zu beeinträchtigen. Es gibt viele Online-Tools oder auch WordPress Plugins, mit enen du deine Bilder komprimieren kannst. Wird nutzen gerne den Robin Image Optimizer.
4. Lazy Loading implementieren
Implementiere Lazy Loading, damit Bilder erst dann laden, wenn sie im sichtbaren Bereich des Screens erscheinen. Das reduziert die Ladezeit der Seite, insbesondere für lange Seiten mit vielen Bildern.
Fazit: Bild ist nicht gleich Bild
Nach unserem kurzen Überblick und mit unseren praktischen Tipps weißt du nun hoffentlich, welches Format für dein nächstes Projekt das richtige ist und was die einzelnen Vor- und Nachteile der verschiedenen Formate sind.
