<center>https://www.perun.net/wp-content/uploads/2017/06/pagespeed-nicht-optimierte-bilder.png</center> <br/>Ich habe <a href="https://www.perun.net/2013/02/25/in-den-bildern-liegt-eines-der-groessten-potentiale-bei-der-optimierung-der-frontend-performance/">bereits im Februar 2013</a> einen Blogartikel verfasst, wo ich darauf hingewiesen habe, dass eines der <strong>größten Potentiale</strong>, wenn es darum geht die Ladezeit einer Website zu verbessern, in der Optimierung der Bilder liegt. Das gilt logischerweise nicht nur für WordPress-Websites sondern für alle Websites, egal ob sie mit oder ohne ein CMS auskommen.

Um das ganze zu verdeutlichen zeige ich euch ein aktuelles Beispiel. Ich habe dieses Beispiel gewählt, weil es im Vergleich zu den anderen Projekten, die ich in den letzten Wochen und Monaten optimieren durfte, ein <strong>moderates</strong> Beispiel ist. Zu krasse Beispiele bergen immer die Gefahr, dass dies einem nicht abgenommen wird, weil es für einige als zu konstruiert wirkt. 

<h2>Das aktuelle Beispiel</h2>

Wie man an Hand der folgenden Abbildung sieht... <img src="https://ssl-vg03.met.vgwort.de/na/6db0aca3250a4a0fad7d4df85967f195" width="1" height="1" alt="" /><br/>

<center> <img src="https://www.perun.net/wp-content/uploads/2017/06/pagespeed-nicht-optimierte-bilder-676x371.png" alt="Drei zu optimierende Bilder auf der Startseite" width="676" height="371" class="size-voll_bild_caption wp-image-9211" /><br/></a> Drei zu optimierende Bilder auf der Startseite</center>

... wird von Google Pagespeed Insights angemerkt, dass drei der Bilder über starkes Optimierungspotential verfügen. Wichtig ist auch zu erwähnen, dass sich diese drei Bilder auf der Startseite befinden, also der Seite die von den Besuchern als die häufigste Einstiegsseite gewählt werden.

Ich habe die Bilder bearbeitet bzw. auf 55% Qualität komprimiert, weil ich bis hier auch nach längerem hinsehen keine Qualitätsunterschiede erkennen konnte und hier das Ergebnis:

<ul>
    <li>Bild 1: vorher 729 KByte → 55% Qualität → 125 KByte nachher</li>
    <li>Bild 2: vorher 465 KByte → 55% Qualität → 194 KByte nachher</li>
    <li>Bild 3: vorher 302 KByte → 55% Qualität → 51 KByte nachher</li>
</ul>

Dadurch ergibt sich eine <strong>Gesamtersparnis von 1126 KByte</strong> und das sagt Google dazu…

<center> <img src="https://www.perun.net/wp-content/uploads/2017/06/pagespeed-optimierte-bilder-676x349.png" alt="Das Ergebnis mit den optimierten Bildern" width="676" height="349" class="size-voll_bild_caption wp-image-9212" /><br/></a> Das Ergebnis mit den optimierten Bildern</center>

Also wie man sieht, kann man bereits mit einer vergleichsweise einfachen Optimierung der Bilder beachtliche Verbesserungen erreichen kann. Sicherlich, es ist noch einiges an Potential vorhanden, aber dann das Thema eines anderen Artikels.

<h2>Worum es mir bei diesem Beispiel geht</h2>

Ich möchte mit diesem Beispiel noch einmal verdeutlichen, dass man mit recht einfachen Mitteln und einem überschaubaren Zeiteinsatz viel erreichen kann. Die Optimierung der Bilder gehört meiner Meinung nach zu einem der Fundamente der Performance-Optimierung des Frontends und daher sollte sie auch am Anfang des Prozesses angegangen werden.

Häufig wird aber dieses Fundament vernachlässigt und man kümmert sich zuerst um die Schritte die erst später kommen sollten, wie zum Beispiel der Auswahl des geeigneten Caching-Plugins oder man beschäftigt sich mit Maßnahmen, die meisten Websites kaum oder gar keine wirklichen Vorteile bringen, wie zum Beispiel welches CDN man nehmen sollte.

Um die Bilder zu optimieren bedarf es keinen teuren Tools. Klar, Photoshop & Co. leisten hervorragende Arbeit. Aber um weboptimierte Bilder zu bekommen, reichen auch Programme wie <a href="https://www.gimp.org">GIMP</a> völlig aus und auch kleinere Desktop-Programme wie zum Beispiel <a href="http://www.irfanview.de">IrfanView</a> oder webbasierte Tools wie <a href="https://tinypng.com">TinyPNG</a> oder <a href="https://imageoptim.com/api">ImageOptim</a> liefern gute Ergebnisse ab.

<h2>imho: Bildbearbeitung gehört zum redaktionellen Arbeitsablauf</h2>

Da an dieser Stelle häufig nach WordPress-Plugins gefragt wird, verlinke ich auf zwei die sich u.a. um die Komprimierung der Bilder kümmern: <a href="https://de.wordpress.org/plugins/optimus/">Optimus</a> und <a href="https://de.wordpress.org/plugins/wp-smushit/">WP Smushit</a>.

Ich selber nutze solche Plugins nicht, weil meiner Meinung nach die Bildbearbeitung – das Bild zuschneiden und komprimieren – zum redaktionellen Arbeitsablauf bzw. Workflow gehört. Daher sollte meiner Meinung nach der Autor auch über grundlegende Kenntnisse der Bildbearbeitung verfügen: den passenden Ausschnitt wählen, evtl. kleine Effekte hinzufügen und wenn man schon da ist, kann man auch das Bild für den Webeinsatz komprimieren bzw. abspeichern.

Dann ist es auch nicht mehr notwendig, dass man dafür zusätzliche Tools einbindet, die ggfl. Ressourcen des eigenen Servers in Anspruch nehmen.
 <hr />

<p>Aus <a href="https://www.perun.net/2017/06/07/wordpress-performance-verbessern-bilder-optimieren/">meinem Weblog</a> via <a href="https://wordpress.org/plugins/steempress/">SteemPress</a> publiziert.</p>