Unsere Website nutzt technische Cookies und Analysecookies von Erst- und Drittanbietern. Wenn Sie mit der Navigation fortfahren, akzeptieren Sie die von unserer Website vorgegebenen Cookie-Einstellungen. Sie können die erweiterten Datenschutzbestimmungen einsehen, und die entsprechenden Anweisungen befolgen, um die Einstellungen später zu ändern, wenn sie hier klicken.
teamblau
Webdesign
02/07/2019

Web – Bildformate

Warum JPG fürs Web nicht immer die beste Wahl ist

 „Ich habe mein Logo als JPEG vorliegen, das ist doch OK, oder?“ werden wir bei teamblau immer wieder gefragt. Unsere Antwort darauf „Notfalls ja …“.
Natürlich kann man ein JPEG als Logo einsetzen, aber es gibt geeignetere Dateiformate im Web.
Die „Big Four“ – JPG, GIF, PNG und SVG – konkurrieren seit Jahrzehnten. Wir möchten hier etwas Klarheit schaffen und erklären die wesentlichen Unterschiede der Formate und auch, welche neuen Alternativen es heute gibt.
 

JPG / JPEG – Das Fotoformat


JPG (Joint Photographic Experts Group) ist ein Fotoformat. Das bedeutet es unterstützt Millionen von Farben und ist daher ideal für reale Bilder und Fotos. Was viele aber nicht wissen: JPG ist „verlustbehaftet“ – d.h. mit jedem neuen Abspeichern als JPG verliert die Datei unwiderruflich massiv an Filedaten und damit an Qualität.
Vorteile von JPG im Web: dieses Bildformat benötigt sehr wenig Speicherplatz und lässt sich schnell hoch- und herunterladen. Für einfache Fotografien im Web oder Social Media-Bereich ist JPG also durchaus zu empfehlen. Sobald aber Bildanimationen und Transparenzen bei Bildern, Logos oder Symbolen dargestellt werden sollen, kommen andere Datei-Formate zum Einsatz.

 

GIF – Das Format für Animationen


GIF (Graphics Interchange Format) wurde entwickelt, um das Senden von Bildern bei langsamen Netz-Verbindungen zu erleichtern. Es behält im Gegensatz zum JPG alle in der Datei enthaltenen Daten. GIFs sind in der Regel kleiner als JPGs, können aber nur bis zu 256 indizierte Farben aufnehmen. Ein GIF kann somit also nicht wirklich als verlustfrei bezeichnet werden und ist auch nicht wirklich zur Wiedergabe von Fotos geeignet.
Vorteile von GIF im Web: GIF eignet sich für kleine, einfache Grafiken und können animiert werden! Dies bietet eine leistungsfähige Möglichkeit, um Bewegung in Ihre Online-Kanäle zu bringen. Hochqualitative Animationen von Grafiken oder Icons sollten nach Möglichkeit per Canvas oder CSS bzw. SVG animiert werden.
 

PNG – Das Format für Logos


PNG (Portable Network Graphics) ist die beste Wahl, wenn Sie mit einem komplexen Bild arbeiten wollen und die Größe Ihrer Datei kein Problem darstellt. PNGs werden am häufigsten für statische Bilder verwendet. Wie beim GIF-Format können auch hier Animationen umgesetzt werden.
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.
Vorteile von PNG im Web: PNG gelten als „verlustfrei“. Das bedeutet, dass während der Komprimierung keine Daten verloren gehen. PNGs sind ideal für detaillierte Grafiken und Illustrationen, die einfarbige Flächen enthalten. Transparenz, auch in der Verbindung mit einem Schlagschatteneffekt, wird sehr gut unterstützt.
 

SVG – das moderne Format für Logos / Icons


SVG (Scalable Vector Graphics) ist ein Vektorbilddateiformat für verlustbehaftet oder verlustfrei komprimierte statische oder animierte Bilder. Es ist leistungsfähiger als andere Web-Dateiformate. Im Gegensatz zu den Rasterformaten JPG, GIF und PNG (pixelbasierend) ist ein SVG-Bild aus mathematisch deklarierten Formen und Kurven gezeichnet (vektorbasierend). Das Einbinden von SVG-Formaten wird im Web allerdings noch nicht konsequent unterstützt und führt vor allem beim veralteten Internetbrowser Explorer 11 häufig zu Darstellungsfehlern.
Vorteile von SVG im Web: SVG kann animiert werden, unterstützt Transparenz und beliebige Kombinationen von Farben oder Farbverläufen. Es ist dabei ein verlustfreies Dateiformat wie GIF und PNG, kann aber im Unterschied dazu beliebig oft skaliert werden und bleibt bei jeder Auflösung und Größe scharf und klar. Weiterer großer Vorteil: im Vergleich zu anderen Formaten im Web ist die Dateigröße sehr gering.
 

Schon Mal was von WebP gehört?

Die Ladegeschwindigkeit zählt schon seit geraumer Zeit zu den wichtigsten Stellschrauben bei der Optimierung einer Website; die Verwendung komprimierter Bilder ist also sehr ratsam.
Der Suchmaschinenriese Google hat deshalb schon im Jahr 2010 mit WebP sein hauseigenes, lizenzfreies Bildformat für schnellere Websites präsentiert.
 

WebP: Das effiziente Format für Bilder im Web


Als Vorlage für das Format mit dem Namen WebP diente das Videoformat VP8. Google erweiterte das WebP-Format um Features wie einen Modus zur verlustfreien Komprimierung, Transparenz (Alphakanal) und Animationen. Sämtliche Software für die Bearbeitung und Darstellung von WebP steht standardmäßig unter der BSD-Lizenz. Google nutzt das Format beispielsweise im Chrome Web Store und in den mobilen Google-Apps.
Chrome und Opera unterstützen das Komprimierungsformat bereits seit längerem - eine Vielzahl von Browsern, wie Safari und Firefox, aber bisher nur experimentell.
Vorteile von WEBP im Web: WebP diente von Beginn an dem Zweck, Bilder im Web auf eine möglichst geringe Dateigröße zu reduzieren. Während diese beiden klassischen Webformate auf unterschiedliche Komprimierungsmethoden setzen – PNG verlustfrei, JPEG verlustbehaftet – lässt WebP beide Möglichkeiten zu. Dank dieser Flexibilität ist das Format sowohl für Fotos als auch für kleine Bilder und Grafiken geeignet.
 
Die Komprimierungs-Features und weitere zentralen Eigenschaften des WebP-Formats:
  • Komprimierung (verlustbehaftet): Die verlustbehaftete Komprimierung mit WebP basiert auf der Keyframe-Codierung („Schlüsselbild“-Codierung) von VP8.
  • Komprimierung (verlustfrei): Die verlustfreie Komprimierung mit WebP baut auf verschiedenen Techniken auf, die die Parameter und Bilddaten transformieren.
  • Transparenz: Der 8-Bit-Alphakanal, den das WebP-Format bietet, kann auch bei verlustbehafteter RGB-Komprimierung genutzt werden.
  • Metadaten: WebP kann EXIF- und XMP-Metadaten enthalten, die typischerweise von Kameras erzeugt werden.
  • Farbprofil: Das Google-Format kann eingebettete ICC-Profile (Datensätze, die den Farbraum beschreiben) enthalten.
  • Animationen: Das WebP-Format ermöglicht die Speicherung von Bildsequenzen.
     
-> Stets aktualisierte Informationen zur Browser-Unterstützung von WebP und SVG finden Sie auf caniuse.com
 

Logos für das Web vorbereiten:

Abschließend noch generell ein Tipp für die Verwendung von Logos:
Grundsätzlich ist das Dateiformat EPS die beste Wahl als Ausgangsdatei. EPS ist ein Vektorformat, das sich problemlos skalieren lässt und einen transparenten Hintergrund haben kann. Es wird in der Regel im Print Bereich eingesetzt. Ach, dann kann ich es aber im Web gar nicht nutzen?
Ja, das ist im Prinzip richtig, aber unser Webdesigner kann aus dem wunderbar anpassbaren EPS einfach und schnell das geeignete Format für den jeweiligen Einsatz machen - wie z.B. ein Logo mit transparentem Hintergrund für Ihre Website.
 
Impressum Datenschutz AGB blog Jobs
teamblau GmbH - Mwst Nr. IT01720930211