WordPress Bildoptimierung: Wegbegleitung für ein Bild

WordPress Bildoptimierung fängt schon bei der Entstehung des Bildes an und endet mit der optimalen Darstellung auf der Website. Google Pagespeed 100% und optimale Ladezeiten sollten für die Bildoptimierung das Ziel sein. Begleite mich auf dem Weg, die das hier gezeigte Bild genommen hat – ok, es ist ein wenig groß, aber es soll das ‚Machbare‘ zeigen.

WordPress Bildoptimierung: Sonnenuntergang am Steinhuder Meer

Keine, oder nicht optimale WordPress Bildoptimierung, führen zu Frust bei dem Benutzer, als auch bei dem Verfasser eines Artikels/Beitrages. Der Benutzer findet die langen Ladezeiten ‚zum Weiterklicken‘. Der Verfasser hat Probleme damit, daß keiner wegen den langen Ladezeiten bei seinem Artikel auf ‚Weiterlesen‘ klickt, und damit auch keinen Kommentar abgibt. Somit bleibt sein toller Artikel ungelesen und schmachtet so dahin.

Bei Google Pagespeed Insights und Co. werden wir auch nicht mit 100% Werten glänzen. Damit, sind fordere Rankink Plätze auch passe – und wer kann uns dann finden und lesen? Wobei natürlich auch klar sein muß, daß Bildoptimierung allein nicht ausreicht, es kommt schon auch auf den Content an, den man mitliefert.

Content mit Bildern erfordert 'Bildoptimierung', damit die Bilder nicht zum Einstiegshindernis werden.Detlef

Ich mache mich mit einem Bild auf den Weg, daß eine Dateigröße von 1MB und eine Abmessung von 1900*1266px hat – also schon recht ansehnlich. Ziel ist es festzustellen, ob der beschrittene Weg keine Einbahnstraße ist.

Folgende Ziele sollen erreicht werden:

  • optimale Bildqualität
  • gute Ladezeiten
  • Google 100% PageSpeed Insights

Wie das Bild entstanden ist und welche Bearbeitungschritte das Bild durchlaufen hat, soll dass Geheimnis des Fotografen bleiben. Unser Weg beginnt bei dem Export des Bildes. Das Bild erhielt in dem Bildbearbeitungsprogramm einen Titel, eine Beschreibung und eine Verschlagwortung. Ich benutze Lightroom und daher beziehen sich die Exporteinstellungen auch auf dieses Programm. Andere Programme werden ähnliche Einstellungsmöglichkeiten für die Exportfunktion anbieten.

Die Exporteinstellungen führen immer wieder zu hitzigen Diskussionen. Ich gehe recht pragmatisch vor, weil ich meine Ziele kenne. Nachfolgend werden nur die Wichtigen angeschrieben.

WordPress setzt die Qualität momentan intern auf 82% und schärft die Bilder entsprechend nach. Ich stelle hier 85(%) ein, weil meine Original-Bilddatei erhalten bleibt, und ich lieber etwas mehr Qualität möchte. Die endgültige Dateigröße wird sich nicht wesentlich, oder gar nicht erhöhen. Das Gefühl hier etwas mehr zu tun ist beruhigend – wenn es etwas bringt.

In Bildschirm einpassen mit einem Format von 1900*1900px. Die Größe soll nicht verändert werden. Die Auflösung ist für die Bildschirmausgabe nicht relevant. Ich wähle ein relativ großes Format, damit ich für fast alle Bildschirmgrößen gerüstet bin. Beim Hochladen der Bilddatei werden die von mir festgelegten Bildgrößen von meiner WordPress Anwendung erzeugt und komprimiert. Nur diese exportierte Bilddatei wird im Original erhalten.

Ich stelle einfach hoch ein. Die Bilddatei, die ich zum Schluß – wenn die Bildoptimierung durchlaufen wurde – in dem Artikel verwende, wird dadurch nicht wesentlich größer.

Ich exportiere alle Metadaten bis auf Positions- und Personen-Informationen, weil ich diese im späteren Workflow noch brauche. Es sind auch die Verschlagwortung, der Bildtitel und die Bildbeschreibung enthalten.

wordpress-bildoptimierung-workflow

Vor dem Bildimport müssen einige Anpassungen erledigt sein:

  1. die Größe des Blog-Content muß festgelegt werden
  2. die Plugin Einstellungen für ‚Optimus‘ müssen erfolgt sein
  3. Bildergrößen müssen im System eingepflegt sein
  4. das WordPress Premium Plugin ‚Optimus‘ muß installiert sein
  5. das WordPress Plugin ‚Medie Library Assistent‘ muß installiert und eingestellt sein
  6. falls die Bildgrößen nicht händisch eingepflegt werden, sollte das WordPress Plugin ‚Simple Image Sizes‘ installiert sein

Es sind nur die wichtigsten Informationen eingeflossen, da nicht die einzelnen WordPress Plugins und deren detaillierte Einstellungen das Artikelziel sind. Vorhandene Informationen sind entsprechend verlinkt.

screen-angelegte-bilddateien

Meine Screenshots werden nicht das zeigen, was auf Deinem System vorhanden ist, weil dort nicht die WordPress Plugins installiert sind, die ich verwende. Dies zur Information.

Beim Bildimport werden alle enthaltenen Metainformationen – die ich parametriert habe – in die erweiterte WordPress Medienverwaltung eingelesen. Gleichzeitig erfolgt über Optimus die Bildoptimierung und die von mir geforderten Bildgrößen werden erzeugt. Zusätzlich werden die WebP-Dateien angelegt, weil ich dies so in Optimus eingestellt habe.

Das Dateiverzeichnis für die angelegten Bilddateien zeigt, daß die Originaldatei ca. 1000kB und die für mich relevante, mit dem Format 784*430px, lediglich noch rund 50kB groß ist. Das WebP Format zeigt hier nur noch eine Größe von ca. 32kB – was zu erwarten war. Diese Datei wurde als Artikelbild eingebunden.

Meine Artikel unterliegen immer einer festgelegten Testprozedur, von denen ich aber nachfolgend nur einige aufliste. Für Google Pagespeed ‚think with Google‚ – weil es alle Ergebnisse auf einen Blick zeigt, ‚GTmetrix‚ für den Mobil-Test und ‚Pingdom‚, um Pagespeed und Ladezeiten zu überprüfen.

Hier sind die Ergebnisse

Die WordPress Bildoptimierung und deren Randbereiche wie Export aus Bildverarbeitung, Bildgrößen, Feststellung des Content-Bereiches sind nicht zu schwer. Es sind einige Abläufe einzuhalten, damit Google Pagespeed Insights 100% und Ladezeiten beherrschbar bleiben.

Wenn dann ein interessanter Content aus der Feder geflossen ist und sich an SEO-Richtlinien gehalten wurde, dann wird sich auch der Artikel bei den Suchergebnissen nach Vorne drängeln.

Das Bild in voller Pracht (wenn Du darauf klickst)!

WordPress Bildoptimierung: Sonnenuntergang am Steinhuder Meer
einfach nur dagesessen, die Ruhe genossen und fotografiert.
QuelleBeschreibung
underscores.meTolles Starter-Theme für WordPress. Es ist auch Grundlage für meine Anwendung.
wordpress 100% google pagespeed testergebnisse WordPress Google PageSpeed Insights 100% ist für das eigene Ego gut, aber für eine gute Site ist dieser Wert nicht ausreichend. Was zu beachten ist.

Kommentare machen einen Blog erst lebendig

Welchen Weg geht Deine Bildoptimierung? Hast Du Fragen oder Anregungen? Ich lerne gern von Dir hinzu!

Artikel-Informationen
RichSnippet Image
Artikelname
WordPress Bildoptimierung: Wegbegleitung für ein Bild
Veröffentlicht
9. November 2016
Letztes Update
5. Februar 2017
Beschreibung
Wordpress Bildoptimierung mit dem Ziel: Google Pagespeed 100% und optimale Ladezeiten. Begleite mich auf dem Weg, den dieses Bild genommen hat.
Autor
Herausgeber
Herausgeber Logo
RichSnippet Logo

Teilen auf:

Ein Kommentar zu “WordPress Bildoptimierung: Wegbegleitung für ein Bild

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.