Contentpflege
Contentpflege HowTo
Bilder
Format
Das Format ist entscheidend für die Dateigröße und damit für die (schnelle) Ladegeschwindigkeit der Website. Als Faustregel gilt: Generell immer jpeg Dateien nutzen, es sei denn das Bild benötigt transparente Bereiche.
jpeg
jpeg's am besten über den "Für Web sichern" Dialog in Adobe Photoshop speichern. Die Voreinstellungen nutzen. die bps, die Farbprofil Informationen aus der Datei entfernen, und eine möglichst hohe Kompression (gleich niedrige Qualitätszahl) wählen. Nach dem Speichern die Dateigröße des Bild mit einem Bild-Optimierer, bsp. https://tinypng.com weiter verkleinern.
Folgende Einsparungen lassen sich an einem kleinen Bild (1280x852 Pixel, 72dpi) realisieren mit "Für Web sichern" erreichen (Die Beispiele sind am Ende der Seite):
Originaldatei (tiff): 3.302.600 Byte (3,3 MB)
PNG: 1.811.856 Byte (1,8 MB)
JPEG 60: 227.110 Byte (229 KB) (-87%)
JPEG 30: 114.092 Byte (115 KB) (-93%)
JPEG 10: 68.826 Byte (70 KB) (-96 %)
Nach der darauf folgenden Optimierung mit https://tinypng.com:
PNG: 549.493 Byte (553 KB) (-70% im Vergleich zum Ursprungs png)
JPEG 60: 185.844 Byte (188 KB) (-18% im Vergleich zum Ursprungs jpeg)
Error creating thumbnail: File missing
Dateiname
Der Dateiname folgt einem Schema, also einer Nomenklatur. Bewährt hat sich {yymmdd}-{möglichst-aussagekräftiger-name}.{dateityp} also bsp. 160813-guhl-seidenglanz-maui-promotion-header.jpeg.
<alt> Attribut
Das alt="Name" Attribut ist SEO relevant und gehört mit zu einer sauber gepflegten Website. In den meisten CMS Systemen wird dieses Attribut als Name des Bild angelegt. Der Name sollte Die Marke, Das Produkt und den Inhalt des Bildes kurz und knapp beschrieben. Bsp. "John Frieda® - Sheer Blonde Range".
Beispiele
PNG: 1.811.856 Byte (1,8 MB)
JPEG 60: 227.110 Byte (229 KB) (-87%)
JPEG 30: 114.092 Byte (115 KB) (-93%)
JPEG 10: 68.826 Byte (70 KB) (-96 %)
PNG Optimiert: 549.493 Byte (553 KB) (-70% im Vergleich zum Ursprungs png)
JPEG 60 Optimiert: 185.844 Byte (188 KB) (-18% im Vergleich zum Ursprungs jpeg)
