Häufige Beispiele für Bildtypen im Web sind GIF, JPG, und PNG. SVG-Dateien. Diese unterschiedlichen Formate bieten Webdesignern verschiedene Möglichkeiten, die visuelle Attraktivität einer Website zu optimieren.
GIF-Bilder
Verwenden Sie GIF-Dateien für Bilder mit einer kleinen, festen Anzahl von Farben. GIF-Dateien werden immer auf nicht mehr als 256 eindeutige Farben reduziert. Der Komprimierungsalgorithmus für GIF-Dateien ist weniger komplex als für JPG-Dateien, aber wenn er für flache Farbbilder und Text verwendet wird, erzeugt er sehr kleine Dateigrößen.
Das GIF-Format ist nicht für fotografische Bilder oder Bilder mit Farbverlauf geeignet. Da das GIF-Format eine begrenzte Anzahl von Farben hat, werden Farbverläufe und Fotos beim Speichern als GIF-Datei mit Streifenbildung und Pixelbildung enden.
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 einen Teil der Bildqualität verlieren. Dies wird als "verlustbehaftete" Komprimierung bezeichnet, da einige der Bildinformationen verloren gehen, wenn das Bild komprimiert wird.
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 Text, Farbe oder Linien unscharf werden können, was zu einem Bild führt, das nicht so scharf ist, wie es in einem anderen Format gespeichert würde.
PNG-Bilder
Das PNG-Format wurde als Ersatz für das GIF-Format entwickelt, als sich herausstellte, dass GIF-Bilder einer Lizenzgebühr unterliegen würden. PNG-Grafiken haben eine bessere Komprimierungsrate als GIF-Bilder, was zu kleineren Bildern führt als die gleiche Datei, die als GIF gespeichert wird. PNG-Dateien bieten Alpha-Transparenz, d. h. 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 ein PNG geeignet (oder Sie können uns stattdessen einfach mit CSS-Schatten beenden).
PNG-Bilder wie GIFs eignen sich nicht gut für Fotos. Es ist möglich, das Banding-Problem zu umgehen, das sich auf Fotos auswirkt, die als GIF-Dateien gespeichert wurden, indem echte Farben verwendet werden, aber dies kann zu sehr großen Bildern führen. PNG-Bilder werden auch von älteren Mobiltelefonen und Feature-Phones nicht gut unterstützt.
SVG-Bilder
SVG steht für skalierbare Vektorgrafik. 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 ohne Qualitätsverlust oder Erhöhung der Dateigröße gerendert werden können. Sie werden für Illustrationen wie Icons und sogar Logos erstellt.
Vorbereiten von Bildern für die Webbereitstellung
Unabhängig davon, welches Bildformat Sie verwenden, stellen Sie sicher, dass alle Bilder auf dieser Site für Web-Auslieferung vorbereitet. Zu große Bilder können dazu führen, dass eine Website langsam ausgeführt wird und die Gesamtleistung beeinträchtigt wird. Um dies zu bekämpfen, diese Bilder müssen optimiert werden um das Gleichgewicht zwischen hoher Qualität und der geringstmöglichen Dateigröße auf dieser Qualitätsstufe zu finden.
Die Wahl des richtigen Bildformats ist Teil des Kampfes, aber auch sicherzustellen, dass Sie diese Dateien vorbereitet haben, ist der nächste Schritt in diesem wichtigen Web-Bereitstellungsprozess.