Bilder für Websites optimieren

Die folgenden Hinweise richten sich in erster Linie an Einsteiger in die redaktionelle Arbeit mit Websites – und natürlich auch an all jene, die bereits eine Website betreuen, ohne sich jemals Gedanken über die besonderen Bedingungen des Mediums gemacht zu haben.

Alles steht auf dem Spiel

Warum Bilder für die Verwendung auf Websites speziell vorbereitet werde MÜSSEN:

• Nicht-webgerechte Bilder lassen jede Website unprofessionell aussehen. Wer ein bisschen Ahnung hat, bemerkt sofort, wenn Amateure am Werk waren.
• Zu große oder falsch formatierte Bilder beeinträchtigen das Gesamtbild der Website negativ. Kein Webdesign der Welt kann das ausbügeln.
• Zu große Bilder führen zu unnötige langen Ladezeiten und schränken die Nutzbarkeit der Website ein. Sie sind ein Affront gegen die eigenen Leser.
• Lange Ladezeiten aufgrund schlecht vorbereiteter Bilder schaden dem Suchmaschinenranking der Website. Ein Akt der Selbstsabotage.
• Übergroße Bilddateien erschweren das Handling der Website im Rahmen von Wartungsarbeiten. Sie können zum Versagen von Backup-Tools und ähnlicher Wartungssoftware führen und die laufenden Kosten erhöhen.

Richtwerte für Bild- und Dateiformate

Eine einheitliche, in jedem Fall gültige Regel existiert nicht. Natürlich gibt es Anwendungsbereiche, in denen z.B. auch ungewöhnlich große Bilddateien ihre Berechtigung haben. In den allermeisten Fällen können aber die folgenden Angaben als Richtschnur dienen:

Standardformat für Webversionen von Bildern

• Dateiformat (Faustregel): JPG-Format für Fotos und Zeichnungen, PNG-Format für die meisten Schriftzüge, Logos und Ähnliches.
• Farbraum: RGB
• Bildgröße: 1.000 px bis 1.200 px (längere Seite), wenn keine speziellen Angaben für das Projekt gemacht wurden.  Die Bilder eignen sich damit auch für eine Anzeige in voller Größe innerhalb einer Lightbox.
• Dateigröße („Gewicht“): Möglichst unter 100 kb, jedenfalls unter 200 kb. Je mehr Bilder auf einer Page geladen werden, desto wichtiger ist eine möglichst geringe Dateigröße (z.B. Galerien).

Ausnahmen für einzelne große Bilder

Für Full-Screen- bzw. Full-Page-Bilder, wie sie häufig auf der Startseite verwendet werden, müssen wir eine Ausnahme machen. Eine ausreichende Bildgröße und -qualität lässt sich in den allermeisten Fällen mit einer Dateigröße von weniger als 300 kb erzielen. Für „schwerere“ Bilder sollte es einen wirklich guten Grund geben, und alles oberhalb von 500 kb ist unter allen Umständen zu viel.

Standardformat für Printversionen von Bildern

Für herunterladbare Printversionen z.B. von Buchcovers und sonstigen Produktabbildungen für Pressezwecke können folgende Richtwerte hilfreich sein:

• Dateiformat: JPG
• Farbraum: CMYK (Achtung: nicht mit allen Bildbearbeitungsprogrammen möglich).
• Bildgröße und -auflösung: 300 DPI, mind. 12 cm (längere Seite).
• Dateigröße („Gewicht“): Jedenfalls unter 5 mb, in den allermeisten Fällen geht es sogar deutlich „leichter“ (unter 3 mb). Für „schwerere“ Bilder sollte es einen wirklich guten Grund geben (z.B. ganzseitige Produktabbildung, Poster).

Systematische Benennung der Dateien

Grundsätzlich kann jeder sein eigenes Dateinamensystem erfinden. Wichtig ist es nur, sich konsequent daran zu halten und keine Leer- und Sonderzeichen zu verwenden. Ich selbst halte mich an folgende Regeln und lege diese auch meinen Kunden nahe.

Benennung von Bilddateien

• Nur Kleinbuchstaben: Hat Vorteile auf Linuxsystemen (und somit auf dem Großteil der Webserver), da diese zwischen Groß- und Kleinschreibung unterscheiden.
• Keine Sonderzeichen: Wichtig zur Vermeidung technischer Serverprobleme. Erlaubt sind alphabetische Zeichen (keine Umlaute, kein scharfes „ß“), numerische Zeichen, Bindestriche und Unterstriche. Alles andere ist gefährlich, das gilt insbesondere für Leerzeichen.
• Lieber Bindestriche als Unterstriche: Besser lesbar für Suchmaschinen.
• Vorangestelltes Kürzel für Bildkategorie: z.B. „cv-“ für Cover, „pt-“ für Portraitfoto, „il-“ für Illustration.
• Nachgestelltes Kürzel für Bildversion: Wenn es mehrere Versionen gibt, z.B. „-web“ für die sichtbare Webversion des Bildes und „-print“ für die nicht-sichtbare, aber herunterladbare Printversion.
• Kürzel „c“ für Copyright: Vor dem Namen des Urhebers.

Kürzel für Bildkategorien

(vorangestellt)

• cv: Cover (z.B Buchcover)
• pt: Portrait (Portraitfoto od. -zeichnung)
• il: Illustration (Bilder zur Illustration von Artikeln, Leseproben u.a.)
• ia: Innenansicht (in der Medienbranche übliche Bezeichnung für Bilder aus dem Inneren von Büchern, Zeitschriften etc.)
• ss: Screenshot
• bg: Background (für Hintergrundbilder)
• ic: Icon
• bn: Banner (z.B. Werbebanner)
• sl: Slide (Element eines Sliders)
• ds: Design (für Designelemente bzw. designimmanente Bilder)

Sonstige Kürzel

(mittig oder nachgestellt)

• c: Copyright (vor dem Namen des Urhebers bzw. Rechteinhabers)
• web: Webversion (nachgestellt)
• print: Printversion (nachgestellt)
• orig: Originalversion, z.B. unbearbeitete Bilddatei (nachgestellt)

Beispiele für Dateinamen

• Buchcover (Webversion): cv-kafka-die-verwandlung-web
• Buchcover (Printversion): cv-kafka-die-verwandlung-print
• Portraitfoto (Webversion) mit Urheber: pt-kafka-franz-c-marta-bildlich-web
• Portraitfoto (Printversion) mit Urheber: pt-kafka-franz-c-marta-bildlich-print
• Illustration mit Urheber: il-kaefer-von-vorne-c-egon-lichter

Dateien in der WordPress-Mediathek

Eine durchgehende systematische Benennung der Mediendateien ist besonders wichtig, wenn man mit WordPress arbeitet. Das beliebte Content Management System behandelt seinen Medienspeicher (Mediathek) leider wie eine Müllhalde.

WordPress liebt es, Bildversionen in den verschiedensten Größen zu erstellen, ob auf eigene Faust oder auf Befehl einer Erweiterung (Plugin). Dem Herausgeber der Website ist das in der Regel nicht bewusst, und auch Entwickler bekommend davon häufig nichts mit, bis sie erstmals einen Blick in den Medienordner (Uploads) auf dem Webserver geworfen haben.

Der Müll ist in der Mediathek nämlich nicht sichtbar, sondern breitet sich still und heimlich auf dem Webserver aus. Das kann extrem mühsam werden, wenn die Dateien irgendwann einmal für Archivierungszwecke heruntergeladen werden oder eine Migration der Website ansteht.

Linderung verschafft auch hier eine konsequent durchgezogene systematische Benennung der Dateien. Unerwünschte Versionen lassen sich so auch mit freiem Auge ganz leicht erkennen.

Redaktioneller Service

Nicht jeder hat die Zeit, Lust oder das Know-how, sich selbst bzw. organisationsintern um die redaktionelle Aufbereitung von Inhalten zu kümmern. In solchen Fällen helfen wir gerne mit einem individuell vereinbarten Redaktionsservice aus. Sie liefern die Inhalte, wir erledigen den Rest.

Das Angebot richtet sich nicht nur an unsere bestehenden Website-Kunden, sondern auch an Neukunden, die bereits eine WordPress-Website betreiben und Unterstützung in redaktionellen oder auch technischen Fragen suchen (Wartungsservice).