Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Bilder später laden mit Lazy Load und HTML

Bilder später laden mit Lazy Load und HTML

Das Plugin Lazy Load lädt Bilder auf Wunsch erst unter bestimmten Bedingungen wie Scrollen oder Klicken nach. Damit stellt es das gerade Gegenteil des Image-Preloadings dar. Der Browser lädt jetzt nur die Bilder, die gerade im Browser sichtbar sind.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Markus Seyfferth
  • 16. April 2019
Bookmarke mich
Share on pocket

One Step Webdesign

Philipp Pistis - WordPress Agentur

aeosys

Trend Maker Marketing - Webdesign Agentur Regensburg

BIZ Digital Marketing

SEOlist.IO Frankfurt - SEO-Spezialist & SEO-Freelancer

Bilder Lazy-Laden mit HTML und die Webseiten-Ladezeit verbessern: So wird’s gemacht

Ab der Version 75 wird Chrome das sogenannte “Lazy-Loading” nativ unterstützen. Das kündigt Addy Osmani, einer der führenden Entwickler hinter dem Browser in seinem Blog an. Aktuell ist allerdings noch die Version 73.

Damit wird Chrome voraussichtlich ab Juni 2019 das nachrangige Laden von Bildern und iFrames unterstützen, die einen bestimmten HTML-Tag zugeordnet bekommen haben, nämlich:

<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="..." />

Dabei zeigt loading="lazy" dem Browser an, dass dieses Bild nachrangig geladen werden kann. Es lohnt sich also, fortan diesen Wert für alle Bilder auf einer Seite hinzuzufügen.

Es wird sich sicher auch eine Entwicklerin finden, welche dafür eine WordPress-Plugin erstellt, so dass dieser Vorgang rückwirkend und für alle bereits bestehenden Bilder per einmaligem Knopfdruck vorgenommen werden kann. Sobald wir da fündig werden, werden wir den Namen dieses Plugins nachliefern. Falls ihr schon fündig geworden sein solltet, könnt ihr das auch gerne in den Kommentaren bekunden!

Dasselbe Prinzip des loading="lazy" wird auch für die iFrames dieser Welt gelten, sodass die HTML-Tags wie folgt aussehen sollten:

<iframe src="https://www.youtube.com/embed/einhuebschesvideo" loading="lazy"></iframe>

Nun, wozu das Ganze eigentlich?

Eine Vielzahl von Webseiten enthalten oft eine hohe Anzahl von Bildern, welche oftmals noch nicht einmal für die Darstellung am Bildschirm optimiert sind. Das führt dazu, dass alle Bilder zusammengenommen meist mehr Ladevolumen und -zeit beanspruchen als die eigentlichen textbasierten Inhalte.

Die Crux des Ganzen ist dabei, dass viele dieser Bilder sich nicht im sichtbaren Bereich des Bildschirms befinden, sondern oft erst im weiteren Bildlauf zu sehen sind, sobald man also nach unten scrollt.

Von daher müssten diese zunächst nicht sichtbaren Bilder anfangs gar nicht erst geladen werden, solange sie nicht zu sehen sind. Die Bilder zu laden, kurz bevor sie in den sichtbaren Bildschirmbereich kommen, würde völlig genügen.

Diese Problem soll nun mit der Einführung des Tags und Attributs loading="lazy" behoben werden.

Bisher ist es gängige Praxis, extra ein JavaScript zu laden, nur um die Auswirkungen von Offscreen-Bildern auf die Seitenladezeiten zu begrenzen, und um den Abruf dieser Bilder solange zu verzögern, bis die Nutzer in die Nähe der zu ladenden Bilder kommen.

Addy Osmani zeigt in seiner Ankündigung sehr gut auf, welchen Effekt die Benutzung des Lazy-Loadings auf die Seitenladezeit haben kann.

Eine Visualisierung von der Ladezeit einer Seite mit 211 Bildern.
Eine Visualisierung von der Ladezeit einer Seite mit 211 Bildern. Die Lazy-Loading-Version lädt nur 250 KB beim initialen Ladevorgang. Andere Bilder werden erst dann abgerufen, wenn die Benutzer weiter nach unten scrollen.

Folglich kann das nativ-verzögerte Laden dazu beitragen, dass alle Inhalte, welche sich oben im sichtbaren Bereich befinden, deutlich schneller angezeigt werden. Sowohl die Gesamtladezeit als auch das Ladevolumen einer Website werden dadurch erheblich reduziert.

Damit die Bilder (und Videos) aber nicht erst geladen werden, wenn sie sich bereits im sichtbaren Bereich befinden, eine Sache die eher als störend empfunden wird, werden die mit dem loading="lazy" Tag versehenen Bilder bereits im Hintergrund geladen, bevor sie in den sichtbaren Bereich kommen. Somit bleibt der Gesamteindruck einer Seite auch in dieser Hinsicht ungetrübt.

Welche Bild-Tags werden unterstützt?

Für Entwickler ist es wichtig zu wissen, dass nicht nur die ordinären <img> und <iframe> Tags unterstützt werden, sondern auch die responsiven Bildformate à la <srcset> und <picture>.

Zum Abschluss noch eine Liste mit Beispielen:

<! – Hier das Standard-Schnipsel, welches das Bild erst dann lädt, wenn die Nutzer in die Nähe des Bildes scrollen: – >

<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="Eine süße Katz hat eine süße Fratz und zeigt dem Spatz ihre Tatz"/>

<! – Hier das responsive <picture> Bildformat, dass meist nur von versierten Entwicklern eingesetzt wird. Der <img> im Beispiel wird dabei nur für ältere Browser, die mit den neuen responsiven Bildformaten nichts anfangen können, beibehalten. – >
<picture>
  <source media="(min-width: 40em)" srcset="ein-grosses-bild.jpg 1x, ein-grosses-bild-in-hd.jpg 2x">
  <source srcset="ein-kleines-bild.jpg 1x, ein-kleines-bild-in-hd.jpg 2x">
  <img src="das-bild-für-alte-browser.jpg" loading="lazy">
</picture>

<! – Hier das Beispiel mit dem srcset Format, bei welchem nur die Bildgröße spezifiziert wird – >
<img src="small.jpg"
     srcset="ein-grosses-bild.jpg 1024w, ein-mittelgrosses-bild.jpg 640w, ein-kleines-bild.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="Mein süsser Spatzfratz" loading="lazy">

<! – Hier ein Beispiel für ein iFrame. Das kann z.B. eine Karte von Google Maps oder ein eingebettetes Video sein – >
<iframe src="video-player.html" loading="lazy"></iframe>

Zu guter Letzt sei noch gesagt, dass Browser, die den loading="lazy" Tag nicht unterstützen, diesen einfach ignorieren. Das ist das Schöne an HTML: Nicht unterstützte Attribute werden einfach ignoriert und tun keinem weh.

Probieren geht über Studieren

Wer das neue Feature schon heute probieren möchte, kann dies tun, indem er/sie chrome://flags in die URL-Leiste eingibt, und dann “Enable lazy frame loading” sowie “Enable lazy image loading” aktiviert. Danach gilt es noch, den Chrome-Browser neu zu starten und los geht es.

Als weiterführenden Artikel und für mehr Details dazu, wie die Implementierung im Detail erfolgt, lohnt es sich, Addy Osmanis Beitrag zu lesen.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Markus Seyfferth

Markus Seyfferth

ist Herausgeber und Chefredakteur von Dr. Web. Zuvor übernahm er für sechs Jahre die geschäftsführende Verantwortung des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Agenturpartner

Haurand Webdesign

Aachen

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

CAF Webdesign Agentur

Berlin

wolli ruf – mediendesign

Freiburg im Breisgau

Warscher – Digital Experts

Horgen

Alle Agenturpartner

Jobs

Teamleiter Online Marketing

München

Web Development & Project Management

Remote

Google Ads Kampagnen­betreuer

Salzburg

Junior SEO Manager in München

München

Frontend Development & Project Management

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

0 Antworten zu „Bilder später laden mit Lazy Load und HTML“
— was ist Deine Meinung?

  1. FWK-ART sagt:
    12. Oktober 2010 um 8:03 Uhr

    Ich hab alle notwendigen Sachen in den Footer gepackt. Funktioniert ohne Probleme. Danke für den Tipp!

    Antworten
  2. blinkblank sagt:
    5. Juni 2010 um 21:49 Uhr

    Inzwischen scheint’s auch in Webkit-Browsern zu gehen: Google Chrome ist ja anscheinend einer und da funktioniert’s! Schönes Ding, werd‘ ich auch benutzen!

    Antworten
  3. Tom sagt:
    19. Mai 2009 um 19:56 Uhr

    Na ja, so neu ist das nun nicht. Für Prototype gibts das z.b. auch schon ein paar Jahre: http://www.bram.us/projects/js_bramus/lazierload/ 😉

    Antworten
  4. Chukki sagt:
    16. April 2009 um 8:59 Uhr

    Netter Beitrag. Hat jemand was vergleichbares für Mootools?

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.