WordPress Bildoptimierung

Nachdem ich letzte Woche schon über Bilder gesprochen habe, lass mich bei dem Thema bleiben und heute über die Optimierung von Bildern in WordPress sprechen.

Das schöne an WordPress: Du kannst Bilder in beliebiger Bildgröße hochladen und WordPress macht einen Teil der Arbeit für Dich und stellt sie in passender Größe bereit. Sofern der Theme- oder Plugin-Autor dies berücksichtigt hat.

Doch das ist nur die halbe Miete. Denn wenn Du Deine Seite nimmst und diese mit Google Pagespeed analysieren lässt, wirst Du feststellen dass Google an fast jedem Bild etwas zu meckern hat.

Mit den folgenden Schritten zeige ich Dir, wie Du diesem Problem entgegen wirken kannst.

Bilder in der richtigen Größe hochladen

Klingt einfach, und doch ist es für manche Blogger und Solopreneure ein Riesending die Bilder in dem Format bereit zu stellen, in dem sie verwendet werden.

Hier ein Teil der Herausforderung:

• Slider
• Hero Images
• Beitragsbild
• Teil des Content
• Desktop vs. Mobil

Slider & Hero Images

Für diese Bilder ist es besser, sich einfach am Seitenverhältnis zu orientieren. Nur weil ein Teil Deiner Zielgruppe am 4k iMac arbeitet, heißt es nicht, dass es klug ist, das Bild in dieser Größe bereit zu stellen. Denn vielleicht sieht er die Website auch nur in einem Fenster was, nur einen Teil des Bildschirms einnimmt. Und die anderen 53%, die mobil bei Dir unterwegs sind, werden Dir keine Dankesschreiben da lassen, wenn sie spitz bekommen, dass Du ihr Datenvolumen ausreizt. Dann lieber auf ein Format im mittleren Bereich einigen und es für die 7% am iMac hoch skalieren. – Wer achtet schon auf Slider… Hauptsache es bewegt sich was! ;)
Das bekommst Du übrigens auch mit ein paar CSS Animationen hin.

Beitragsbilder und als Teil des Contents

Hier kannst Du mit den genauen Bildgrößen Deines Themes arbeiten. Heißt, ist ein Bild über dem Beitrag geplant und hat einen festen Rahmen, der Einfachheit halber 1200×675 Pixel (16:9), dann lädst Du es auch genau mit dieser Größe hoch. Und wie eingangs erwähnt, mit den richtigen Themes erledigt WordPress den Rest.

Bilder Optimieren

Falls Du Photoshop nutzt, dann ist Dir der Dialog „Für Web und Geräte speichern“ bekannt. Falls nicht, google es. Sofort! Nutz diesen bitte auch.

Du als Mac User kannst auf die Software ImageOptim zurückgreifen. Gibt es zwar auch online, doch finde ich das nicht so komfortabel.

Du bist Windows User, selbst Schuld. Nein alles gut, doch mangels Möglichkeit zum Testen bleibe ich Dir eine Antwort schuldig. Und falls Du ein gutes Tool kennst, lass es mich wissen!

Die Jungs und Mädels von ImageOptim haben selbst auch ein paar alternativen auf ihrer Website genannt. Schau mal vorbei.

So ein Bildoptimierer tut vor allem eines: alle Infos aus dem Bild entfernen, die Du nicht sehen kannst. Sei es, weil es Meta-Informationen sind, also Infos wann, wo und womit Du das Bild aufgenommen hast etc., sei es, weil es andere Dinge sind, die Du so nicht sehen kannst (ähnlich den nicht hörbaren Bereichen einer Mp3).

Gibts da auch ein Plugin?

Ja, sogar mehrere! Welches Du nutzen willst, hängt vor allem von zwei Faktoren ab. Erstens: Bist Du bereit, Geld auszugeben oder versuchst Du Dein Glück mit kostenfreien Tools? Der zweite Faktor ist nicht selten der, auf wen Du hörst.

Ich selbst habe mich zunächst durch verschiedene kostenfreie Varianten probiert. Bin dabei oft an Volumen-Limits gestoßen oder so komplizierte Einstellungen, dass mir Kaffee und Kakao ausgegangen sind noch bevor ich ein gutes Ergebnis hatte.

Im Bereich der kostenpflichtigen Lösungen bin ich nun bei optimus.io angekommen. Zum einem haben es zwei Menschen, denen ich in dem Bereich uneingeschränkt vertraue empfohlen und zum anderen darf ein gutes Produkt auch ehrliches Geld kosten. Am Ende tut es was es soll, und optimiert meine Bilder.

Zwar ist Google noch immer der Meinung, da geht noch was, doch das liegt vor allem daran, dass seitens Google die Spielregeln verschärft wurden.

Und dann ist da noch die Sache mit den Themes

In letzter Zeit habe ich bei einigen Themes gesehen, dass Bilder bewusst größer eingebunden werden. Und ich meine dabei nicht, den Sprung von 72 zu 144 DPI für Retina & Co., sondern einen Sprung, um Zoom-Effekte besser bedienen zu können. Also so Mini-Zoom für Hover. Über die Gründe mag ich nicht spekulieren. Was am Ende dabei rauskommt, ist dass Tante Google schimpft.

• Schön oder schnell!
• schön und schnell!
• schön schnell!
• schnell, aber schön?

Alles in allem brauchst Du für optimierte Bilder den richtigen Workflow. Es ist einfach Teil Deiner redaktionellen Arbeit. Und damit die fluppt, brauchst du die richtigen Tools!

Zusammengefasst bedeutet dies:

• Ein geeignetes Bild suchen oder erstellen, Bildrechte & Co. berücksichtigen. Tipp zum Tipp: Mach eigenen Bilder
• Das Bild auf die richtige Größe bringen
• Optimierung, vor allem mit Blick auf die Performance

Und falls Du Fragen hast oder noch Hilfe benötigst, melde Dich einfach. Ich helf Dir gerne! :)