Inhaltsverzeichnis
Bilder geben langen Texten die nötige Aussagekraft. Sie untermalen, was wir schreiben und erklären das, wofür keine Worte finden. Nicht ohne Grund gibt es das Sprichwort: „Ein Bild sagt mehr als Tausend Worte“.
Das Problem an Bildern ist, dass sie ohne die nötigen Optimierungen nicht nur einiges an Speicherplatz fressen, sondern auch für Ladezeiteinbußen sorgen, was wiederum schlecht aus der Sicht von Google ist.
Aus diesem Grund habe ich mit diesem Beitrag eine kleine Anleitung geschrieben, wie man meiner Meinung nach mit Bildern umgehen sollte. Für Anregungen bin ich wie immer offen, also ab damit in die Kommentarsektion.
Das richtige Dateiformat
Die Wahl des Dateiformates hängt davon ab, was für ein Bild ihr nutzt und wofür es gedacht ist. Ich bin schon etwas in meinem Beitrag Mein Problem mit WordPress 5.8 und WebP darauf eingegangen.
Zuallererst sollten wir uns klarmachen, welche Dateiformate generell infrage kommen. Meiner Meinung nach wären das JPG, PNG oder WebP Dateien. Die Wahl welches Format du jetzt nutzen solltest, hängt wie oben beschrieben davon ab, was der Zweck des Bildes ist und was darauf abgebildet ist.
JPG Dateien sind perfekt für aussagekräftige Bilder, die keine Transparenz aufweisen und wenn man nicht groß komprimieren möchte. Solltet ihr geometrische Formen oder transparente Bereiche in den Bildern haben, so kann ich euch das PNG Format ans Herz legen, da JPG zum Beispiel keine Transparenz unterstützt.
WebP ist meiner Meinung nach eine Mischung aus JPG und PNG. Es erlaubt verlustfreie Komprimierung, unterstützt Transparenz und hat eine sehr gute Farbqualität. Allerdings gibt es was WebP betrifft (wie im weiter oben verlinkten Beitrag nachzulesen) noch einige Lücken bei der Unterstützung durch WordPress-Plugins.
Ich habe als Beispiel hier dasselbe Bild mit den Dateigrößen in 2 verschiedenen Formaten dargestellt. Wie man klar erkennen kann, gibt es visuell gesehen keine oder kaum Unterschiede. Allerdings ist die PNG Datei fast 6 Mal so groß wie die JPG Datei!
Die WebP Datei wäre hier zwar was Dateigröße betrifft gerade so ein Mittelding zwischen den beiden Bildern gewesen, allerdings würde sich das durch eine spätere Komprimierung wieder ausgleichen!
Aus diesem Grund kann ich euch nur empfehlen, dass ihr eure Beitragsbilder (Hero Image etc.) als komprimierte WebP Datei und die restlichen Bilder je nach Funktion als JPG- oder PNG Datei hochladet.
Komprimierung
Wie im Abschnitt zu den Dateiformaten angesprochen, kann man viel Speicherplatz einsparen, indem man die Bilder komprimiert. JPG Dateien haben im Gegensatz zu PNG- und WebP Dateien den Nachteil, dass sie nicht verlustfrei komprimieren können.
Das bedeutet, dass ihr je nach Komprimierungsgrad eine starke Reduzierung der Dateiqualität spüren werdet. Bei bereits 30 % der möglichen Komprimierung sind mir bereits kleine Unterschiede in den JPG Dateien aufgefallen. Kleine Stellen, die komplett unscharf sind oder nicht mehr richtig dargestellt werden.
Im Übrigen hat es die unkomprimierte WebP Variante des Bildes (504 KB groß) im komprimierten Zustand ohne Qualitätsverlust auf 60 KB geschafft! Du hast richtig gehört. 60 Kilobyte! Das bedeutet, dass die verlustfreie Komprimierung bei WebP 6 KB kleiner ist, als die verlustbehaftete bei JPG.
Eine Seite, die ich euch nur ans Herz legen kann ist Compressor.io! Dort könnt ihr bis zu 50 Dateien pro Tag in mehreren Stufen komprimieren. Die Seite besticht durch ein sehr cleanes und modernes Design und ist einfach zu bedienen.
Lazy Load
Um eine Website optimal darzustellen, lädt ein Browser die gesamte Website inklusive aller Ressourcen direkt beim Seitenaufruf herunter. Das betrifft auch Elemente der Website, welche sich nicht im sichtbaren Bereich der Website befinden.
Das bedeutet automatisch, dass über mobile Daten auf dem Smartphone mehr Datenvolumen verbraucht wird als nötig und der Seitenaufbau wesentlich länger braucht. Das macht gerade eine Seite mit vielen Bildern, Videos, iFrames oder ähnlichem besonders langsam.
Lazy Load ist eine Technologie, die genau diesem Problem entgegenwirken soll. Dadurch werden solche Elemente erst geladen, wenn sie in den sichtbaren Bereich des Nutzers – den Above the Fold Teil der Website – erreichen.
Inzwischen ist die Technik so weit, dass sämtliche Top-Browser Lazy Loading nativ unterstützen, sodass keine extra JS-Script geladen werden muss. Elemente können bequem über das Lazy-Attribut (loading="lazy") geladen werden. Hier ein Beispielcode für ein Bild.
<figure>
<img src="lazy-loading.webp" loading="lazy" alt="Das ist Lazy-Loading-Beispiel" title="Das ist ein Lazy-Loading-Beispiel">
<figcaption>
<p>Das ist ein Lazy-Loading-Beispiel.</p>
</figcaption>
</figure>Für WordPress geht das Ganze natürlich relativ einfach mit diversen Plugins. Empfehlen kann ich euch definitiv das Premium-Plugin Perfmatters*! Es kostet zwar ein bisschen Geld im Jahr, allerdings vollbringt es genau das was es soll, ohne viel Schickimicki!
Außerdem werdet ihr nirgendswo ein besseres Plugin finden, welches die Performance eures Blogs optimiert, da es noch viele weitere Einstellungen gibt. Dazu habe ich mit Optimierung der Performance dank Perfmatters im Übrigen auch ein extra Beitrag geschrieben.
Eine kostenfreie Alternative von Perfmatters wäre a3 Lazy Load. Ebenfalls ist diese Funktion in vielen kostenfreien Performance-Plugins integriert und selbst im Elementor Page Builder zu finden.
In Ordnern sortieren
Die Organisation deiner Assets ist eine sehr wichtige Sache. Gerade über lange Zeit sammelst du hunderte oder tausende Bilder auf deinem Server an. Gerade aus diesem Grund ist wichtig, dass du deine Bilder bestmöglich kategorisierst und in Ordnern sortierst.
Selbstverständlich meine ich damit auch auf deinem PC, allerdings geht es mir hierbei eher um die Organisation innerhalb deiner WordPress-Installation. Am besten gruppierst du deine Bilder in verschiedenen Ordnern.
Ich mache das selbstverständlich genauso, da ich so Bilder zur Wiederverwendung schneller finde. Sortieren tue ich nach Thumbnails, Thumbnails Social Media, Logos, Beitragsbildern und Sonstigen. Das Ganze sieht dann so bei mir aus.
Alles, was du dafür brauchst, ist ein Media Library oder File Manager Plugin für WordPress. Ich nutze dafür Mediabay*, welches du hier* für gerade einmal 14 Dollar erwerben kannst. Es besticht durch Drag-and-drop und ein sehr modernes Design.
Natürlich gibt es viele kostenfreie Alternativen wie FileBird, welche den gleichen Zweck ohne Probleme erfüllen. Meiner Meinung nach gehört ein solches Plugin einfach zu jedem Blog dazu. Dadurch gewährleistest du optimalen Workflow und suchst nicht Ewigkeiten nach einem Bild.
Title- & Alt Attribut
Alt und title Attribute sind wichtig für korrektes SEO und User-Usability, gleichzeitig aber sehr einfach zu verstehen und umzusetzen. Alt Attribute sind für einen alternativen Text verantwortlich, der angezeigt wird, sofern das Bild nicht korrekt geladen werden konnte.
Dies ist nicht nur für normale User eventuell wichtig zu wissen, sondern ist zum Beispiel für Screenreader und damit für sehbehinderte Menschen ein absolutes Muss, da diese Code interpretiert und vorgelesen werden kann. Dadurch gewährst du barrierefreien Zugang zu deiner Website.
Laut seo-kueche.de sollte die Länge des alternativen Textes die 40-80 Zeichen nicht überschreiten, damit die Darstellung für blinde Menschen auch übersichtlich bleibt.
Title Attribute sind genauso wie alternativer Text für SEO wichtig. Der dort angegebene Text wird angezeigt, sofern du mit deiner Maus auf dem Bild stehen bleibst. Einen Beispielcode für ein Bild mit alternativem Text und Title-Attribut füge ich direkt einmal mit ein.
<figure>
<img src="alt-title-attribut.webp" loading="lazy" alt="Das ist Beispiel für alt- und title Attribute." title="Das ist Beispiel für alt- und title Attribute.">
<figcaption>
<p>Das ist Beispiel für alt- und title Attribute.</p>
</figcaption>
</figure>Fazit
Zu einer optimierten Website gehören eben auch optimierte Bilder. Ein leider viel zu oft vergessener Bereich, welcher leicht in den Griff zu kriegen ist. Ich hoffe, ich konnte mit diesem Beitrag ein wenig die Zweifel und Fragen aus dem Weg räumen. Bis zum nächsten Mal – euer Maurice!
* Hinweis: Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.