Ich muss zugeben, auf diese Lektion bin ich etwas stolz:
Dieses System zur komplett automatisierten Bilder Optimierung habe ich noch nirgends so gesehen.
Ja, es gibt viele Tipps und Tools (eines davon ist auch ein Teil dieses Systems) welche dieses Thema abdecken.
Aber mein komplettes System hier ist einzigartig und wirklich elegant.
Schauen wir uns aber zuerst an, warum das Thema so wichtig ist:
Bilder sind mit Abstand das Grösste (also bezüglich Dateigrösse/Datenvolumen) einer Website.
Videos jetzt einmal ausgenommen. Aber diese werden sowieso vorzu beim Schauen übertragen (im Gegensatz zu Bildern, die beim Anzeigen direkt komplett übertragen werden müssen). Deswegen müssen wir uns dank YouTube nicht gross Gedanken um Videos machen.
Das heisst:
Wenn Du zu grosse und nicht optimierte Bilder verwendest, kann das Deine ganze Website ausbremsen (was weder Besucher noch Google glücklich macht und den ganzen Fokus auf Performance in diesem Kurs wieder zunichte machen würde).
Aber keine Sorge, mein System wird das am Schluss dann kinderleicht machen.
Schauen wir uns das Ganze aber zuerst einmal genauer an:
Problem #1: Die Bilder Grössen im Web
Zur Erinnerung: Die Grösse von Bildern wird anhand von Pixeln angegeben. Ein Pixel ist ein einzelner Bildpunkt auf einem Bildschirm.
Sowohl Digitalkameras als auch Smartphones haben heutzutage eine so gute Auflösung, dass sie Bilder produzieren, die für die Darstellung im Web viel zu gross sind.
Die heute z.B. weit verbreiteten 12 Megapixel Kameras (inkl. Smartphone Kameras) produzieren Bilder mit 4256×2848 Pixel (= Breite x Höhe des Bildes).
Aber:
Die am weitesten verbreitete und grösste Auflösung bei Bildschirmen ist „nur“ 1920×1080 Pixel (also das bekannte „Full HD“).
Falls Du es genauer wissen willst: Hier kannst Du Dir Statistiken zu den in der Schweiz genutzten Auflösungen ansehen (oder zu jedem beliebigen anderen Land).
Damit ist also ein normales Foto bereits mehr als doppelt so gross, als die von uns maximal benötigte Auflösung für das Web (1920×1080 Pixel).
Dazu kommt: Wenn sich die Grösse eines Bildes verdoppelt, dann vervierfacht sich die Dateigrösse des Bildes. Die Dateigrösse wächst also exponentiell.
Würden wir also Originalbilder direkt ab Kamera verwenden (und dieser Fehler passiert doch recht häufig), dann muss ein Besucher 4-5 Megabyte pro Bild herunterladen, anstatt ca. 2-300 Kilobyte (also 15-20 mal so viel Daten).
Wenn wir jetzt unsere Bilder auf die 1920×1080 Pixel Auflösung verkleinern, decken wir 95%+ aller Besucher perfekt ab.
Und für die wenigen Besucher mit der etwas grösseren exotischen 2560×1440 Pixel Auflösung werden bildschirmbreite Bilder (also typischerweise das Titel-Hintergrundbild) einfach automatisch etwas hochskaliert, was aber nur einen minimalen Qualitätsverlust des Bildes bedeutet.
Problem #2: Smartphones & Responsive Webdesign
Das zweite Problem ist:
Während auf dem Desktop/Laptop das Titelbild tatsächlich 1920 Pixel breit sein kann, ist der Bildschirm auf dem Smartphone natürlich deutlich kleiner (die verbreitetste Smartphone Auflösung ist 375×667 Pixel).
Obwohl das 1920×1080 Pixel grosse Bild im Browser einfach auf die tatsächliche Grösse herunterskaliert wird (dank unserem Responsive Webdesign), muss im Hintergrund trotzdem das Originalbild heruntergeladen werden. Und das ist natürlich eine grosse Verschwendung von Bandbreite (speziell bei Smartphones, die ja nicht immer eine schnelle WLAN oder 4G/5G Verbindung haben).
Das heisst konkret, anstatt unserem optimierten 2-300 Kilobyte Bild, würde ein viel kleineres 30-50 Kilobyte Bild ausreichen (nicht ganz so dramatisch wie das Original Kamerabild, aber doch 5-10 mal so gross als eigentlich benötigt).
Wir brauchen also nicht nur ein optimiertes Bild, sondern das gleiche Bild in verschiedenen Grössen, passend für die verschiedenen Bildschirmgrössen unserer Website Besucher (also Desktop/Laptop, Tablet und Smartphone).
Diese Arbeit nimmt uns aber WordPress zum Glück ab:
Die WordPress Bilder Generierung kurz erklärt
Wenn Du ein Bild auf Deine WordPress Website hochlädst, erstellt WordPress im Hintergrund automatisch verschiedene Versionen in verschiedenen Grössen davon.
WordPress schneidet das hochgeladene Bild automatisch auf folgende Grenzwerte für die einzelnen Versionen zurecht:
- Vollständige Grösse: Maximal 1920 Pixel breit oder 1440 Pixel hoch.
- Gross: Maximal 1200 Pixel breit oder 1000 Pixel hoch.
- Mittel-Gross: Maximal 768 Pixel breit.
- Mittel: Maximal 500 Pixel breit.
- Vorschaubild: Maximal 150 Pixel breit und 150 Pixel Pixel hoch.
Das Vorschaubild ist die einzige Version, bei der das hochgeladene Bild tatsächlich quadratisch zugeschnitten wird. Bei allen anderen Bildern bleibt das Grössenverhältnis genau gleich (und wird also nichts vom Bildinhalt abgeschnitten).
Achtung: Diese „Mittelgross“ Einstellung ist eigentlich einfach die „Mittel“ Grösse mit 500 Pixel Breite. Die 768 Pixel breite „Mittel-Gross“ Grösse wird von WordPress intern automatisch erstellt und kann hier nicht konfiguriert werden.
Hinweis: In der Standard Konfiguration nutzt WordPress andere Werte, die nicht so sinnvoll sind. Ausserdem ist die „Mittel-Gross“ Grösse standardmässig gar nicht im Editor verfügbar. In Deinem Duplicator Paket ist das aber natürlich bereits alles korrekt eingestellt und optimiert.
Die Grenzwerte sehen vielleicht etwas willkürlich aus (speziell die für die Höhe), weshalb ich es hier genauer erkläre:
- „Vollständige Grösse“ & „Gross“: Da die meisten Bildschirme im Querformat sind, müssen Bilder im Hochformat nicht so gross sein. Mit 1000 Pixel Höhe kann das Bild im Hochformat in dieser Version nämlich immer noch auf 95%+ der Bildschirme in maximaler Grösse („Full Screen“) angezeigt werden, ohne scrollen zu müssen.
- „Mittel-Gross“ & „Mittel“: Für diese beiden Grössen ist das Ziel, dass das Bild im Hochformat trotzdem die angegebene Breite von 768 bzw. 500 Pixel erreicht, weil wir genau diese Breite im Layout brauchen (wenn z.B. der Text das Bild umfliessen soll). Mit der Einstellung „0“ sagen wir WordPress, es soll die Höhe des hochgeladenen Bildes nicht beschränken.
Beispiel Querformat:
Ein Querformat Bild von einer 12 Megapixel Kamera (4256×2848 Pixel) hast Du also in folgenden Grössen auf Deiner Website:
- Vollständige Grösse: 1920x1284 Pixel
- Gross: 1200x803 Pixel
- Mittel-Gross: 768x514 Pixel
- Mittel: 500x334 Pixel
- Vorschaubild: 150x150 Pixel
Beispiel Hochformat:
Ein Hochformat Bild von einer 12 Megapixel Kamera (2848×4256 Pixel) hast Du also in folgenden Grössen auf Deiner Website:
- Vollständige Grösse: 810x1440 Pixel
- Gross: 669x1000 Pixel
- Mittel-Gross: 768x1147 (ja, im Hochformat kann das „Mittel-Gross“ etwas grösser sein als „Gross“)
- Mittel: 500x747
- Vorschaubild: 150x150 Pixel
Problem #3: Bilder für das Web optimieren (= komprimieren)
Es gibt Komprimierungstools, welche die Dateigrösse von Bildern um bis zu 60-70% reduzieren können (mit von Auge minimalen bis praktisch nicht erkennbaren Qualitätseinbussen).
Das ist das, was man in Bildbearbeitungsprogrammen wie Photoshop oder GIMP manuell machen müsste (also „Für das Web speichern…“).
In Photoshop müsstest Du die genaue Qualitätsstufe für jedes Bild einzeln auswählen:
Das Problem dabei: Je nach Foto ist die ideale Qualitätsstufe (also bei der man die optimale Komprimierung ohne von Auge sichtbarem Qualitätsverlust hat) ziemlich unterschiedlich und kann irgendwo zwischen 60-90% liegen.
Deshalb gibt es Dienste wie z.B. Optimizilla, die automatisch die optimale Qualitätsstufe berechnen.
Wir werden diese Komprimierung aber direkt in unserer WordPress Website haben. Ohne Photoshop und ohne mühsames Hoch- und wieder herunterladen via Dritt-Website.
Noch einmal zusammengefasst:
Die Optimierung von Bildern für das Web umfasst also 3 Schritte:
- Das Zuschneiden des Original-Bildes auf die passende Grösse/Dimension in Pixel (wie erklärt auf die 1920×1080 Pixel).
- Die Bilder je nach Bildschirmgrösse in der richtigen Grösse an den Browser liefern.
- Die Komprimierung der Dateigrösse/Qualität.
Punkt 2 wird von WordPress wie erklärt für Dich gemacht (wobei wir das manuell optimiert haben).
Punkt 1+3 musst Du noch kurz auf Deiner WordPress Website fertig einrichten:
Die automatische Bilder Optimierung auf Deiner WordPress Website einrichten
Was Du jetzt noch machen musst, ist ShortPixel zu installieren und einrichten (da ShortPixel ein eigenes Konto braucht, konnte ich das nicht bereits im Duplicator Paket für Dich bereitstellen und einrichten).
ShortPixel schneidet unsere hochgeladenen Bilder auf die optimale „Vollständige Grösse“ zurecht und komprimiert gleichzeitig alle Versionen/Grössen der Bilder.
Hier die Schritt für Schritt Anleitung:
1. ShortPixel Konto erstellen und API-Key kopieren
Gehe auf die Website von ShortPixel und erstelle ein neues (gratis) Konto:
Du erhältst ein Mail mit einem sogenannten API-Key (und dem Passwort für Dein ShortPixel Konto). Diesen API-Key musst Du kopieren (Du brauchst diesen gleich beim Einrichten vom Plugin in WordPress selbst):
Hinweis: Das ShortPixel Konto ist gratis. Leider lassen sich nur 100 Bilder pro Monat gratis optimieren. Wobei das entspricht in Realität nur 20 Bildern pro Monat: Die verschiedenen Bildergrössen die von WordPress generiert werden, zählen jeweils separat (also pro Bild 5 Versionen).
Diese 20 Bilder pro Monat sollten aber für die meisten Websites problemlos ausreichen.
Und sonst empfehle ich wirklich einfach einmalig die 10$ zu investieren, für ein Guthaben von 10’000 Bild-Optimierungen (das nicht verfällt und Dir wahrscheinlich die nächsten paar Jahre reichen wird).
Übrigens, Du darfst das gleiche ShortPixel Konto (und API-Key) auf mehreren Websites verwenden. Sehr praktisch wenn Du mehrere Websites hast oder für Kunden betreust.
Womit wir zum nächsten Schritt kommen:
2. ShortPixel Plugin in WordPress installieren
Du kannst einfach nach „shortpixel“ suchen und findest so das Plugin, dass Du installieren und dann aktivieren kannst:
Nach der Installation wirst Du gleich auf die Konfigurationsseite weitergeleitet:
3. ShortPixel Konfiguration
Als erstes musst Du Deinen vorher kopierten API-Key einfügen:
Dann musst Du ShortPixel wie folgt konfigurieren:
- „Komprimierungsart“: Standardmässig ist „Lossy“ ausgewählt, was für die meisten Websites ideal ist. Falls die Bilder auf Deiner Website das Wichtigste sind oder Du wirklich auf gestochen scharfe Bilder angewiesen bist (z.B. als Fotograf, oder wenn man bei einem Produktbild in die Details zoomen können muss), kannst Du hier auf „Glossy“ wechseln. In diesem Modus werden die Fotos weniger stark optimiert, bleiben dementsprechend natürlich auch spürbar, aber immer noch vertretbar grösser (im Bereich von 30-50% grösser).
- „Große Bilder verkleinern“: Hier ist wichtig, dass Du diese Option aktivierst, die korrekten Pixelgrössen (1920×1440 Pixel) wie im Bild unten gezeigt einträgst und die Zuschneidungsart „Contain“ auswählst.
Die restlichen Punkte müssten standardmässig bereits aktiviert sein. Dann kannst Du die Änderungen speichern:
Fertig! Ab sofort werden alle Bilder beim Hochladen automatisch optimiert!
Wie Du jetzt in WordPress die Bilder richtig verwendest
Das war jetzt eine lange, aber wichtige Lektion.
Das einzige was Du jetzt beachten musst, ist welche Grösse Du von einem Bild verwenden willst.
Das funktioniert ganz einfach: Wenn Du ein Bild im Gutenberg Editor eingefügt hast, hast Du auf der rechten Seite die verschiedenen Bildgrössen zur Auswahl:
Hier welche Grösse Du wo nutzen solltest:
Vollständige Grösse (1920 Pixel breit): Diese verwendest Du, wenn ein Bild über die ganze Bildschirmbreite gehen soll, wie z.B. das Titelbild:
Gross (1200 Pixel breit): Diese verwendest Du, wenn das Bild über die Inhaltsbreite gehen soll (also breiter als der Text, so breit wie der Seitentitel oder das Logo und Menü):
Mittel-Gross (768 Pixel breit): Diese verwendest Du, wenn das Bild über die Textbreite gehen soll.
Mittel (500 Pixel breit): Diese verwendest Du, wenn Du das Bild links- oder rechtsbündig ausrichtest, damit der Text darum herum fliesst:
Oder Du z.B. 2 oder mehr Spalten verwendest:
Vorschaubild (150 Pixel breit): Diese Grösse brauchst Du im Normalfall nur für Dein Profil-/Autorenbild und das Foto bei den Testimonials/Kundenfeedbacks:
Wichtig: Du musst Dir dabei keine Gedanken um die Smartphone Version machen.
Du fügst das Bild also in der Grösse ein, die Du auf der grossen Desktop Version brauchst.WordPress fügt die Bilder dabei automatisch so ein, dass der Browser das Bild dann in der richtigen Grösse herunterladen kann, die er braucht.
Diese Funktion zu erklären würde jetzt aber zu technisch werden. Wen es genauer interessiert, findet hier oder hier mehr Informationen (das Stichwort ist „srcset“).