Das perfekte Bildformat für Websites

Visuelle Inhalte sind die „Geheimwaffe“, wenn Sie versuchen, mit Ihrem Publikum online zu kommunizieren, denn egal ob Sie eine Website erstellen, mit einer Infografik etwas erklären wollen oder ein Video verwenden, um Ihre Produkte und Dienstleistungen im Internet zu verkaufen. Das Problem? Die Wahl des richtigen Bilddateiformats kann sich wie ein Informationskrieg anfühlen. Viele Formate beanspruchen für sich, dass perfekte Bildformat zu sein.

Die idealen Bilddateiformate hängen davon ab, wie sie online verwendet werden.

  • Versuchen Sie, Platz zu sparen und die Ladezeiten zu verbessern?
  • Benötigen Sie ein hochwertiges, editierbares Bild?
  • Möchten Sie eine Animation?

Die „Big Four“ – JPG, GIF, PNG und SVG – konkurrieren seit Jahrzehnten. Also, was sollten Sie im Internet verwenden? Wir zerlegen nun einmal alle vier, damit die wesentlichen Unterschiede deutlich werden.

Übersicht der Dateiformate mit Dateigröße und Qualität der jeweiligen Bildtypen:

Logo Farbverlauf Foto
JPG Dateigröße: 27 KB
Qualität: 3/5
Dateigröße: 3 KB
Qualität: 3/5
Dateigröße: 126 KB
Qualität: 5/5
GIF Dateigröße: 11 KB
Qualität: 4/5
Dateigröße: 33 KB
Qualität: 4/5
Dateigröße: 205 KB
Qualität: 3/5
PNG Dateigröße: 11 KB
Qualität: 5/5
Dateigröße: 0,8 KB
Qualität: 4/5
Dateigröße: 181 KB
Qualität: 5/5
SVG Dateigröße: 7 KB
Qualität: 5/5
Dateigröße: 0,4 KB
Qualität: 5/5
Dateigröße: 2.400 KB
Qualität: 1/5
Das perfekte Bildformat für Websites

JPG / JPEG – Das Fotoformat

JPG (Joint Photographic Experts Group) wurde 1986 erschaffen. Dieses Bildformat benötigt sehr wenig Speicherplatz und lässt sich schnell hoch- und herunterladen.

JPGs können Millionen von Farben unterstützen, daher ist dieser Dateityp ideal für reale Bilder, wie Fotos. Sie funktionieren gut auf Websites und sind die beste Wahl, wenn sie auf Social Media-Kanälen veröffentlicht werden. Tatsächlich speichern die meisten Digitalkameras und Smartphones ihre Bilder als JPGs.

Das JPG ist „verlustbehaftet“ – d.h. wenn die Daten komprimiert werden, werden unnötige Informationen dauerhaft aus der Datei gelöscht. Das bedeutet, dass eine bestimmte Qualität verloren geht oder beeinträchtigt wird, wenn eine Datei in ein JPG konvertiert wird.

Stellen Sie sich JPG als das Standard-Dateiformat für das Hochladen von Bildern ins Web vor, es sei denn, sie benötigen Transparenz, haben Text, sind animiert oder würden von Farbänderungen (wie Logos oder Symbolen) profitieren.

Logo JPG Format Dateigröße: 27 KB

Logo JPG Format Dateigröße: 27 KB

Farbverlauf JPG Format Dateigröße: 3 KB

Farbverlauf JPG Format Dateigröße: 3 KB

Foto JPG Format Dateigröße: 126 KB

Foto JPG Format Dateigröße: 126 KB

GIF – Das Format für kurze Clips und Animationen

Erklärfilm mit Morph-BewegungenGIF (Graphics Interchange Format) kam 1987 auf den Markt, speziell um das Senden von Bildern bei zu langsamen Verbindungen oder geringer Bandbreite zu erleichtern.

GIFs sind nach der damaligen Definition „verlustfrei“ – das bedeutet, dass ein GIF alle in der Datei enthaltenen Daten behält, aber sie sind kleiner als JPGs, insbesondere weil sie nur bis zu 256 indizierte Farben aufnehmen können. Somit kann man ein GIF heute nicht mehr als verlustfrei bezeichnen.

GIF war für kleine, einfache grafische Icons gedacht, aber mit einem wichtigen Vorteil – sie können animiert werden! Es gibt kein Audio im Zusammenhang mit einem GIF, aber sie sind immer noch eine leistungsfähige Möglichkeit, um Bewegung in Ihre Online-Kanäle zu bringen. Doch hochqualitative Animationen von Grafiken oder Icons, sollten nach Möglichkeit per Canvas oder CSS bzw. SVG animiert werden.

Logo GIF Format Dateigröße: 11 KB

Logo GIF Format Dateigröße: 11 KB

Farbverlauf GIF Format Dateigröße: 33 KB

Farbverlauf GIF Format Dateigröße: 33 KB

Foto GIF Format Dateigröße: 205 KB

Foto GIF Format Dateigröße: 205 KB

PNG – Das Format für Logos

PNG (Portable Network Graphics) wurde 1995 erfunden, um das GIF-Format zu ersetzen und einige lästige Patentfragen zu umgehen. Wenn die Größe Ihrer Datei kein Problem darstellt und Sie mit einem komplexen Bild arbeiten, ist PNG wahrscheinlich die beste Wahl.

PNG-8 ist ähnlich wie GIF, da es 256 indizierte Farben sowie Transparenz unterstützt. PNG-24 kann wie JPGs bis zu 16 Millionen Farben unterstützen. PNGs werden am häufigsten für statische Bilder verwendet. Wie beim GIF-Format, können aber auch Animationen damit umgesetzt werden.

Wie das GIF ist PNG verlustfrei, so dass während der Komprimierung keine Daten verloren gehen. Sie sind ideal für detaillierte Grafiken oder wenn Sie mit Dateien arbeiten, die einfarbige Flächen enthalten. Transparenz, auch in der Verbindung mit einem Schlagschatteneffekt, wird sehr gut unterstützt.

Logo PNG Format Dateigröße: 9 KB

Logo PNG Format Dateigröße: 9 KB

Farbverlauf PNG Format Dateigröße: 0,8 KB

Farbverlauf PNG Format Dateigröße: 0,8 KB

Foto PNG Format Dateigröße: 181 KB

Foto PNG Format Dateigröße: 181 KB

SVG – das moderne Format für Logos und Icons

Der neueste aller Dateitypen, SVG (Scalable Vector Graphics), ist ein 2001 veröffentlichtes Vektorbilddateiformat. Es ist leistungsfähiger als andere, für das Web geeignete, Dateiformate. Im Gegensatz zu den Rasterformaten JPG, GIF und PNG bleibt ein SVG-Bild bei jeder Auflösung und Größe scharf und klar. Somit wird eine SVG-Grafik auf einem normalen Bildschirm und einem Retina Display immer perfekt dargestellt. Das Erstellen von zwei Grafiken in einer Auflösung von 100% und 200% (@2x) entfällt damit.

Das liegt daran, dass ein SVG aus mathematisch deklarierten Formen und Kurven gezeichnet wird, nicht aus Pixeln. SVG’s können animiert werden, unterstützen Transparenz und beliebige Kombinationen von Farben oder Farbverläufen.

SVG ist ein verlustfreies Dateiformat wie GIF und PNG. Im Vergleich zu anderen Formaten für das Web ist die Dateigröße bei einfachen Grafiken (wie Icons) sehr gering.

Das Einbinden von SVG Formaten ist leider nicht immer ganz trivial. Je nachdem wie oft sich eine SVG Grafik in der Website befindet und wo genau diese eingebunden werden soll, ergeben sich verschiedene Best-Practise-Methoden. WordPress unterschützt den Dateiupload von SVG Dateien nicht. Hierfür muss man entweder mit einem Childtheme oder einem SVG Plugin arbeiten. Zudem hat der immer noch häufig benutzte Internet Explorer 11 seine lieben Probleme mit diesem Format. Selbst HTML5 konforme Einbindung von SVG Grafiken kann zu Farbfehlern führen.

logo-svg-format

Logo SVG Format Dateigröße: 7 KB

verlauf-svg-format

Farbverlauf SVG Format Dateigröße: 0,4 KB

Das zuvor gezeigte Foto lässt sich im SVG Format nicht darstellen, ohne das sich der Browser aufgrund der großen Datenmenge aufhängt.

Welches Bildformat ist das beste?

Wenn Sie Urlaubsbilder auf Facebook hochladen, ist JPG der Gewinner. Sie wollen eine kurze Animation erstellen? GIF. Wenn Sie hochwertige Bilder, detaillierte Icons oder Transparenz benötigen, liegt PNG vorne. SVG ist ideal für qualitativ hochwertige Bilder und kann auf jede Größe verlustfrei skaliertwerden.

Prüfen sie also immer als erstes, ob die Grafik als SVG erstellt und eingebunden werden kann. Wenn nicht, dann prüfen Sie, ob PNG funktioniert. Geht beides nicht greifen Sie auf JPG zurück.

Vergleich der Dateigrößen von Logo und Farbverlauf

2018-10-11T08:24:38+00:0011. Oktober 2018|Design, Websites|