Bei der Umwandlung bzw. Erstellung von Bilddaten gibt es diverse mögliche Formate, welche für die Verwendung im Browser eingesetzt werden können. Meist kann man das am besten geeignete Format aber schon aufgrund des Bildinhalts und/oder der Verwendungsart eindeutig festlegen. Wie immer gilt: es kann auch hier verschiedene Meinungen geben und im Einzelfall kommen natürlich auch Ausnahmen von der Regel vor.

Einige gängige Formate und ihre Einsatzzwecke und Eigenschaften:

JPG

Das häufigste Format im Internet, ist am besten für fotografische Inhalte oder komplexe Grafiken geeignet, welche keine großen einfarbigen Flächen aufweisen. Da Bilder bei der Ausgabe über ein Redaktionssystem in den meisten Fällen nochmal für den jeweiligen Einsatzzweck kleingerechnet werden, sollte die angelieferte Datei größer als das maximal dargestellte Format sein und die Kompression möglichst gering. Häufig empfiehlt sich eine Pixelgröße von 3000px (lange Seite) und eine Kompression von 11/12 (Photoshop) bzw. 90/100 (andere). JPGs unterstützen keine transparenten Bereiche (siehe PNG, GIF oder SVG).

PNG

Wenn Fotos (z.B. Produktabbildungen) oder Grafiken transparente Teilbereiche aufweisen, verwendet man meist PNG-Dateien. Diese sind im Gegensatz zu JPGs verlustfrei komprimiert, was meist zu einer besseren Qualität, aber auch zu größeren Datenmengen führt.

SVG

SVG-Daten sind vektorbasiert und eignen sich für alle einfachen Vektor-Daten ohne komplexen Füllungen, Strichstile oder ähnliches. Hauptanwendungswecke sind Logos und Icons, aber auch grafische Stilelemente. 

Andere

GIF

Wurde ursprünglich für Bilder mit transparenten Bereichen benötigt, heute wird es meist nur noch für kurze animierte Bildsequenzen eingesetzt. 

WebP

Alternativ-Format zu JPG mit einer besseren Kompressionsrate, allerdings (noch) nicht mit allen Browsern kompatibel. WebP-Dateien können bei der Ausgabe der Website automatisch vom Redaktionssystem erzeugt werden, eine Anlieferung fertiger WebP-Daten ist daher in den seltensten Fällen erforderlich.

Farbprofile

Bilder für das Web sollten immer im sRGB-Farbraum vorliegen. Eine EInbettung des Farbprofils ist allerdings nicht notwendig und je nach Dateiformat auch nicht möglich. Mehr dazu hier: https://imageoptim.com/color-profiles.html

Auflösung (DPI/PPI)

Die gewählte Auflösung in Bilddaten ist für das Web irrelevant. Bilder mit 100px Breite haben immer 100px Breite, egal ob bei 72dpi oder 300dpi. Diese Angabe kann also bei der Datenaufbereitung getrost ignoriert werden. Mehr dazu hier: https://t3n.de/news/72-dpi-mythos-luege-518017/