Es gibt eine Reihe von Bildformaten, die auf Webseiten verwendet werden können. Einige gängige Beispiele sind GIF, JPG und PNG. SVG-Dateien werden heutzutage häufig auch auf Websites verwendet. Webdesigner erhalten damit eine weitere Option für Online-Bilder.
GIF-Bilder
Verwenden Sie GIF-Dateien für Bilder mit einer kleinen, festen Anzahl von Farben. GIF-Dateien werden immer auf maximal 256 eindeutige Farben reduziert. Der Komprimierungsalgorithmus für GIF-Dateien ist weniger komplex als für JPG-Dateien. Wenn er jedoch für flache Farbbilder und Text verwendet wird, werden sehr kleine Dateigrößen erzeugt.
Das GIF-Format eignet sich nicht für fotografische Bilder oder Bilder mit Farbverlauf. Da das GIF-Format über eine begrenzte Anzahl von Farben verfügt, enden Farbverläufe und Fotos, wenn sie als GIF-Datei gespeichert werden.
Kurz gesagt, Sie würden GIFs nur für einfache Bilder mit nur wenigen Farben verwenden, aber Sie könnten auch PNGs dafür verwenden (mehr dazu in Kürze).
JPG-Bilder
Verwenden Sie JPG-Bilder für Fotos und andere Bilder mit Millionen von Farben. Es verwendet einen komplexen Komprimierungsalgorithmus, mit dem Sie kleinere Grafiken erstellen können, indem Sie etwas von der Bildqualität verlieren. Dies wird als "verlustbehaftete" Komprimierung bezeichnet, da beim Komprimieren des Bildes einige Bildinformationen verloren gehen.
Das JPG-Format eignet sich nicht für Bilder mit Text, großen Farbblöcken und einfachen Formen mit scharfen Kanten. Dies liegt daran, dass beim Komprimieren des Bildes der Text, die Farbe oder die Linien möglicherweise unscharf werden, was dazu führt, dass das Bild nicht so scharf ist, wie es in einem anderen Format gespeichert würde.
JPG-Bilder werden am besten für Fotos und Bilder mit vielen natürlichen Farben verwendet.
PNG-Bilder
Das PNG-Format wurde als Ersatz für das GIF-Format entwickelt, als sich herausstellte, dass für GIF-Bilder eine Lizenzgebühr anfällt. PNG-Grafiken haben eine bessere Komprimierungsrate als GIF-Bilder, was zu kleineren Bildern führt als die gleiche Datei, die als GIF gespeichert wurde. PNG-Dateien bieten Alpha-Transparenz, dh Sie können Bereiche Ihrer Bilder haben, die entweder vollständig transparent sind oder sogar eine Reihe von Alpha-Transparenz verwenden. Ein Schlagschatten verwendet beispielsweise eine Reihe von Transparenzeffekten und wäre für PNGs geeignet (oder Sie beenden uns einfach mit CSS-Schatten).
PNG-Bilder sind wie GIFs für Fotos nicht geeignet. Es ist möglich, das Streifenproblem zu umgehen, das als GIF-Dateien gespeicherte Fotos mit echten Farben beeinflusst. Dies kann jedoch zu sehr großen Bildern führen. PNG-Bilder werden auch von älteren Handys und Funktionstelefonen nicht gut unterstützt.
Wir verwenden PNG für alle Dateien, die Transparenz erfordern. Wir verwenden PNG-8 auch für alle Dateien, die sich als GIF eignen, stattdessen dieses PNG-Format.
SVG-Bilder
SVG steht für Scalable Vector Graphic. Im Gegensatz zu den rasterbasierten Formaten in JPG, GIF und PNG verwenden diese Dateien Vektoren, um sehr kleine Dateien zu erstellen, die in jeder Größe gerendert werden können, ohne dass die Qualität der Dateigröße abnimmt. Sie werden für Illustrationen wie Symbole und sogar Logos erstellt.
Bilder für die Webbereitstellung vorbereiten
Unabhängig davon, welches Bildformat Sie verwenden, und Ihre Website wird sicher auf allen Seiten verschiedene Formate verwenden, müssen Sie sicherstellen, dass alle Bilder auf dieser Website für die Bereitstellung im Web vorbereitet sind. Zu große Bilder können dazu führen, dass eine Site langsam läuft und die allgemeine Leistung beeinträchtigt. Um dem entgegenzuwirken, müssen diese Bilder optimiert werden, um das Gleichgewicht zwischen hoher Qualität und der niedrigsten möglichen Dateigröße bei dieser Qualitätsstufe zu finden.
Die Wahl des richtigen Bildformats ist Teil des Kampfes, aber auch die Vorbereitung dieser Dateien ist der nächste Schritt in diesem wichtigen Webbereitstellungsprozess.
Originalartikel von Jennifer Kyrnin. Herausgegeben von Jeremy Girard.
