In diesem Guide zeige ich dir wie du perfekt optimierte Bilder für deine WordPress Seite erstellst. Reize die Vorteile von optimierten Bilder wie bessere Usability und höherer Page Score in Messtools voll aus! By the way: Google liebt Bilder mit den richtigen SEO-Tags versehen. Aber der Reihe …
Basics
Welche Bildgröße benötige ich und was sind die gängigsten Bildgrößen?
Im Vorfeld sollte man sich fragen welche Bildgrößen benötige ich überhaupt? Aufschluss darüber gibt dir die Breite deines Blogs. Wieviel Spalten möchte ich nutzen für Übersichtsseiten, soll auf dem Desktop die komplette Breite genutzt werden?
Ich empfehle die Bilder immer in gleichen Dimensionen bereit zu stellen. Z. b. 16:9, 4:3 oder 3:2. Durch die konsistente Bildverhältnis wirkt die Darstellung der Bilder harmonisch und ist gut für die Usability.
Demnach empfehle ich dir folgende Pixelbreiten bei Webbildern:
Höhe ergibt sich aus dem Verhältnis
- 360 px für mobile oder Teaser im Raster
- 720 – 960px Tablet
- 1280 px für Desktop
- 1920 px für Bilder über die ganze Breite am Desktop
Wie finde ich heraus, welche Bildgröße ich benötige?
Sieh dir an wie breit deine Bilder auf unterschiedlichen Geräten ausgegeben werden. Mobil, Desktop Tablet. Anhand dem weißt du welche Größen du benötigst. Hierzu hilft dir auch in Chrome die Entwicklertools. Lege das Bild in der größten Pixelbreite an, die du benötigst. Z.b. die Bilder auf deiner Seite sind maximal 1280 Pixel breit und du wählst ein Verhältnis von 4:3 dann lege deine Bild später mit 1280 Pixel x 960px an. Wie wir zu den den richtigen Formaten für alle Ausgabegeräte kommst zeige ich dir in der Bildoptimierung für Web Core Vitals.
Die richtigen Dateiformate – JPG, PNG, SVG oder sogar webP?
Was ist JPG?
JPG Dateien sind komprimierte Bilddateien und wohl das meistbenutzte Bildformat im Web. Dieser Dateityp eignet sich für die meisten Bilder und Fotos. Der Vorteil von JPG Dateien ist dass sie sich hervorragend komprimieren und je nach gewünschten Qualitätsanspruch speichern lassen.
Was ist PNG?
Auch dieses Format sieht man sehr häufig. Der Einsatzzweck von PNGs ist vorwiegend für Grafiken oder Bilder die freigestellt sind um auf farbigen Hintergrund platziert werden zu können. Letzteres ist auch der große Vorteil gegenüber JPG Dateien. Die Dateigröße der Bilder ist allerdings in der Regel viel mehr als bei JPG. Mit dem PNG Format lassen sich auch Logos und Illustrationen in besserer Qualität darstellen als JPG Dateien.
Was ist SVG?
SVG Bilder sind Vektorgrafiken und lassen sich im Gegensatz zu anderen Bildformaten verlustfrei wiedergeben. Der Einsatzzweck von SVG ist sehr vielfältig. Z.b. Logos, Grafiken, Animationen und Icons lassen sich damit verlustfrei erstellen. SVG-Dateien lassen sich auch ohne Probleme ohne Qualitätsverlust skalieren.
SVGs lassen sich aus Sicherheitsgründen nicht von Haus aus in WordPress hochladen. Das liegt daran dass mit SVGs Sicherheitslücken entstehen können. Wenn du die SVG Datei aber selber erstellt hast oder von einer sicheren Quelle hast, brauchst du keine Bedenken zu haben. Um ein SVG hochzuladen brauchst du ein Plugin wie das kostenlose Save SVG.
webP
Wikipedia schreibt dazu: „WebP ist ein Grafikformat für verlustbehaftete oder verlustfreie Bildkompression für statische oder animierte Bilder.“
Das sogenannte Nextgen webP Bildormat wird dir spätestens bei der Web Core Vitals Optimierung begegnen. Mehr Infos dazu findest du hier.
Bildoptimierung vor Upload
Der klassische Weg um ein Foto weboptimiert zu speichern ist in der Regel mit einem Programm wie Photoshop. Das besitzt die Funktion „Für Web speichern“. Damit lässt sich sehr einfach ein Foto skalieren, optimieren bzw. komprimieren. Bei einem, zwei oder ein paar mehr Fotos ist das kein Problem. Aber wenn man mehr Bilder auf einmal optimieren möchte könnte man es noch umständlich über eine Aktionsabfolge machen.
Einfacher ist es allerdings mit einer der folgenden meist kostenlosen Onlinetools:
Bulk Image Resizer
Ein sehr leicht und einfaches zu bedienendes Onlinetool das sehr gute Ergebnisse liefert. Es können bis zu 20 Bilder auf einmal komprimiert werden. Meine Empfehlung querformatige Bilder nicht mit hochformatigen Bildern auf einmal komprimieren da sonst die Abmessungen nicht ideal sind.
iloveImg
Ein sehr einfaches Onlinetool mit ziemlich vielen Optimierungsmöglichkeiten wie z.b.: Komprimieren, Skalieren, Zuschneiden, Konvertieren, Editieren, …
Für die einfache schnelle gute Bildoptimierung empfehle ich ersteres. Hier gehts zu den Plattformen:
Bildkomprimierung
Lossy vs Glossy vs Lossless
Bei digitalen Bildkomprimierungen liest man meistens von zwei bzw. drei Formate die zur Auswahl stehen. Abhängig von Software, Tool oder Plugin haben diesen Abweichende Namen.
In der Regel sind es diese drei Arten:
- Lossy – verlustbehaftete Komprimierung:
Hier soll das Bild die kleinstmögliche Dateigröße haben. Der Fokus liegt nicht mehr auf die Qualität der Bilder sondern auf die schnelle Ausgabe. Diese Komprimierung empfehlt sich bei Projekten wo die Bilder nicht entscheidend für den Verkauf oder die Conversion ist. Diese Komprimierung kann aber für sehr viele Seiten gut sein da die aktuellen Tools sehr gute Ergebnisse liefern dass man den Qualitätsverlust gar nicht so einfach bemerkt. - Glossy: Dieses Format ist meiner Meinung nach für die meisten Webprojekte ideal. Man braucht sich die Bilder nicht im Einzelnen ansehen, die Dateimenge wird sehr gut reduziert und die Artefake die bei der Komprimierung entstehen sind selten sichtbar.
- Lossless – verlustfreie Komprimierung: Dieses Format reduziert die Dateigröße immer noch gut. Die Qualität ist allerdings besser als bei den vorher beschriebenen Arten. Meiner Meinung nach macht es nur Sinn bei Seiten wo hochauflösende Bilder zur Kauf- oder Leadentscheidung helfen. Z.b. bei Fotografen, Shops wo man sich Artikel nah zoomen kann und die Qualität einfach über Kauf entscheidet.
Shortpixel * hat dazu auf deren Onlineseite eine tolle Vorer-/Nachhervorschau Möglichkeit.
Bildoptimierung beim Upload
Mittels Plugins lassen sich Bilder auch währende dem Upload bzw. auch nachträglich komprimieren.
Vorteile
- Weniger Aufwand da du einfach die Bilder komplett in die Mediathek ziehen kannst.
- Du kannst nachträglich nochmals die Qualität anpassen, für jedes Bild einzeln oder alle zu gleich.
- Spart sehr viel Bearbeitungszeit
Nachteile
- Auf Shared Hosting oder langsamen Servern braucht es recht viel Rechenleistung der Servern
- Gute Einstellung des Plugins wichtig um Serverplatz zu sparen
- Bilderupload dauert länger da die Kompromierung direkt beim Upload vorgenommen wird (lässt sich einigen Plugins deaktiveren.)
Bilder nachträglich mit Plugins optimieren
Plugins für Bildkomprimierung
Robins Image Optimizer – kostenlos
Meiner Meinung nach eins der besten Plugins für die Bildkomprimierung in WordPress. Zum einen liefert es Top-Qualität und hat in der kostenlosen Version bereits eineingeschränkte Anzahl von Bildern. Zudem bietet es völlige Kontrolle über die Bildkomprimierung. Ebenso hast du die Auswahl zwischen den 3 bekannten Qualitätsarten und kannst Sie nachträglich auch nochmals ändern. Im Bulkverfahren oder auch jedes Bild einzeln.
Da die kostenlose Version völlig reicht und ähnliche Ergebnisse liefert wie kostenpflichtigen ist das Plugin absolut meine Empfehlung
Shortpixel Image Optimizer – zum Teil kostenlos
ShortPixel Optimizer ist ein nützliches WordPress Plugin zur Bildkomprimierung. Shortpixel bietet alles was es für eine gute Bildoptimierung benötigt: sehr hohe Komprimierungsraten, webP-Format, Lossy und Glossy Format sowie einfache Handhabung. 100 Bilder sind im Monat sogar kostenlos.
WP Compress – kostenpflichtig
Ein Plugin das ich erst seit kurzem entdeckt habe. Schöne einfache Oberfläche, hervorragende Leistung und einfache Handhabung.
Imagify
Imagify ist vom gleichen Plugin Hersteller wie WP-Rocket. Hat die ähnlichen Leistungen wie Shortpixel. Ist ebenfalls einfach zu bedienen und liefert super Ergebnisse.
Wenn ich Preis/Leistung und Qualität bei diesen Plugins vergleiche ist für mich persönlich Shortpixel das Beste. Sofern du webP mit einem anderen Plugin auslieferst empfehle ich dir aus kostengründen Robins Image Optimizer. Ansonsten probiert alle aus, benutzt das Plugin mit der Oberfläche wo ihr euch wohlfühlt.
Web Core Vitals
Wenn du diesen Guide hier sorgfältig durcharbeitest und anwendest wird es nur noch wenige offene Punkte bei der Web Core Vitals Optimierung geben. Eine davon wird womöglich folgende sein:
NextGen Bildformat webP
Das Bereitstellen von Bildern im NextGen Format bedeutet, dass du deine Bilder in webP konvertieren musst. Die oben genannten kostenpflichtigen Plugins können dies für dich erledigen. Oder ein sehr einfaches Plugin dazu ist webP Express.
Der Vorteil von dem Format ist dass es die Dateigröße des Bildes nochmals verkleinert. Wird allerdings noch nicht von jedem Browser unterstützt.
Defer offscreen images
Das bedeutet dass die Bilder die nicht „Above the fold“ angezeigt werden nicht sofort geladen werden sondern später nachgeladen.
Lazyload wurde zwar in WordPress 5.5 integriert allerdings benutze ich die Funktion bis dato dennoch im Caching Plugin da „Above the Folder“ Bilder wie Logo, Hero-Image, etc. vom Lazyloading ausgeschlossen werden sollten. Die meisten Lazyload-Fehler treten demnach noch auf, wenn Hintergrundbilder mit CSS eingebunden werden (background-image).
Wie auch diese Bilder nachgeladen werden können kannst du hier nachlesen. Ist allerdings etwas komplex.
Richtige Bildabmessungen – Adaptive Bilder ausgeben
Hier kann ich das Plugin von Shortpixel Adaptive Images empfehlen.
Bilder SEO
Richtige Dateinamen für Bilder SEO
Der SEO-Aspekt bei der Bildoptimierung ist ein nicht zu vernachlässigender Punkt. Zudem ist er recht einfach umzusetzen. Deshalb lass dir dieses Potential keinesfalls entgeht.
Die wichtigsten Punkte dabei sind:
- Alt-Tags (Alternativ-Texts): Dieser Tag ist nützlich um der Suchmaschine zu helfen zu verstehen was das Bild zeigt und in der Suche ausgibt. Nutze hier das Mainkeyword am Anfang.
- Dateinamen: Bilder sollten vor dem Upload schon richtig benannt werden und das Focuskeyword enthalten. Nachträglich kannst du den Dateinamen einfach mit dem Plugin „Renamer“ ändern. Solltest du den Bildnamen nach dem Einbau in einer Seite ändern kontrolliere sicherheitshalber ob das Bild richtig dargestellt wird. Ich empfehle
- Bildbeschreibung und Beschriftung: Google ist eine KI deshalb unterstütze Google dabei dein Bild „lesen“ und kennen zu lernen.
- Optimiert: Schnell geladen und optimiert wie in diesem Beitrag geschrieben.
Warum schreib ich diesen Blog?