Adaptives Laden von Bildern
Neuer Beitrag über Tilda
Wir haben die Bildverarbeitungstechnologie eingesetzt, die Bilder auf die Größe des Layout-Containers skaliert und sie in ein modernes Format - WebP - konvertiert.
Adaptive Image Loading ist auf allen Tilda-Websites standardmäßig aktiv, Sie müssen nichts tun, um es zu aktivieren. Wir haben die Technologie mehrere Monate lang getestet und freuen uns, Ihnen davon berichten zu können.
Werfen wir einen Blick auf alle Technologien, die zur Optimierung des Ladens von Bildern auf Tilda-Websites eingesetzt werden:
Faule Last
Lazy Load ist auf Tilda schon seit langem aktiv. Die Bilder werden allmählich geladen, wenn der Betrachter die Seite nach unten scrollt, und nicht alle auf einmal.
Das Bild ist vollständig geladen, da es auf dem Bildschirm angezeigt wird.
Das Laden beginnt, sobald sich das Bild dem Bildschirm um 700 px nähert.
Das Bild wurde noch nicht geladen
1. Das Bild ist vollständig geladen, da es auf dem Bildschirm angezeigt wird
2. Das Laden beginnt, sobald sich das Bild bis auf 700 px dem Bildschirm nähert
3. Das Laden des Bildes hat noch nicht begonnen.
CDN
CDN (Content Delivery Network) ist ein Netz von Servern, die auf der ganzen Welt verteilt sind. Es wählt den Server aus, der dem Standort eines Besuchers am nächsten ist, und sorgt für eine schnellere Bereitstellung der Bilder. Befindet sich ein Besucher beispielsweise in Berlin, erhält er ein Bild direkt aus Deutschland und nicht aus den USA.
NEU
WebP-Unterstützung
Tilda konvertiert automatisch alle Website-Bilder in WebP. Dieses zukunftsweisende Format ermöglicht eine Komprimierung, die die Bildgröße im Vergleich zu JPEG um bis zu 35 % reduziert, ohne Qualitätsverlust. Sie müssen keine Bilder im WebP-Format auf Ihre Website hochladen, Tilda konvertiert sie für Sie.
JPEG - 1680х1120px, 166 Kb
WebP - 1680х1120px, 78.6 Kb
8,9 Mb
2,8 Mb
Wir haben die Größenunterschiede der Bilder vor und nach der Optimierung mit dieser Vorlage verglichen. Die Gesamtgröße der Bilder ohne Adaptive Image Loading beträgt 8,9 MB. Die Gesamtgröße der Bilder nach Aktivierung von Adaptive Image Loading beträgt 2,8 MB.
Die Gesamtgröße der Bilder reduziert sich nach der Optimierung um das 3-fache
Die meisten modernen Browser wie Chrome, Opera, Firefox und andere unterstützen WebP. Während die Website geladen wird, prüft das Skript, ob der Browser das Format unterstützt, und fordert, falls unterstützt, WebP-Bilder vom Server an. Wird es nicht unterstützt, liefert es die Originalbilder so, wie sie hochgeladen wurden, also als JPEG oder PNG. Die Konvertierung in AVIF, ein weiteres neues Bildformat, das eine noch bessere Reduzierung der Dateigröße ermöglicht, ist in Vorbereitung.
NEU
Adaptive Bildgrößenanpassung
Die Technologie erkennt die Abmessungen des Browsers und des Layout-Containers und fordert dann optimierte Bilder vom Server an.
Stellen Sie sich vor, Sie haben ein 1680 px breites Foto in einen Block mit mehreren Bildern hochgeladen. Die Größe jedes Bildcontainers ist 450 x 300 px. Der Besucher erhält also nicht das Originalfoto, sondern ein entsprechend den Containerabmessungen skaliertes Bild.
Stellen Sie sich vor, Sie haben ein 1680 px breites Foto in einen Block mit mehreren Bildern hochgeladen. Die Größe jedes Bildcontainers ist 450 x 300 px. Der Besucher erhält also nicht das Originalfoto, sondern ein entsprechend den Containerabmessungen skaliertes Bild.
JPEG - 1680x1119px, 252 Kb
WebP- 450x300px, 23.5 Kb
Angenommen, ein Besucher ruft eine Website von einem Telefon aus auf. Um ein Website-Cover auf diesem Gerät zu laden, fordert das Skript ein beschnittenes Bild mit der richtigen Auflösung an, das an den Bildschirm angepasst ist.
JPEG -1680x1120px, 372 Kb
WebP - 560x1120px, 103 Kb
Das intelligente System analysiert ständig den Website-Verkehr auf Tilda. Das Skript bereitet Bilder vor, die für die am häufigsten verwendeten Geräte und Browser optimiert sind. Diese Methode ist flexibler als eine spontane Größenänderung: Manchmal ist es schneller, ein Originalbild herunterzuladen, als die Größe zu ändern und ein optimiertes Bild herunterzuladen.
NEU
Retina-Displays und langsame Internetverbindungen
Wenn ein Besucher einen Bildschirm mit höherer Pixeldichte verwendet, erkennt das Skript dies und fordert ein hochauflösendes Bild vom Server an. Auf diese Weise erscheinen die Bilder auf Retina-Geräten gestochen scharf.
Falls die Verbindung jedoch langsam ist (wenn ein Besucher beispielsweise vom Land aus surft), fordert das System ein kleineres Bild an. Dadurch wird verhindert, dass sich die Ladegeschwindigkeit der Seite verlangsamt.
Falls die Verbindung jedoch langsam ist (wenn ein Besucher beispielsweise vom Land aus surft), fordert das System ein kleineres Bild an. Dadurch wird verhindert, dass sich die Ladegeschwindigkeit der Seite verlangsamt.
In manchen Fällen funktioniert das adaptive Bildladen nicht. Hierfür gibt es mehrere Gründe:
1
Sie haben Lazy Load in den Einstellungen Ihrer Website deaktiviert.
2
Sie haben Lazy Load für ein Element in Zero Block.
3
Eine optimierte Version eines Bildes wurde noch nicht erstellt. Dies geschieht, wenn Sie gerade ein neues Bild auf Ihre Website hochgeladen haben oder wenn Sie sich zum ersten Mal von einem Gerät oder einem Browser aus anmelden.
5
Der Unterschied zwischen der ursprünglichen Bildgröße und der optimierten Version ist unbedeutend; in diesem Fall komprimiert das System das Bild nicht und schneidet es nicht zu.
Adaptive Image Loading ist eine der wichtigsten Optimierungstechnologien, die wir in Tilda implementiert haben. Wir arbeiten weiter hart daran, die auf der Plattform erstellten Websites zu beschleunigen. Bleiben Sie dran für weitere Updates im Tilda-Blog, in Ihrem persönlichen Konto und in den sozialen Netzwerken.
Schnelle und benutzerfreundliche Websites auf Tilda erstellen
Verpassen Sie nicht unsere neuesten Nachrichten, folgen Sie uns auf den sozialen Medien!
