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

mit Keine Kommentare

Online-Marke­ting-Bei­trag: Da­tei­formate

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 29.9.2022

DateiformateQuelle: Pixabay / MZZD / Pixabay-Lizenz

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

Die richtigen Datei­formate 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 darstellen 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 verlustfrei 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 verlustfrei 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 Bildbearbeitungsprogramme 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 Komprimierung 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 Grafikformat beherrscht transpa­rente Bereiche, verlust­freie oder ver­lust­behaftete (lossy) Kompression und kann Animation ent­halten.

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 Dateiformat 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 Anwendungen: sauber druckbare Un­ter­la­gen, Mediadaten, E-Books.

DOC-Dateien

Die Erweiterung .DOC respektive .DOCX ist für das Wordformat 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 eignen sich Komprimierprogramme wie zum Beispiel Winzip oder Winrar.

Wieso Bilder ver­wen­den?

Es gibt mehrere Gründe, auf Webseiten Bilder zu verwenden:

  • Auflockerung
    Niemand mag Bleiwüsten. Ab und zu ein Bild lockert jede Seite auf.
  • Unterhaltung
    Bilder können eine unter­haltende Funktion 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.