{"id":4181,"date":"2019-09-27T13:27:53","date_gmt":"2019-09-27T11:27:53","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=4181"},"modified":"2019-09-27T13:27:53","modified_gmt":"2019-09-27T11:27:53","slug":"ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/","title":{"rendered":"Ganz sch\u00f6n faul – Bilder werden lazy mit Lazy-Loading"},"content":{"rendered":"

Webseiten m\u00fcssen heutzutage die unterschiedlichsten Anforderungen erf\u00fcllen. Einen gro\u00dfen Punkt nehmen hier die Bilder ein. Sie m\u00fcssen gestochen scharf auf „Retina Displays“ aussehen und gleichzeitig mit einer geringen Datenmenge auskommen, um die Ladezeiten der Webseite nicht unn\u00f6tig zu belasten. Ganz sch\u00f6n viel Druck, der auf den Bildern lastet.<\/p>\n

Es gibt einige L\u00f6sungen zum Nachladen f\u00fcr Bilder (Lazy-Loading). Wir stellen hier unseren L\u00f6sungsweg vor.<\/p>\n

 <\/p>\n

Die Ausgangslage<\/strong><\/p>\n

Mit dem Durchbruch der Smartphones mussten sich Webseiten anderen Rahmenbedingungen anpassen. Im Vergleich zu einem B\u00fcro-Computer wurde der Bildschirm kleiner, die Internetverbindung langsamer und das Datenvolumen war auf einmal stark begrenzt. Das responsive Webdesign<\/a> setzte sich durch und die Webseiten passten sich den unterschiedlichen Endger\u00e4ten an.<\/p>\n

Im Gegensatz zu dieser Entwicklung werden Fernseher und Monitore immer gr\u00f6\u00dfer, hochaufl\u00f6sender und „smart“. Nach HD kam Full HD, bis hin zu 4K oder gar 5K. Das Surfen vom Sofa aus, zwischen Netflix und der Tagesschau, zieht in den Alltag ein. Responsive Webseiten haben somit auch die Aufgabe, auf solchen gro\u00dfen Bildschirmen und Fernsehern zu funktionieren und hier den ganzen Platz zu nutzen.<\/p>\n

Auch das Webdesign hat sich mit der Zeit ver\u00e4ndert. Webdesigner setzen aktuell auf gro\u00dfe Bilder und Videos. Und auch Suchmaschinen erheben neben den Nutzern Anspr\u00fcche an Webseiten – sie sollen performant und informativ zugleich sein.<\/p>\n

 <\/p>\n

Lazy-Loading f\u00fcr Bilder<\/h2>\n

Ein g\u00e4ngiger Weg diesen unterschiedlichsten Anspr\u00fcchen gerecht zu werden, ist das Nachladen der Bilder mit dem sog. „Lazy-Loading“.<\/p>\n

Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Das erzeugt eine sp\u00fcrbare Ladezeit. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Das f\u00fchrt dazu, dass beim Aufruf der Webseite keine Bilder geladen werden. Erst wenn die Bilder f\u00fcr den Nutzer sichtbar werden, werden diese geladen. Das erzeugt eine deutlich bessere erste (initiale) Ladezeit, und zum Anderen werden keine Bilder heruntergeladen, die der Nutzer nicht gesehen hat. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen.<\/p>\n

Desweiteren sollten die Bilder in unterschiedlichen Gr\u00f6\u00dfen bereitgestellt werden. F\u00fcr ein Smartphone muss beispielsweise kein 1960px gro\u00dfes Bild geladen werden. Hier reicht das gleiche Bild in einer Breite von 360px. So reduziert man deutlich die Datenmenge die heruntergeladen muss, um das Bild darzustellen. Ein weiterer Vorteil f\u00fcr Ladezeit und Datenvolumen.<\/p>\n

Anwendung in der Praxis<\/h3>\n

Wir haben uns zur L\u00f6sung dieser Aufgaben f\u00fcr ein frei verf\u00fcgbares JavaScript-Plugin entschieden: lazysizes<\/a>. Dieses Plugin deckt die oben genannten Anforderungen ab: das Nachladen der Bilder beim Eintreten in den sichtbaren Bereich und das Austauschen der Bilder mit den zur Verf\u00fcgung stehenden unterschiedlichen Bildgr\u00f6\u00dfen.<\/p>\n

Zum Austausch der Bildgr\u00f6\u00dfen gibt es bereits zwei L\u00f6sungen standardm\u00e4\u00dfig: Das srcset-Attribut und das picture-Tag steuern das Laden von unterschiedlichen Bildgr\u00f6\u00dfen, je nach Bildschirmaufl\u00f6sung. lazysizes erweitert diese Funktionalit\u00e4t u.a. mit dem Laden der passenden Bildgr\u00f6\u00dfen je nach der Breite, in der das Bild dargestellt werden soll – und nicht nach Bildschirmaufl\u00f6sung. Das ist gerade beim Darstellen von Bildern in unterschiedlichen Spalten sinnvoll.<\/p>\n

Die Einbindung ist simpel<\/h4>\n

Die JavaScript-Dateien lazysizes.min.js <\/strong>und ls.respimg.min.js<\/strong> m\u00fcssen in das Web-Projekt eingebunden werden.\u00a0Es handelt sich hier um das lazysizes Kern-Plugin und um eine Erweiterung dieses Kerns um ein Polyfill f\u00fcr das srcset-Attribut und das picture-Tag<\/a>.<\/p>\n

lazysizes initialisiert sich selbst, es wird daher kein weiteres JavaScript zur Initialisierung ben\u00f6tigt.<\/p>\n

Nun werden Bilder, die mit der CSS-Klasse „lazyload“<\/strong> ausgestattet werden, bereits beim Eintritt in den sichtbaren Bereich nachgeladen.<\/p>\n

Einsatz mit dem srcset-Attribut<\/h4>\n

Um nun zus\u00e4tzlich noch die unterschiedlichen Bildgr\u00f6\u00dfen eines Bildes zur Verf\u00fcgung zu stellen, nutzen wir das srcset-Attribut. Diese L\u00f6sung bietet sich allerdings nur f\u00fcr Bilder an, die in jeder Bildschirmgr\u00f6\u00dfe ein identisches Seitenverh\u00e4ltnis haben. Soll das Seitenverh\u00e4ltnis des Bildes sich auf z.B. mobilen Endger\u00e4ten \u00e4ndern, muss das picture-Tag (siehe unten) genutzt werden.<\/p>\n

<img data-srcset=\"http:\/\/placehold.it\/1140x275 1140w,\r\n      http:\/\/placehold.it\/820x195 820w,\r\n      http:\/\/placehold.it\/620x150 620w,\r\n      http:\/\/placehold.it\/420x100 420w\"\r\n     data-sizes=\"auto\"\r\n     src=\"http:\/\/placehold.it\/1140x275\"\r\n     srcset=\"data:image\/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=\"\r\n     class=\"lazyload-image lazyload\"\r\n     alt=\"Bild\" \/><\/pre>\n
In dem Attribut data-srcset<\/strong> befinden sich kommasepariert die unterschiedlichen Bildgr\u00f6\u00dfen, die zur Verf\u00fcgung gestellt werden. Jeweils hinter dem Pfad zu dem Bild wird die Breite des Bildes mit z.B. „1140w“ festgehalten.<\/p>\n
Das Attribut data-sizes=“auto“<\/strong> sorgt f\u00fcr das Abstimmen der Bildgr\u00f6\u00dfen auf den Darstellungsbereich des Bildes. D.h. die Bildgr\u00f6\u00dfen werden nicht nach der Bildschirmgr\u00f6\u00dfe ausgelesen, sondern nach der Breite, in der das Bild dargestellt werden soll. Dazu ist es zwingend notwendig dem Bild via CSS width: 100%;<\/strong> zu geben. Dies \u00fcbernimmt bei uns die CSS-Klasse „lazyload-image<\/strong>“<\/p>\n
Die Kombination der Attribute src<\/strong> und srcset<\/strong> setzen wir f\u00fcr die Suchmaschinen. Um sicher zu gehen, dass die Suchmaschinen-Crawler die Bilder auslesen k\u00f6nnen, setzen wir ein Bild via src-Attribut. Damit dieses bei den Nutzern nicht sofort beim Aufruf der Webseite geladen wird, setzen wir zudem das srcset-Attribut mit einem Leerzeichen in base64. Die meisten modernen Browser laden das srcset-Attribut vor dem src-Attribut und da hier etwas hinterlegt ist, wird das src-Attribut ignoriert. Da es sich aber nur um ein Leerzeichen handelt, ist der Lade-Aufwand sehr gering.<\/p>\n
lazysizes entscheidet nun je nach Aufl\u00f6sung des Bildschirms und Breite des Darstellungsbereichs des Bildes, welche Bildschirmgr\u00f6\u00dfe geladen werden soll. Bei Retina-Displays wird z.B. ein entsprechend hochaufl\u00f6sendes Bild geladen.<\/p>\n
<\/h4>\n
Einsatz mit dem picture-Tag<\/h4>\n
Wenn sich das Seitenverh\u00e4ltnis eines Bildes z.B. auf mobilen Endger\u00e4ten ver\u00e4ndert, wird auf das picture-Tag zur\u00fcckgegriffen.<\/p>\n
<picture>\r\n     <source data-srcset=\"http:\/\/placehold.it\/1140x550\" media=\"(min-width:821px)\" \/>\r\n     <source data-srcset=\"http:\/\/placehold.it\/820x600\" media=\"(min-width:621px)\" \/>\r\n     <source data-srcset=\"http:\/\/placehold.it\/620x150\" media=\"(min-width:421px)\" \/>\r\n     <source data-srcset=\"http:\/\/placehold.it\/420x400\" media=\"(min-width:0px)\" \/>\r\n     <img src=\"http:\/\/placehold.it\/1140x550\" \r\n          srcset=\"data:image\/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=\" \r\n          alt=\"Bild\"\r\n          class=\"lazyload-image lazyload\" \/>\r\n<\/picture><\/pre>\n
Je Bildgr\u00f6\u00dfe wird ein source-Tag<\/strong> angelegt. Hier wird der Bildpfad und die Bildschirmgr\u00f6\u00dfe definiert. Die Bildschirmgr\u00f6\u00dfe bestimmt, bei welcher Bildschirmma\u00dfe das jeweilige Bild geladen werden soll.<\/p>\n
Der img-Tag enth\u00e4lt aus den gleichen Suchmaschinen-Gr\u00fcnden wie oben beschrieben ein src- und srcset-Attribut<\/strong>.<\/p>\n
 <\/p>\n
Die hier beschriebenen L\u00f6sungen f\u00fcr das Lazy-Loading bei Bildern funktionieren in den g\u00e4ngigen modernen Browser, inklusive dem Internet Explorer 11.<\/p>\n
 <\/p>\n
Sie haben Fragen zum Lazy-Loading? Oder haben Sie Ihre Webseite noch nicht auf ein responsives Verhalten umgestellt? Dann melden Sie sich bei uns<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Mit Lazy-Loading werden Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen. Wir zeigen, wie es geht.<\/p>\n","protected":false},"author":8,"featured_media":3910,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[124,204,56,26],"class_list":["post-4181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-crop-funktion","tag-lazy-loading","tag-performance","tag-responsive"],"acf":[],"yoast_head":"\nGanz sch\u00f6n faul - Bilder werden lazy mit Lazy-Loading - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ganz sch\u00f6n faul - Bilder werden lazy mit Lazy-Loading - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-27T11:27:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/07\/lazy-loading-faultier_teaser-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Angela\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angela\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/\"},\"author\":{\"name\":\"Angela\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\"},\"headline\":\"Ganz sch\u00f6n faul – Bilder werden lazy mit Lazy-Loading\",\"datePublished\":\"2019-09-27T11:27:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/\"},\"wordCount\":1004,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/lazy-loading-faultier_teaser-01.jpg\",\"keywords\":[\"Crop-Funktion\",\"Lazy-Loading\",\"Performance\",\"Responsive\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/\",\"name\":\"Ganz sch\u00f6n faul - Bilder werden lazy mit Lazy-Loading - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/lazy-loading-faultier_teaser-01.jpg\",\"datePublished\":\"2019-09-27T11:27:53+00:00\",\"description\":\"Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/lazy-loading-faultier_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/lazy-loading-faultier_teaser-01.jpg\",\"width\":1170,\"height\":577},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ganz sch\u00f6n faul – Bilder werden lazy mit Lazy-Loading\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\",\"name\":\"Angela\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"caption\":\"Angela\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/angela\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ganz sch\u00f6n faul - Bilder werden lazy mit Lazy-Loading - clickstorm Blog","description":"Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/","og_locale":"de_DE","og_type":"article","og_title":"Ganz sch\u00f6n faul - Bilder werden lazy mit Lazy-Loading - clickstorm Blog","og_description":"Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen.","og_url":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2019-09-27T11:27:53+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/07\/lazy-loading-faultier_teaser-01.jpg","type":"image\/jpeg"}],"author":"Angela","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Angela","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/"},"author":{"name":"Angela","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569"},"headline":"Ganz sch\u00f6n faul – Bilder werden lazy mit Lazy-Loading","datePublished":"2019-09-27T11:27:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/"},"wordCount":1004,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/07\/lazy-loading-faultier_teaser-01.jpg","keywords":["Crop-Funktion","Lazy-Loading","Performance","Responsive"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/","url":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/","name":"Ganz sch\u00f6n faul - Bilder werden lazy mit Lazy-Loading - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/07\/lazy-loading-faultier_teaser-01.jpg","datePublished":"2019-09-27T11:27:53+00:00","description":"Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Ein Vorteil also f\u00fcr Ladezeit und Datenvolumen.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/07\/lazy-loading-faultier_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/07\/lazy-loading-faultier_teaser-01.jpg","width":1170,"height":577},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/ganz-schoen-faul-bilder-werden-lazy-mit-lazy-loading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Ganz sch\u00f6n faul – Bilder werden lazy mit Lazy-Loading"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569","name":"Angela","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","caption":"Angela"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/angela\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=4181"}],"version-history":[{"count":10,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4181\/revisions"}],"predecessor-version":[{"id":4218,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4181\/revisions\/4218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/3910"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=4181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=4181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=4181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}