Die schlechte Nachricht zuerst! Beim Hochladen von Bildern in WordPress kann man leicht Anfängerfehler machen. Die gute Nachricht: Wenn du weißt, wie Bilder im Web funktionieren, werden deine Bilder kristallklar sein und trotzdem mit kleinen Dateigrößen punkten. Klingt gut? Dann lies weiter!
Pixel, DPI und Retina: Bitte was?
Um eines klarzustellen: DPI (dots per inch) sind fürs Erstellen einer Website irrelevant. Die Einstellung hat keinen Einfluss darauf, wie Bilder angezeigt werden. Im Web verwenden wir Pixel – und genau auf die werden wir uns von nun an beziehen.
Fürs Exportieren gibt es eine einfache Regel: Ein Bild mit 500 Pixeln wird mit genau dieser Größe exportiert. Warum? Um die Datei nicht größer zu machen als nötig. Aber! Seit es Retina-Displays gibt, gilt allerdings eine neue, ebenso einfache Regel:
Exportbreite eines Bildes = 2 * Breite in der Designdatei
Warum, fragst du dich? Weil Geräte mit Retina-Displays mehr Informationen auf gleichem Raum darstellen. Die Informationen nehmen auf dem Bildschirm den gleichen Platz ein, erscheinen aber schärfer. Das Ergebnis: Die Pixel in HTML stehen nicht mehr auf allen Bildschirmen in einem Verhältnis von eins zu eins.
Für normale Bildschirme (1x): 1 Pixel Breite in HTML/CSS = 1 Pixel Breite auf dem Bildschirm
Für Retina-Displays (2x): 1 Pixel Breite in HTML/CSS = 2 Pixel Breite auf den Bildschirmen 500px in HTML und CSS nehmen auf normalen und auf Retina-Displays den gleichen Platz ein. Der Übergang vom iPhone 3 zum iPhone 4 veranschaulicht dies sehr schön.
iPhone 3 und 4 haben die gleichen Abmessungen – aber das iPhone 4 Display hat horizontal und vertikal doppelt so viele Pixel. Und dennoch: Ein Element mit einer statischen Pixeldefinition in HTML würde auf beiden Handydisplays denselben Platz einnehmen.
Exportieren von Bildern aus Figma für WordPress
Nachdem wir nun wissen, wie Pixel und Retina-Displays funktionieren, wollen wir herausfinden, wie wir die richtige Version eines Bildes aus einem Figma-Design exportieren. Figma bietet uns einige Optionen, aus denen wir beim Export von Assets wählen können. Wir können z.B. die Auflösung und den Dateityp wählen.
Wähle dein Element aus und exportiere die Assets aus einem Frame mit der maximalen Breite, die unterstützt werden soll. Wähle auf der Grundlage des zuvor Gelernten und der Art des zu exportierenden Assets die folgenden Einstellungen:
- Bilder/Fotos mit transparentem Hintergrund: png @2x
- Bilder/Fotos ohne transparenten Hintergrund: jpg @2x
- Grafiken/Illustrationen: svg (da svgs vektorbasiert sind, ist keine Auswahl für die Auflösung möglich)
Tipp: Checke vor dem Exportieren die Vorschau in Figma, um sicher zu sein, dass du die richtige Gruppe oder das richtige Element ausgewählt hast. Wenn ein Bild den Frame überschreitet, wird es am Rand beschnitten. Wenn du das nicht willst, klicke auf den Rahmen und deaktiviere die Option „Clip content“.
Wie WordPress mit Bildern arbeitet
Okay, jetzt haben wir alle Dateien, die wir brauchen. Wie geht es nun weiter? Ganz einfach – wir fügen sie unserem WordPress-System hinzu. Lass uns schauen, wie WordPress mit Bildern arbeitet.
WordPress 4.4 hat responsive Bilder eingeführt. Für jedes hochgeladene Bild erzeugt WP mehrere Versionen und erstellt ein „srcset“- und ein „sizes“-Attribut. Abhängig von der Breite des Viewports des Benutzers lädt WP dann die entsprechende Bildgröße. Der von WordPress generierte Code sieht so aus:
Diese Automatisierung hilft oft beim Laden kleinerer Bilder, aber sie ist nicht perfekt. Das liegt daran, dass WP manchmal das Layout und die gerenderte Breite eines Bildes im Verhältnis zum Bildschirm nicht erkennt.
Wenn du Bilder in die WP-Medienbibliothek hochlädst, solltest du diese wichtigen SEO-Faktoren beachten:
- Benenne das Bild aussagekräftig! Verwende Kleinbuchstaben und trenne Wörter mit einem Bindestrich, z. B. mann-mit-hammer.jpg. Am besten ist es, wenn die Bilder bereits in der Figma-Datei entsprechend benannt wurden.
- Füge ein alt-Attribut hinzu. Auch hier beschreibst du den Inhalt des Bildes in einer für Menschen lesbaren Form. Zum Beispiel: „Große blaue Banane am Strand“.
Automatisierte Komprimierung und WebP
Der Export von Bildern aus Figma erzeugt svg-, png- und jpg-Dateien. Du kannst bei der Bildgröße schon viel sparen, wenn du die Dateien in den richtigen Dimensionen exportierst – aber es gibt noch mehr Möglichkeiten.
Googles Bildformat WebP ermöglicht z.B. eine wahlweise verlustfreie oder verlustbehaftete Komprimierung. Das spart bei jpg bis zu 34 % Dateigröße ohne Qualitätsverlust. WebP ist auch mit transparenten Hintergründen kompatibel und reduziert die Größe von png-Dateien um bis zu 70 %. Das ist verdammt viel!
Eine ausführliche Erklärung zum Komprimieren findest du in den Google Dev Docs.
Müssen wir also alle unsere Assets manuell in WebP umwandeln? Zum Glück nicht! Diese Plugins helfen uns dabei:
- Smush – Lazy Load Images, Optimize & Compress Images (für die WebP-Kompression benötigen Sie das Pro-Plugin)
- WebP Express (kostenlos, funktioniert bei mir sehr gut)
- Converter for Media – WebP und AVIF konvertieren & Bilder optimieren | Bildoptimierung erleichtern
Diese Plugins wandeln normale Bilder automatisiert in WebP-Bilder um und zeigen den Benutzern die optimierte Version an. Wenn du diese Plugins verwenden willst, dann überprüfe vorher, ob dein Server die erforderlichen Bildkompressionsmodule unterstützt und die .htaccess-Datei schreibbar ist. Hört sich kompliziert an? Keine Sorge, auf Google findest du zahlreiche Anleitungen zur Installation und Fehlerbehebung.
Lazy Loading = smartes Laden
Beim Lazy Loading werden Bilder erst dann geladen, wenn der User an die Stelle mit den Bildern scrollt – und nicht schon, wenn die Seite zum ersten Mal geöffnet wird. Das erhöht die Geschwindigkeit der Seite und sorgt für ein reibungsloses Nutzererlebnis. Mit WordPress 5.5 wurde allen Bildern das HTML5-Ladeattribut hinzugefügt. Das ermöglicht Browsern ihre eigene Lazy-Loading-Technologie zu nutzen. Viele Browser unterstützen diese Funktion bereits (bei ca. 75 % aller Nutzer).
Für Kompatibilität mit noch mehr Browsern nutze Plugins wie Smush oder WP Rocket. Diese Plug-ins ermöglichen Lazy Loading auch für Medientypen wie Videos. Wenn du eine nicht-native Variante nutzt (also ein Plugin), empfehlen wir, die gesamte Seite gründlich zu überprüfen, da manchmal Inkompatibilitäten auftreten können. Bestimmte Bilder müssen möglicherweise vom Lazy Loading ausgeschlossen werden.
Testen der Implementierung
Die Google Dev Tools eignen sich hervorragend zum Testen deiner Bildimplementierung. Öffne sie durch Drücken von CMD/Strg+Umschalt+C. Auf der Registerkarte „Netzwerk“ siehst du alle geladenen Dateien und ihre Formate.
Klicke auf auf ein Bildelement in der Registerkarte „Elemente“ und du siehst sowohl die intrinsische als auch die gerenderte Größe.
Die intrinsische Breite und Höhe sollten das Doppelte der gerenderten Größe betragen. Bei geringeren Viewport-Breiten wird das aufgrund des bereits erläuterten Problems möglicherweise nicht genau eingehalten (Problem: WordPress erkennt das Layout nicht und die Anzahl der erstellten Versionen pro Bild ist begrenzt).
Nutze unser Skript, um Bilder mit schlechter Größe zu finden
Wir haben ein kleines Skript programmiert, das Bilder mit schlechter Größe markiert Füge es einfach während der Entwicklung vor dem< /body>-Tag deiner Seite ein. So, das war’s für heute, liebe Leute! Wenn dir das alles zu kompliziert erscheint, denke daran: Wir bieten auch Beratungen und IT-Support! Schreib uns einfach unter info@jut-so.de
