Welches sind die richtigen Datei­for­ma­te für das Web?

mit Keine Kommentare

Online-Marke­ting-Bei­trag: Da­tei­for­ma­te

Web-Dienstleister bekommen oftmals die falschen Datei­typen für ihre Arbeit. In der Folge ein paar Tipps für die rich­tige Aus­wahl des Datei­typs.

Informationen gemäss Stand vom 17.10.2022

DateiformateQuelle: Pixabay / MZZD / Pixabay-Lizenz

Inhalts­ver­zeich­nis: Da­tei­ty­pen

Die richtigen Datei­for­mate für das Web

JPG- respektive JPEG-Dateien

JPEG steht für Joint Photographic Expert Group. Dieses Grafikformat ist ein Standard für die Darstellung und Kom­pri­mierung von Bil­dern. Die Merkmale:
➤ Kann bis zu 16.8 Millionen Farben dar­stel­len und eignet sich für Bilder mit sehr feinen Farbverläufen
➤ Ist das Standardformat von den Digitalkameras
➤ Ermöglicht eine sehr hohe Bildkomprimierung (mit Verlust)
➤ Lässt sich nicht animieren
➤ Kann nicht transparent sein
➤ Man kann die Metadaten im Bild speichern
➤ Wird für Werbebanner ein­gesetzt
➤ Die Komprimierung ist nicht verlustfrei
➤ Verwenden Sie dieses Datei­format für Fotos mit vielen Farben
Komprimierung

PNG24-Dateien

Steht für Portable Networks Graphics. Dieses neuere Gra­fikformat eignet sich für fast alle Belange. Schwerpunkt sind jedoch Bilder mit wenigen Far­ben. Die Merkmale:
➤ Wird beim Speichern automatisch ver­lustfrei kom­primiert
➤ Kann bis zu 16.7 Millionen Farben darstellen und eignet sich für Bilder mit feinen Farb­verläufen
➤ Kann transparent sein
➤ Wird für Werbebanner eingesetzt
➤ Dieses Format ersetzt lang­sam, aber sicher die GIF-Dateien
Warum wird bei PNG-Bildern oft der weisse Hintergrund schwarz?

GIF-Dateien

GIF steht für Graphical Interchange Format. Dieses Grafikformat zeichnet sich vor allem durch folgende Merk­male aus:
➤ Wird beim Speichern auto­matisch ver­lustfrei komprimiert
➤ Kann max. 256 Farben darstellen. Eignet sich weniger für Fotos, sondern eher für Werbebanner, Logos und Skiz­zen
➤ Kann transparent sein
➤ Lässt sich animie­ren / bewe­gen und deshalb für einfache Animationen verwenden
➤ Wird für Werbebanner eingesetzt

SVG-Dateien

Steht für Scalable Vector Graphics. Die aktuellen Browser unterstützen mittlerweile das SVG-Grafikformat. Einige Merkmale:
➤ Vektorbasiert (Eine Vektorgrafik ist eine Grafik, die aus Elementen wie Linien, Kreisen, Polygonen oder all­ge­mei­nen Kurven zusammen­gesetzt ist.)
➤ Programmierungen innerhalb des Formats sind möglich.
➤ SVGs besitzen eine kleine Dateigrösse, wenn sie gross dargestellt werden.
➤ SVGs werden durch mathematische Gleichungen definiert. Die Informationen des Formates werden bei jeder Skalierung neu berechnet, wodurch es zu keinem Quali­tätsverlust kommt. Dadurch eignet sich dieses Bildformat vor allem für das Responsive Webdesign.

WebP

WebP (Weppy) ist ein 2010 von Google entwickeltes Da­tei­format für verlust­be­haftete und verlustfreie komprimierte sta­ti­sche oder animierte Bilder. WebP erreicht bei sehr hoher Komprimierung mehr Bild­qualität pro Daten­menge als JPG-Dateien! Es arbeitet besonders effektiv bei der Komprimierung von detailarmen Bildteilen und kann bis zu 16.8 Millionen Farben darstellen. Das Format unterstützt Transparenz und setzt Metadaten ein.
Mit dem Online-Tool ezgif.com/jpg-to-webp lassen sich JPG-Dateien in das WebP-Format konvertieren.
Moderne Browser und Bild­bearbei­tungs­pro­gramme können mit dem Dateiformat umgehen.

BPG

Better Portable Graphics bietet nicht nur kleinere Dateien, sondern eine bessere Bild­qualität. Das Spezielle am BPG-Format ist die hohe Datenkompression. Die Kom­primierung verspricht im Vergleich zum JPG eine wesentlich kleinere Datei­grösse bei ähnlicher Qualität. Das Problem bei neuen Dateiformaten sind die Browser, die die neuen Datei­for­ma­te kennen müssen. Die exotischen BPG-Dateien werden in allen Browsern dargestellt, weil die Inter­pre­ta­tion des Formates per Java­Script erfolgt.

AVIF

Das neue Format AVIF wird von Chrome und Firefox unterstützt. Dieses Dateiformat arbeitet mit noch klei­neren Da­tei­grössen als WEBP bei gleicher Qualität. Das Grafik­for­mat beherrscht transpa­rente Bereiche, verlust­freie oder ver­lust­behaftete (lossy) Kompression und kann Animation ent­halten.

WebM-Dateien

WebM ist ein Container-Format, welches sich für Audio- und Video­formate eignet. Es wurde 2010 von Google ent­wickelt und eignet sich als Alter­native zum MP4-Format. WebM wird primär im Web genutzt, ist ein Open-Sou­rce-Pro­jekt und wird, in Kombina­tion mit HTML5, auch in der Web­ent­wicklung ver­wendet.

PDF-Dateien

PDF steht für Portable Document Format. PDF ist ein plattformunabhängiges Dateiformat für Texte und Bilder. Das Ziel war es, ein Datei­format zu schaffen, mit dem es möglich ist, digitale Dokumente unabhängig von einem be­stimm­ten Textverarbeitungsprogramm respektive Betriebssystem originalgetreu zu benutzen.
Verwenden Sie dieses Format nicht als Ersatz für Webinhalte!
PDF-Dateien eignen sich lediglich als Downloads zum Beispiel für folgende Anwen­dungen: sauber druckbare Un­ter­la­gen, Mediadaten, E-Books.

DOC-Dateien

Die Erweiterung .DOC respektive .DOCX ist für das Word­format bekannt. Dieses Format eignet sich nicht für das In­ter­net. (Ausnahme: Sie bieten einen Download an, indem Sie darauf hinweisen, dass Sie die Datei zusätzlich im Word-Format anbieten.)
Dieses Format eignet sich nur, um Texte an Ihren Webdienstleister zuzustellen. Der wird daraus HTML-Dateien er­stel­len oder die Texte in Datenbanken (via Content-Management-Systemen) ablegen.
Erstellen Sie keine HTML-Dateien aus Word heraus. Dafür eignen sich spezialisierte Produkte weitaus besser.

Komprimierte Dateien wie .ZIP und .RAR verwenden

Anstatt an eine E-Mail mühsam Datei an Datei anzuhängen (und damit zu grosse E-Mail-Anhänge zu gene­rieren) komprimieren Sie die Dateien zu einer Einzigen. Dazu eig­nen sich Komprimierprogramme wie zum Beispiel Winzip oder Winrar.

Wieso Bilder ver­wen­den?

Es gibt mehrere Gründe, auf Webseiten Bil­der zu verwenden:

  • Auflockerung
    Niemand mag Bleiwüsten. Ab und zu ein Bild lockert jede Seite auf.
  • Unterhaltung
    Bilder können eine unter­haltende Funk­tion haben. Eine Prise Humor kann nicht schaden.
  • Erklärung
    Zum Beispiel ist ein grafisches Organigramm übersichtlicher als eine lange Beschreibung.
  • Produktfotos
    Wenn jemand etwas verkaufen will, so tut er gut daran, ausgezeichnete Fotos der Produkte zu zeigen. Solche Bil­der müssen eine informierende und eine emotionale Wirkung haben.

Kundengewinnungslabor

Tipps rund um Gra­fi­ken und Fotos

  • Exoten vermeiden
    Vermeiden Sie die Verwendung exotischer Dateiformate. Jedes Grafikprogramm kann in den oben erwähnten Grafik­formaten speichern.
  • Animationen
    Eine weitere Technik, um Werbebanner und andere grafische Elemente anzu­zeigen, ist der Einsatz von HTML5. Dieses Vorgehen bietet technisch gesehen die meisten interaktiven Möglichkeiten an.
    HTML5 ersetzt inzwischen die alte Flash-Technik.
  • Die Grafik Grafik sein lassen
    Bilder, Fotos, Logos müssen in einem der oben erwähnten Grafikformaten gespeichert sein. Bitte Datei nicht zu­erst in ein Worddokument oder eine PDF-Datei einbetten.
  • Farbwechsel
    Durch Klicks auf Farben kann der Betrachter sich ein Produkt in allen angebotenen Farben ansehen. Diese Funk­tion eignet sich zum Beispiel gut für Automobile und Kleidung.
  • Lupenfunktion / Zoom
    Stellen Sie eine Lupenfunktion zur Verfügung: Wandert die Maus über ein Produktfoto, wird ein Ausschnitt in einer Vergrösserung angezeigt. Der Betrachter kann in ein Bild hineinzoomen, um die Details zu sehen.
  • 360-Gradfunktion
    Verwenden Sie eine 360-Grad Funktion: Mit der Maus kann der Betrachter ein Bild virtuell drehen und das ge­zeig­te Produkt von mehreren Seiten aus betrachten.
  • Saubere Dateinamen
    Um Probleme zu vermeiden, schreiben Sie alle Dateinamen klein, verwenden Sie keine Leerzeichen und keine Um­laute.
    Beispiel:
    Anstatt Vergleich Österreich Schweiz.pdf besser vergleich-oesterreich-schweiz.pdf
  • Exif-Daten entfernen
    Wenn Sie Fotos von der eigenen Kamera oder dem Smartphone verwenden, verfügen diese über zahlreiche Zu­satz­informa­tionen wie Aufnahme­ort, verwen­dete Kamera und weitere Daten. Mit einem Online-Tool wie TinyPNG können Sie diese Daten löschen und Speicher­platz sparen.
  • Grafikkomprimierung
    Alle Grafiken müssen vor der Verwendung im Web komprimiert werden. So werden die Webseiten schneller ge­la­den und das Ranking von Google wird positiv beein­flusst. Viele Grafiken können um bis zu 90% kom­pri­miert wer­den. Nutzen Sie dazu Dienste, wie zum Beispiel:
    KrakenPunypngCompresspngCompressor

P.S.:

„Verlinken Sie diese Webseite, weil sie ständig aktualisiert wird!
kundennutzen.ch ist seit 2001 online.“

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Walser arbeitet seit 1995 mit dem In­ter­net. Er ist Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting- und Online-Tools-Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing-Manager. Er half frü­her als Agenturleiter Un­ter­neh­mern 100% mehr aus Ihrer Web­site heraus­zu­holen. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert. Spezielle Interessen: Umweltschutz und Geopolitik.