JPG, GIF, PNG – Wann nutzt Du welches Bildformat im Web?

technology-791029_1920

Im Web werden mehrere Bildformate verwendet. Drei von ihnen kommen am häufigsten zum Einsatz: JPG, GIF und PNG. Alle anderen Formate werden nicht verlässlich in den unterschiedlichen Browsern angezeigt. Deshalb solltest Du sie für Deine Webseite und im Online-Marketing besser nicht nutzen.

Aber wann solltest Du ein Bild als JPG, als GIF oder als PNG verwenden? Und warum?

JPG

Vorteile
Das JPG-Format eignet sich am besten für Bilder mit vielen Details, also zum Beispiel Fotos. Es kann bis zu 16 Millionen Farben darstellen und das Motiv damit besonders realitätsgetreu abbilden. Auch fließende Farbverläufe und Schattierungen werden mit einem JPG gut dargestellt. Ein weiterer Vorteil ist die Möglichkeit, das Bild mit einer geringen Dateigröße abzuspeichern. Durch diese Kompression kannst Du viele Bilder veröffentlichen, ohne dabei zu viel Speicherplatz zu verbrauchen. Die Kompression geht allerdings mit Qualitätsverlusten einher. Deshalb solltest Du immer einen Mittelweg zwischen kleinstmöglicher Dateigröße und größtmöglicher Qualität finden.

Nachteile
Eher ungeeignet ist das JPG-Format für Bilder mit größeren einheitlichen Farbbereichen, also z.B. Grafiken mit einem einfarbigen Hintergrund. Diese erscheinen in einem JPG oft fleckig. Ebenfalls nicht möglich ist die Darstellung von transparenten Bereichen. Deshalb ist das Format nicht für Schaltflächen oder Buttons geeignet.

GIF

Vorteile
Das GIF-Format ist perfekt für die Darstellung einfarbiger Flächen geeignet. Es ist zudem das Format mit der geringsten Dateigröße. Deshalb benötigt es nur sehr wenig Speicherplatz und kurze Ladezeiten. In GIF-Bildern kannst Du transparente Bereiche festlegen, weshalb sie sehr gut für Buttons und Schaltflächen geeignet sind. Sie können außerdem animiert werden und erscheinen dann wie kleine Videos. Wie Du ein solches animiertes GIF als Facebook-Profilbild einbindest, erklärt Katrin Hill hier.

Nachteile
Da in einem GIF nur 256 Farben dargestellt werden können, ist es für Fotos nicht geeignet. Farbverläufe und Schattierungen erscheinen grobkörnig und sehen nicht gut aus.

PNG

Vorteile
Das PNG ist sozusagen ein Mischling zwischen den beiden anderen Formaten und vereint deren Vorteile: Es kann sowohl sehr komplexe Farbverläufe, aber auch Transparenzen und einfarbige Flächen wiedergeben – und das bei einer verhältnismäßig geringen Dateigröße. Daher ist es besonders gut für aufwändigere Logos, Banner und Icons geeignet und hat sich inzwischen zum Standardformat für Bilder im Web entwickelt.

Nachteile
Das Format wird nicht von allen Browsern dargestellt. Insbesondere ältere Browser stellen das PNG-Format fehlerhaft oder gar nicht dar, was bedeutet, dass ein Teil der Nutzer die Bilder nicht sehen kann.

Gratis-Worksheet "Dateiformate im Web"

Bye bye, Technik-Verwirrung! Das Gratis-Worksheet zum Ausdrucken zeigt Dir auf einen Blick, wann Du welches Dateiformat im Web nutzen solltest. Hier kannst Du das Worksheet gratis und ganz ohne Verpflichtungen downloaden.

Ich will Dein Marketing leicht machen! Deshalb erhältst du meine Vorlage ganz unkompliziert per Download. Hast Du Lust auf noch mehr kostenlose Vorlagen? Melde Dich einfach zum Newsletter an und Du verpasst nichts mehr.

Du bekommst neue Blogbeiträge, kostenlose Tipps und Informationen zu meinen Produkten. Kein Spam, keine Weitergabe der Daten. Du kannst dich jederzeit wieder abmelden. Hinweise zum Datenschutz, Widerruf und der Protokollierung erhältst du unter Datenschutz.

Fazit

Keins der Bildformate eignet sich für alle Fälle. Welches Format passt, hängt vom Bild ab und wird oft die “goldene Mitte” zwischen Qualität und Dateigröße sein.

Und jetzt noch ein bisschen Werbung:

Hier schreibt Jana

Hier schreibt Jana

Ich zeige Dir, wie Du wirksame Webseiten und Druckprodukte für Dein kleines Business selber machst, und trotzdem viel Zeit für Dein Leben hast.

Mehr Tipps ein selbstgemachtes Marketing ohne Stress:

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert