Bilder machen auf den meisten Blogs & Webseiten einen erheblichen Teil der übertragenen Datenmenge aus und haben dadurch großen Einfluss auf die Ladegeschwindigkeit. Die Optimierung der Bilder auf deiner Website ist nicht schwer und mit wenigen Handgriffen erledigt. In diesem Beitrag zeige ich dir wie.

Vor dem Upload

Schon vor dem Hochladen solltest du deine Bilder bearbeiten. Folgende Änderungen möchte ich dir unbedingt ans Herz legen:

1. Auflösung reduzieren

Für die Darstellung im Web genügt in fast allen Fällen eine Auflösung von 72 dpi (Pixel pro Inch). Fotos von Digitalkameras sowie Grafiken, die für den Druck bestimmt sind, haben meist deutlich höhere Auflösungen. Die Reduktion der Auflösung verkleinert die Bilddateien erheblich und ist für die meisten Menschen und Darstellungen im Internet nicht sichtbar.

So änderst du die Bildauflösung unter Mac: Öffne das Bild einfach durch Doppelklick in der Vorschau. Unter Werkzeuge > Bildgröße anpassen kannst du die Auflösung ganz einfach ändern.

Bildauflösung anpassen Mac 1

Bildauflösung anpassen Mac 2

Unter Windows lässt sich die Auflösung leider nicht mit der mitgelieferten Software ändern (korrigiere mich, wenn du doch einen Weg kennst). Du kannst dazu aber ein kostenloses Programm wie dieses hier verwenden oder auch das kostenpflichtige Photoshop Elements*, das auch für viele andere Zwecke sehr nützlich ist.

2. Größe ändern

Bilder von Kameras oder Stockphoto-Anbietern sind oft sehr groß mit mehreren tausend Pixeln. Für deine Website benötigst du vermutlich höchstens 2000 Pixel Breite oder sogar deutlich weniger. Schau dir an, wie groß Bilder in deinem Theme höchstens dargestellt werden. Hier bei mir ist das Titelbild zu einem Blogartikel am größten.

In Chrome und Firefox kannst du ganz einfach die genaue Größe des Bildes herausfinden. Mach dazu einen Rechtsklick auf das Bild und klicke auf „Element untersuchen“. Dadurch öffnet sich ein kleines Fenster mit Quellcode – die Zeile mit dem Bild sollte direkt markiert sein. Wenn du mit der Maus über die Bild-URL fährst, erscheint die Größe:

Bildgröße auf Website herausfinden

Bildgröße auf Website herausfinden 2

In diesem Fall wird das Bild in einer Größe von 630 x 423 Pixel dargestellt. Das Bild selbst hat eine Größe von 670 x 450 Pixeln.

Wenn du nun also die maximale Breite für deine Website herausgefunden hast, kannst du Bilder vor dem Hochladen bereits auf die entsprechende Größe reduzieren (hier wären das also 630 Pixel Breite). Dazu kannst du unter Mac wieder die Bildwerkzeuge des Vorschau-Programms verwenden und in Windows das standardmäßig installierte Paint. Wenn du dabei nur die Breite vorgibst, wird die Bildgröße automatisch im richtigen Verhältnis angepasst.

Wenn du auf Nummer sicher gehen willst, reduziere deine Bilder mindestens auf 1024 Pixel Breite (es sei denn du benötigst sie schon jetzt in einer größeren Breite). Dadurch kannst du später auch ohne Probleme zu einem Theme mit größeren Bildern wechseln.

3. Dateinamen anpassen

Zuletzt empfehle ich dir noch, den Namen der Bilddatei vor dem Hochladen zu ändern. Das wirkt sich zwar nicht auf die Website Geschwindigkeit aus, aber auf die Suchmaschinenoptimierung im Allgemeinen. Benenne das Bild sprechend und kurz. Vermeide außerdem unbedingt Umlaute und andere Sonderzeichen, da manche Browser und Geräte (z.B. das iPhone) Bildpfade mit Sonderzeichen nicht richtig erkennen und dadurch das Bild nicht darstellen können.

Ein WordPress Plugin zur Bildoptimierung verwenden

Zusätzlich zur Bildbearbeitung vor dem Upload kannst du ein WordPress Plugin zur Bildoptimierung verwenden. Ich verwende am liebsten Compress JPG & PNG Images, das bis zu einem Limit von ca. 500 Bildern monatlich kostenlos ist. Es ermöglicht dir, alle vorhandenen Bilddateien mit einem Klick zu optimieren und bearbeitet automatisch alle Bilder, die du neu hochlädst. Alternativ, aber mit tendenziell schlechterer Komprimierung gibt es noch das kostenlose EWWW Image Optimizer.

Eine weitere kostenpflichtige Alternative ist WP Smush, das Bilder effektiv in der Cloud optimiert. Die kostenlose Version von WP Smush bringt oft nichts, da sie nur Bilder bis 1 MB komprimiert. Bilder, die beim Hochladen größer sind, werden gar nicht komprimiert.

Fazit

Bildoptimierung hat einen enormen Einfluss auf die Ladezeit deiner Website und sollte daher bei jedem neuen Upload zur Routine gehören. Welche Tools verwendest du dafür?

So löst du 5 typische WordPress Probleme

 

Gleich geschafft...
Bitte bestätige deine Anmeldung mit dem Link in der E-Mail, die wir die gerade geschickt haben.
So löst du 5 typische WordPress Probleme
Der Frühjahrsputz für deine Website
Kostenloses PDF: Schaff Platz für Neues, mehr Sicherheit und Page Speed.
WordPress Support ab 99€/h
Noch ein Schritt zum Download...
Just one more step...
Almost there...
Please confirm your email address by clicking the link in the email we just sent you.
Die Checkliste zum Abhaken für deine Performance-Optimierung
Kostenloses E-Book & noch mehr Ressourcen
Noch ein Schritt zum Download...
Noch ein Schritt zum Download...
Fast geschafft...
Kostenlose Anmeldung zur Challenge und zum Newsletter von HootProof,de und BlogYourThing.com. Du kannst dich jederzeit wieder abmelden. Datenschutz von HootProof & Datenschutz von BlogYourThing