Bilder sind ein wichtiger Bestandteil von Websites. Gerade bei Künstler-Websites spielen sie im Rahmen von Werkgalerien eine große Rolle. In diesem Artikel erfährst du, warum es sich lohnt, vor dem Hochladen, die Bilder in drei Schritten vorzubereiten. Ich gebe dir Hintergrundwissen zum Thema Auflösung und Bildschirmmaße und schließlich erhältst du einige Tipps für die praktische Umsetzung.

Was du gleich zu Beginn wissen solltest: wenn du Bilder aus dem Smartphone oder der Digitalkamera völlig unbearbeitet – also mit kryptischem Originalnamen und in Originalgröße – in WordPress hochlädst, dann
• belegen sie unnötig viel Speicherplatz,
• erhöhen sie die Ladezeiten der Seiten, in die sie eingebunden sind und
• versäumst du, den Suchmaschinen wichtige Informationen zu den Bildinhalten mitzugeben.

Die drei wesentlichen Schritte der Bildvorbereitung sind:
• Dateinamen anpassen
• Bildmaße anpassen (Zuschnitt und skalieren)
• Bilder komprimieren

Am besten gewöhnst du dir eine Routine an, die du konsequent befolgst. Das Nachbearbeiten von Bildern innerhalb von WordPress sollte die Ausnahme sein.

1) Arbeite mit Kopien und sichere das Original

Die Bilder, die du auf deine WordPress Website bringen willst, liegen vermutlich zunächst verstreut in verschiedenen Verzeichnissen auf deinem Computer. Beginne damit, dass du deine Auswahl in einem Ordner zusammenführst. Diesen Ordner könntest du „bildauswahl-website“ nennen. Belasse die Originale an ihren angestammten Plätzen und speichere lediglich eine Kopie in diesen Ordner.

2) Dateinamen anpassen

Als nächstes solltest du die Dateinamen anpassen. Dabei gilt es zwei Regeln zu berücksichtigen:

Verwende stets sprechende Dateinamen

„Was sind denn sprechende Dateinamen?“, magst du dich jetzt vielleicht fragen. „IMG_7689.jpg“ oder „DSC471188.jpg“ sind es jedenfalls nicht. Sprechende Dateinamen sind lesbar und „erzählen“ etwas vom Bildinhalt: „2019_werkreihe-am-meer_wellen_01.jpg“ oder „2017_portrait_kind_auftragsarbeit_acryl_60x40.jpg. Schon der Dateiname transportiert also Informationen zum Bildinhalt. Das erleichtert dir später die Suche in der Mediathek. Zudem haben es die Suchmaschinen leichter, deinen Website-Inhalt sinnvoll zu indexieren.

Verwende Namen ohne Umlaute, Sonder- und Leerzeichen (ersetze Leerzeichen einfach mit einem Unterstrich).

Wenn du diese Regel konsequent beherzigst, vermeidest du mögliche technische Probleme bei der nachfolgenden Bildbearbeitung aber auch mit deiner Website. Hintergrund: nicht alle Browserversionen und Programme können mit Umlauten, Sonderzeichen oder Leerzeichen umgehen. Der Mensch ist ein Gewohnheitstier, auch wenn du die Regel kennst, schleichen sich insbesondere die Umlaute (ä, ö, ü) im Trott gerne wieder in die Dateinamen ein. Schau am besten zweimal hin.

Die Umbenennung kannst du direkt auf dem Laufwerk einzeln vornehmen oder mit Hilfe eines Bildbearbeitungsprogramms. Letzteres empfiehlt sich vor allem, wenn du viele Bilder zu bearbeiten hast und mehrere Bilder mit einem einheitlichem Titel und Seriennummer gruppiert werden können:
• „2019_werkreihe-am-meer_wellen_01.jpg“
• „2019_werkreihe-am-meer_wellen_02.jpg“
• „2019_werkreihe-am-meer_wellen_03.jpg“
• …

In diesem Fall lässt sich das Umbenennen auch gut mit dem Vorgang der Bildgrößenanpassung kombinieren. Du sparst dann einen Arbeitsschritt.
Bevor wir zu dem Schritt „Bildmaße anpassen“ kommen, stellt sich jedoch die große Frage: „Wie groß sollen die Bilder denn sein?“ Darum geht es im nächsten Abschnitt.

3) Bildmaße festlegen

Eine allgemeine Regel für die Bildgröße lautet: so groß wie nötig und so klein wie möglich.
Auf keinen Fall, solltest du, wie eingangs erwähnt, das Originalbild der Kamera in die Mediathek hochladen! Das macht deine WordPress-Installation dick und behäbig und kann sich je nach Einbindung in die Website äußerst ungünstig auf die Ladezeiten deiner Website auswirken.

Was bedeutet „so groß wie nötig“ konkret? Das hängt davon ab, wie groß das Bild auf der Website angezeigt werden soll. Ist es ein Bild, das den ganzen Bildschirm einnehmen wird (vielleicht als Teil eines ganzseitigen Sliders), dann bist du mit einer Breite von 2000 Pixel auf der sicheren Seite. In den meisten anderen Fällen reicht jedoch ein Bildmaß von 1200 x 900 Pixeln. Wenn du dir sicher bist, dass du beispielsweise deine Galeriebilder mit einer maximalen Kantenlänge von 800 Pixel zeigen möchtest (weil du deine Bilder vielleicht aus Prinzip nicht größer im Netz verbreiten möchtest), dann solltest du dieses Maß (also 800 px) wählen.

Hintergrundwissen: Bildschirmauflösung und Bildmaß

Um dir ein Gefühl für das Verhältnis von Bildschirm- und Bildmaßen zu geben: die übliche Auflösung für Monitore von 22-24 Zoll beträgt 1920 x 1080 Pixel. Das heißt es stehen 1920 Bildpunkte in der Breite und 1080 Bildpunkte in der Höhe zur Anzeige des Bildschirminhalts zur Verfügung.

Mit dem Smartphone geschossene Bilder sind aber schnell 2-3 Mal so groß, so erzeugt das iPhone7 Bilder in einer Auflösung von 4032 x 3024 Pixel. Ein Bild mit diesen Maßen ist somit zu groß für eine 1:1 Darstellung und muss vom Browser zu Lasten der Ladezeit heruntergezoomt werden oder es wird nur ein Ausschnitt vom Bild angezeigt, so dass der Benutzer scrollen muss.

Selbst wer über einen Monitor mit einer höheren Auflösung verfügt (wie etwa Macs mit 2560 x 1600 oder 2560 x 1440 Zoll) ist mit einem 2000 Pixel breiten Bild gut bedient, denn nur selten wird in diesen Fällen der Browser im Vollbild-Modus verwendet. Stattdessen sind neben dem Fenster mit dem Browser meist noch weitere Fenster geöffnet, so dass das Fenster, in dem deine Website angezeigt wird, kleinere Ausmaße hat.

Nun sei an dieser Stelle verraten, dass WordPress und dein Theme an vielen Stellen dafür sorgen, dass nicht immer das jeweilige Originalbild zur Anzeige kommt, sondern automatisch vorgenerierte Standardformate (Vorschaubilder, Mittelgroß, Groß), die per se kleiner sind. Doch ist trotzdem dringend davon abzuraten, dein System unnötig mit den großen Monsterdateien zu belasten. Sie bringen keinen Mehrwert und sollten im Sinne eines ressourcensparenden Vorgehens unbedingt im Vorfeld verkleinert werden. Das hält deine WordPress Website schlank und minimiert die Risiken von längeren Ladezeiten.

Und wieviel DPI sollte die Datei haben?

Das ist völlig egal. Für die Darstellung am Bildschirm ist einzig und allein die absolute Anzahl an Pixeln, also die Kantenlänge (Höhe x Breite) des Bildes entscheidend. Das Maß DPI (dots per inch) ist eine Kennzahl die ausschließlich für den Druck relevant ist. Anders ausgedrückt, eine Datei mit 300 DPI ist nicht größer als eine Datei mit 72 DPI, wenn die Kantenlängen identisch ist. Probiere es einfach mal aus und speichere eine Datei einmal mit 300 DPI und einmal mit 72 dpi. ab Die Dateien sind exakt gleich groß.

JPG oder PNG?

PNG ist ein Dateiformat, das mehr Bildinformationen als die JPG-Datei enthält. Es ist also größer. PNG sind dann sinnvoll, wenn der Hintergrund des Bildes transparent ist, wie beispielsweise bei einem Schrift-Logo ohne farblichen Hintergrund. Deshalb ist in allen anderen Fällen das JPG-Format zu bevorzugen.

4) Bildmaße anpassen

Als nächstes kann es mit dem Anpassen der Bildmaße weitergehen. Es gibt zwei Arten der Anpassung: den Zuschnitt und die Skalierung. Zuschnitt bedeutet, dass du einen Ausschnitt des Bildes wählst und abspeicherst; Skalierung bedeutet, dass du die Kantenlängen des Bildes veränderst. Beachte jedoch: Bilder niemals nach oben skalieren. Das verschlechtert die Bildqualität, sprich das Bild wird unscharf/pixelig. Probiere es einfach mal aus und du wirst es schnell selbst erkennen.

Bildbearbeitungsprogramme erleichtern dir die Arbeit

Für die Bildbearbeitung benötigst du in der Regel ein Bildbearbeitungsprogramm. Wenn du einen Mac hast, kannst du einzelne Bilder auch schnell und leicht mit dem Tool Vorschau anpassen, doch wenn du viele Bilder anzupassen hast, dann nimmt dir die Stapelverarbeitung deines Bildbearbeitungsprogramms viel Arbeit ab. Es muss nicht gleich Photoshop sein. Es gibt preisgünstige Alternativen (die Recherche überlasse ich dir selbst) und auch kostenlose Varianten wie Gimp, Irfan View (nur Windows) oder PhotoScape X.

Ich selbst nutze PhotoScape X und kann diese Software nur empfehlen. Mich erstaunt immer wieder, was man mit der Free Version alles machen kann. Das ist vielleicht etwas, das den Einsteiger abschreckt, die vielen Möglichkeiten. Aber wenn man sich auf die Schritte konzentriert, die für die Skalierung und Umbenennung von Dateien notwendig sind, dann ist das Handling nach 2-3 Wiederholungen einprägsam. Ich empfehle meinen Kunden gerne PhotoScape X, weil wir dann die gleiche Software benutzen und ich optimal unterstützen kann. Ich plane demnächst eine Schritt-für-Schrittanleitung für das Skalieren und Umbenennen von Bildmaßen mit Photoscape X bereitzustellen.

Passgenau und verkleinert

Am Ende dieses Arbeitsschrittes hast du passgenaue Bilder, die durch die Skalierung schon mal ordentlich geschrumpft sind. Hier sind die Daten eines mit dem iPhone7 geschossenen Fotos vorher-nachher:
vorher: 1,9 MB – Original vom Smartphone – 4032 x 3024 Pixel
nachher:
a) 648 KB – Bild ist für Vollbilddarstellung vorgesehen – 2000 x 1500 Pixel: 66% Ersparnis gegenüber Original
b) 248 KB – Bild große Maße – 1200 x 900 Pixel –  87% Ersparnis gegenüber Original

Das ist doch schon ganz ordentlich. Aber da geht noch mehr! Kommen wir zum letzten Schritt, dem Komprimieren der Dateien.

5) Dateien komprimieren

Bei der Komprimierung von Bildern, werden Daten entfernt, deren Verlust kaum wahrnehmbar ist. Die Effekte sind wirklich erstaunlich. So lässt sich die Dateigröße aus dem Beispiel oben über das Komprimieren um weitere 62% auf 107 KB verkleinern, das entspricht nur noch 0,06 % der Ausgangsgröße!

Ich nutze zum Komprimieren am liebsten den externen Dienst von tinypng.org. Eine Alternative sind jpegmini.com oder der deutschsprachige Dienst wepsitepanet.com/de. Jpgmini.com habe ich noch nicht ausprobiert, an Websiteplanet stört mich, dass die komprimierte Datei automatisch eine Dateierweiterung „_opitimized“ erhält.

Screenshot tinypng

Die Nutzung ist kinderleicht. Über Drag&Drop ziehst du die Dateien auf die Seite und einen kurzen Moment später, kannst du die komprimierten Dateien einzeln oder im Paket herunterladen.

Geschafft, die Dateien sind nun fertig zum Hochladen!

6) Ordnung ist das halbe Leben

Am Ende der Prozesskette hast du mindestens vier Bildversionen.
a) das Original
b) die umbenannte Version
c) die angepasste Version (zugeschnitten/skaliert)
d) die für die Website optimierte, komprimierte Version

Ich empfehle, die Versionen durch Speichern in Unterordnern sauber voneinander zu trennen. So kannst du die Dateinamen identisch halten und musst den Bearbeitungsstatus nicht im Dateinamen ausdrücken.

Mein Ordnungsprinzip ist wie folgt: Den Unterordner für die skalierten Bilder benenne ich nach der Länge der langen Bildkante, also z.B. „2000“ oder „1200“. Darin entpacke ich die *.zip-Datei von tinypng.org, die automatisch einen Ordner mit dem Namen „tinified“ anlegt. Wenn es nur einzelne Dateien sind, lege ich diesen Ordner manuell an.

Mit dieser Vorgehensweise findest du die gewünschten Dateien schnell wieder. Am Anfang wirst du vielleicht auch noch etwas mit den Größen und den Dateinamen experimentieren. Wenn dabei „Fehlversionen“ entstehen, solltest du nicht vergessen, diese zum Schluss wieder konsequent zu löschen.

Fazit

In diesem Artikel habe ich dir aufgezeigt, welche drei Schritte du vor dem Hochladen von Bildern in die Mediathek beherzigen solltest:

  • Umbenennen der Datei
  • Anpassen der Bildmaße
  • Komprimieren der Datei

Wenn du dich konsequent daran hälst, werden es dir die Suchmaschinen und die Besucher deiner Website danken, denn irre große Bilddateien können deine Website empfindlich verlangsamen.

Um die Suchmaschinen glücklich zu machen, braucht es jedoch noch weitere Maßnahmen: nach dem Hochladen der optimierten Bilder solltest du dich noch der Metadatenpflege widmen.

Hierzu wird es demnächst einen Blogbeitrag von mir erscheinen.

Newsletter Anmeldung

Wenn du keine meiner Aktionen oder Blog-Beiträge verpassen möchtest, dann abonniere meinen Newsletter.