Der Pagespeed fällt bei vielen Webseiten für mobile Geräte oft viel schlechter aus als in der Desktop-Variante. Das kann mehrere Gründe haben. Ein wesentlicher Punkt, den man gerne außer Acht lässt, aber die Performance der Webseite auf mobilen Geräten enorm steigern kann, ist die Optimierung der Bilder für kleinere Bildschirmgrößen.
Weiterlesen: Mobile Pagespeed verbessern – Bilder für mobile Größen optimieren (Elementor Tutorial)Schau dir dazu gerne mein Video an. Da erkläre ich das Ganze auch nochmal mit Beispielen – ansonsten geht’s unter dem Video weiter 😉
https://www.youtube.com/watch?v=f8RrScsExk8
Maximalgröße für Bilder
Generell – egal für welche Bildschirmgröße – gilt die folgende Regel: Lade deine Bilder immer nur in der Größe hoch, wie du sie auch am Bildschirm verwendest.
Wenn du also ein Bild in deine Webseite einbaust, das immer nur maximal 700px breit ist, dann macht es keinen Sinn, ein Foto hochzuladen, welches eine Breite von 3000px hat. Denn so lädt man unnötig das große Foto, um es dann kleiner dargestellt angezeigt zu bekommen.
Bilder verkleinern und komprimieren
Bevor du dein Bild hochlädst, solltest du es also verkleinern. Das kann man über verschiedene Programme wie Photoshop oder bei Mac die „Vorschau“ machen. Alternativ kannst du auch online-Tools verwenden, mit denen du die Größe verkleinern kannst.
Abgesehen von der optischen Größe, kann man Bilder auch komprimieren lassen bzw. bestimmte Dateiinfos entfernen lassen, die in der Bilddatei stecken (zB. EXIF-Daten, Informationen, so wie sie von der Fotokamera kommen).
Ein empfehlenswertes Tool ist hierfür www.tinyjpg.com – dort lädt man seine Bilder hoch und bekommt sie in kleinerer Dateigröße zum Download zurück. TinyJpg bietet auch ein WordPress Plugin an, welches die Komprimierung bei Upload vornimmt.
Unterschiedliche Bilder für unterschiedliche Bildgrößen
Nun kommen wir zum Wichtigsten Teil der Optimierung. Oft werden Fotos in eine Webseite geladen und die selben Fotos werden dann verkleinert auch auf mobilen Geräten angezeigt. Das Problem ist dabei, dass diese Bilder die selbe Dateigröße haben, egal ob sie kleiner oder größer dargestellt werden. Daher sollten für mobile Geräte kleinere Fotos hochgeladen werden.
Oft wird das querformatige Bild auf mobilen Geräten einfach links und rechts beschnitten, so dass man nur den Ausschnitt des Bildes sehen kann – wozu dann das ganze Bild mit dem Teil rechts und links laden, den man dort ohnehin nicht sieht? Also kann man in dem Fall dann ein separates Bild hochladen, das genau die Größe des Ausschnittes hat.
Responsive Hintergrundbilder in Elementor
Bei Elementor lässt sich das ganz einfach umsetzen. Man lädt einfach 2 (oder mehr) Bilder hoch. Ein größeres für die Desktop Ansicht und ein kleineres für mobile Geräte (das kann auch in WordPress für den richtigen Ausschnitt gecroppt werden! Siehe das Video oben)
Im Elementor Editor kann man ganz einfach zwischen den Responsive Ansichten wechseln und sieht bei den Einstellungen eines Containers, dass das Hintergrundbild auf kleineren Screens halbtransparent dargestellt ist. Das bedeutet, dass hier auf zB. mobiler Ansicht das Desktop Bild geladen wird. In der jeweiligen Ansicht kann man also ein separates Bild als Hintergrundbild auswählen.
Separate Bilder für mobile Geräte mit dem Image Widget
Beim Bild-Widget sieht es aktuell leider etwas anders aus. Hier gibt’s in Elementor diese Möglichkeit leider nicht, ein anderes Bild in einer anderen Responsive Ansicht auszuwählen. (Ich hoffe, dass dieses kleine Feature bald in einem Update enthalten ist)
Es gibt aber einen kleinen Workaround, wie man das Bild dennoch für die mobile Ansicht austauschen kann. Dazu einfach den folgenden CSS-Code im Advanced Tab unter Custom CSS einfügen:
@media screen and (max-width:767px){
selector img{
content: url('https://urlzudeinembild.at/bild.jpg')
}
}Statt der URL fügst du einfach die URL zu deinem Bild ein, welches du auf mobilen Geräten stattdessen anzeigen willst, ein.
Woher bekommst du diese Bild-URL? Dazu gehst du einfach in deine Mediathek und klickst auf das Bild, rechts bekommst du dann die URL angezeigt, die du kopieren kannst.
Und schon wird dein Bild auf mobiler Darstellung (in dem Fall ab einer Bildschirmbreite unter 767px) gegen dein kleineres Bild ausgetauscht.
Hat dir der Artikel gefallen? Kennst du noch mehr Tools zur Optimierung der Bilder? Hast du einen anderen Workflow? Dann schreib gleich unten in die Kommentare!
