From 79f46eaf48b8891fa8cf7cbde52c12551d6ae6d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Tue, 13 Nov 2018 18:18:43 +0100
Subject: [PATCH] Replace jquery-lazy with lazysizes

---
 package-lock.json                             | 13 ++++------
 package.json                                  |  2 +-
 .../Resources/Private/Assets/js/_app.js       | 11 +--------
 .../Assets/js/components/SearchResultItem.vue |  8 +++----
 .../Resources/Private/Assets/scss/_base.scss  |  2 +-
 .../Private/Partials/Disturber/Large.html     |  2 +-
 .../Private/Partials/Disturber/Reminder.html  |  2 +-
 .../Private/Partials/Disturber/Small.html     |  2 +-
 .../Private/Partials/Hotel/TeaserWide.html    | 16 ++++++-------
 .../Private/Partials/News/List/Item.html      | 16 ++++++-------
 .../Resources/Private/Partials/Officetip.html |  4 +++-
 .../Private/Partials/Product/TeaserWide.html  |  8 +++----
 .../Private/Partials/RegionMaps.html          |  2 +-
 .../Resources/Private/Partials/Teamer.html    |  4 +++-
 .../Private/Partials/TeaserImage.html         | 24 +++++++++----------
 .../Private/Partials/TeaserWideImage.html     | 10 ++++----
 .../Private/Partials/Textmedia/Default.html   |  2 +-
 .../Partials/Textmedia/Partnerlogos.html      |  2 +-
 .../Templates/FluidStyledContent/Lineup.html  |  2 +-
 .../Private/Templates/Team/List.html          |  3 ++-
 webpack.config.js                             |  2 +-
 21 files changed, 65 insertions(+), 72 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2cba11df..aebd0fff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4920,14 +4920,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz",
       "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw="
     },
-    "jquery-lazy": {
-      "version": "1.7.10",
-      "resolved": "https://registry.npmjs.org/jquery-lazy/-/jquery-lazy-1.7.10.tgz",
-      "integrity": "sha512-1vBpU+igfZJ58BrQrk2OFl3TMriGeIfZUg35uSIajZF4GcxF96NtdS3LbWk5a72rH2ypz0odTsAkqhUsICknhw==",
-      "requires": {
-        "jquery": ">=1.7.2"
-      }
-    },
     "js-base64": {
       "version": "2.4.9",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@@ -5046,6 +5038,11 @@
       "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
       "dev": true
     },
+    "lazysizes": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.4.tgz",
+      "integrity": "sha512-jVplgeHHoQ6a2RZtxCAKFAnm6QPQmEIKq4JWSTI1XfCBhn+CqDgMKWDJO81f8VtVBdAlHs+BzP2WGzMLUi3oFg=="
+    },
     "lcid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4387be82..74cab8ce 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "flatpickr": "^4.5.2",
     "font-awesome": "^4.7.0",
     "jquery": "^1.12.4",
-    "jquery-lazy": "^1.7.10",
+    "lazysizes": "^4.1.4",
     "leaflet": "^1.3.4",
     "normalize.css": "^7.0.0",
     "picturefill": "^3.0.3",
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index 5de5fdbd..d356bea4 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -12,7 +12,7 @@ global.$ = global.jQuery = $;
 
 require('cookieconsent');
 require('slick-carousel');
-require('jquery-lazy');
+require('lazysizes');
 require('bootstrap-sass/assets/javascripts/bootstrap');
 require('picturefill');
 require('leaflet');
@@ -292,13 +292,6 @@ new Vue({
                 $filterPanel.addClass('in');
             }
         },
-        initImageLazyLoading () {
-            $('.lazy').Lazy({
-                scrollDirection: 'vertical',
-                effect: 'fadeIn',
-                visibleOnly: true
-            });
-        },
         initPartnerIdSelect () {
             $('[data-force-partnerid-select]').on('click', '.booking-link', function (e) {
                 e.preventDefault();
@@ -377,7 +370,6 @@ new Vue({
             Vue.nextTick(() => {
                 this.initContentsliders();
                 this.initTooltips();
-                this.initImageLazyLoading();
                 this.initFilterpanel();
                 this.appendPaCode();
             });
@@ -422,7 +414,6 @@ new Vue({
             this.initContentsliders();
             this.initPhoneLinks();
             this.initTooltips();
-            this.initImageLazyLoading();
             this.initDropdownMenuBehavior();
             this.initPartnerIdSelect();
             this.initFaqFilter();
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
index 125baea0..b41b5c22 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
@@ -5,10 +5,10 @@
             <referrer-link :href="item.detailPageUri" :referring-page="referringPage"
                            rel="nofollow" title="Details &amp; Buchen">
                 <picture class="searchresult-item__image">
-                    <source media="(max-width: 768px)" :srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
-                    <source media="(max-width: 1200px)" :srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
-                    <source media="(min-width: 1201px)" :srcset="item.hotel.images.resized.m[0].url + ' 260w'"/>
-                    <img class="scale" :src="item.hotel.images.resized.s[0].url"
+                    <source media="(max-width: 768px)" :data-srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
+                    <source media="(max-width: 1200px)" :data-srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
+                    <source media="(min-width: 1201px)" :data-srcset="item.hotel.images.resized.m[0].url + ' 260w'"/>
+                    <img class="scale lazyload" :data-src="item.hotel.images.resized.s[0].url"
                          :title="item.hotel.images.resized.s[0].title"
                          :alt="item.hotel.images.resized.s[0].alt">
                 </picture>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_base.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_base.scss
index 23b48d0d..df832129 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_base.scss
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_base.scss
@@ -121,7 +121,7 @@ a.anchor:target {
 }
 
 // Image lazy loading placeholder
-img.lazy {
+img.lazyloading {
     background: url(../images/lazy.png) no-repeat top center;
 }
 
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
index 53736427..7eb232d8 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
@@ -11,7 +11,7 @@
                         <div class="col-md-6">
                             <f:if condition="{teaserImage}">
                                 <f:then>
-                                    <img class="lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
+                                    <img class="lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
                                          alt="{teaserImage.alternative}" title="{teaserImage.title}">
                                 </f:then>
                                 <f:else>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
index 3a122893..01165b24 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
@@ -11,7 +11,7 @@
                 <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
                     <f:if condition="{teaserImage}">
                         <f:then>
-                            <img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400')}"
+                            <img class="scale lazyload" data-src="{f:uri.image(image: teaserImage, width: '400')}"
                                  alt="{teaserImage.alternative}" title="{teaserImage.title}">
                         </f:then>
                         <f:else>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
index 2c484aae..e8bfc78e 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
@@ -11,7 +11,7 @@
                         <div class="col-sm-2">
                             <f:if condition="{teaserImage}">
                                 <f:then>
-                                    <img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
+                                    <img class="scale lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
                                          alt="{teaserImage.alternative}" title="{teaserImage.title}">
                                 </f:then>
                                 <f:else>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
index 05aadc2e..a95a1f45 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
@@ -109,16 +109,16 @@
             <f:then>
                 <f:alias map="{image: item.hotel.images.original.0}">
                     <picture class="searchresult-item__image">
-                        <source media="(max-width: 768px)" srcset="{f:uri.image(
+                        <source media="(max-width: 768px)" data-srcset="{f:uri.image(
                             image: image, width: '220', height: '130c-100'
                         )}  220w"/>
-                        <source media="(max-width: 1200px)" srcset="{f:uri.image(
+                        <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
                             image: image, width: '280', height: '220c-100'
                         )}  280w"/>
-                        <source media="(min-width: 1201px)" srcset="{f:uri.image(
+                        <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
                             image: image, width: '260', height: '200c-100'
                         )}  260w"/>
-                        <img class="scale" src="{f:uri.image(
+                        <img class="scale lazyload" data-src="{f:uri.image(
                             image: image, width: '260', height: '200c-100'
                         )}" title="{image.title}" alt="{image.alternative}">
                     </picture>
@@ -126,19 +126,19 @@
             </f:then>
             <f:else>
                 <picture class="searchresult-item__image">
-                    <source media="(max-width: 768px)" srcset="{f:uri.image(
+                    <source media="(max-width: 768px)" data-srcset="{f:uri.image(
                         src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                         width: '220', height: '130c-100'
                     )}  220w"/>
-                    <source media="(max-width: 1200px)" srcset="{f:uri.image(
+                    <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
                         src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                         width: '280', height: '220c-100'
                     )}  280w"/>
-                    <source media="(min-width: 1201px)" srcset="{f:uri.image(
+                    <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
                         src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                         width: '260', height: '200c-100'
                     )}  260w"/>
-                    <img class="scale" src="{f:uri.image(
+                    <img class="scale lazyload" data-src="{f:uri.image(
                         src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                         width: '260', height: '200c-100'
                     )}" title="" alt="">
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
index b2314069..d66818e0 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
@@ -10,20 +10,20 @@
                     <f:then>
                         <f:if condition="{newsItem.mediaPreviews.0}">
                             <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
-                                <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
-                                         crop="{mediaElement.crop}"
-                                         width="640" height="360c+50"
-                                         alt="{mediaElement.originalResource.alternative}" class="scale"/>
+                                <img class="scale lazyload"
+                                     data-src="{f:uri.image(image: mediaElement, crop: mediaElement.crop, width: '640', height: '360c+50')}"
+                                     alt="{mediaElement.originalResource.alternative}"
+                                     title="{mediaElement.originalResource.title}">
                             </f:alias>
                         </f:if>
                     </f:then>
                     <f:else>
                         <f:if condition="{newsItem.media}">
                             <f:alias map="{mediaElement: '{newsItem.media.0}'}">
-                                <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
-                                         crop="{mediaElement.crop}"
-                                         width="640" height="360c+50"
-                                         alt="{mediaElement.originalResource.alternative}" class="scale"/>
+                                <img class="scale lazyload"
+                                     data-src="{f:uri.image(image: mediaElement, crop: mediaElement.crop, width: '640', height: '360c+50')}"
+                                     alt="{mediaElement.originalResource.alternative}"
+                                     title="{mediaElement.originalResource.title}">
                             </f:alias>
                         </f:if>
                     </f:else>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
index 0fa624f5..ad6e8ead 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
@@ -5,7 +5,9 @@
                 <p><strong>Officetipp</strong></p>
                 <f:if condition="{officetip.author.image}">
                     <f:then>
-                        <f:image src="{officetip.author.image.uid}" treatIdAsReference="1" crop="{officetip.author.image.crop}" width="120" class="img-responsive" alt="{officetip.author.name}" />
+                        <img data-src="{f:uri.image(image: officetip.author.image, crop: officetip.author.image.crop, width: '120')}"
+                             class="img-responsive lazyload"
+                             alt="{officetip.author.name}">
                     </f:then>
                     <f:else>
                         <img src="https://placehold.it/120x160" class="img-responsive" alt="{officetip.author.name}">
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html
index 5b9a85b1..702095bb 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html
@@ -112,10 +112,10 @@
     <f:section name="PictureTag">
         <f:if condition="{image}">
             <picture class="searchresult-item__image">
-                <source media="(max-width: 768px)" srcset="{f:uri.image(image: image, width: '220', height: '130c-100')}  220w"/>
-                <source media="(max-width: 1200px)" srcset="{f:uri.image(image: image, width: '280', height: '220c-100')}  280w"/>
-                <source media="(min-width: 1201px)" srcset="{f:uri.image(image: image, width: '260', height: '200c-100')}  260w"/>
-                <img class="scale" src="{f:uri.image(image: image, width: '260', height: '200c-100')}"
+                <source media="(max-width: 768px)" data-srcset="{f:uri.image(image: image, width: '220', height: '130c-100')}  220w"/>
+                <source media="(max-width: 1200px)" data-srcset="{f:uri.image(image: image, width: '280', height: '220c-100')}  280w"/>
+                <source media="(min-width: 1201px)" data-srcset="{f:uri.image(image: image, width: '260', height: '200c-100')}  260w"/>
+                <img class="scale lazyload" data-src="{f:uri.image(image: image, width: '260', height: '200c-100')}"
                      title="{image.title}" alt="{image.alternative}">
             </picture>
         </f:if>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
index 586adb8b..ce29d6bb 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
@@ -6,7 +6,7 @@
                 <a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
                    data-fancybox="regionmap-{region.uid}" data-caption="Pistenplan {region.name}"
                    title="Pistenplan {region.name}">
-                    <img class="img-responsive lazy"
+                    <img class="img-responsive lazyload"
                          data-src="{f:uri.image(image: regionMap, width: '330')}"
                         alt="{regionMap.alternative}"
                         title="{regionMap.title}">
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
index cef7c8bf..1e29543b 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
@@ -6,7 +6,9 @@
         <div>
             <f:if condition="{teamerInCharge.image}">
                 <f:then>
-                    <f:image src="{teamerInCharge.image.uid}" treatIdAsReference="1" crop="{teamerInCharge.image.crop}" width="330" class="img-responsive" alt="{teamerInCharge.name}" />
+                    <img data-src="{f:uri.image(image: teamerInCharge.image, crop: teamerInCharge.image.crop, width: '330')}"
+                         class="img-responsive lazyload"
+                         alt="{teamerInCharge.name}">
                 </f:then>
                 <f:else>
                     <img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
index 6c0f4fba..26541bc0 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
@@ -1,49 +1,49 @@
 <f:if condition="{image.uid}">
     <f:then>
         <picture>
-            <source media="(max-width: 512px)" srcset="{f:uri.image(
+            <source media="(max-width: 512px)" data-srcset="{f:uri.image(
                 image: image, width: '350', height: '175c-100'
             )}  350w"/>
-            <source media="(max-width: 768px)" srcset="{f:uri.image(
+            <source media="(max-width: 768px)" data-srcset="{f:uri.image(
                 image: image, width: '500', height: '250c-100'
             )}  500w"/>
-            <source media="(max-width: 991px)" srcset="{f:uri.image(
+            <source media="(max-width: 991px)" data-srcset="{f:uri.image(
                 image: image, width: '360', height: '200c-100'
             )}  360w"/>
-            <source media="(max-width: 1200px)" srcset="{f:uri.image(
+            <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
                 image: image, width: '320', height: '160c-100'
             )}  320w"/>
-            <source media="(min-width: 1201px)" srcset="{f:uri.image(
+            <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
                 image: image, width: '370', height: '220c-100'
             )}  370w"/>
-            <img class="scale" srcset="{f:uri.image(
+            <img class="scale lazyload" data-src="{f:uri.image(
                 image: image, width: '500', height: '250c-100'
             )}" title="{image.title}" alt="{image.alternative}">
         </picture>
     </f:then>
     <f:else>
         <picture>
-            <source media="(max-width: 512px)" srcset="{f:uri.image(
+            <source media="(max-width: 512px)" data-srcset="{f:uri.image(
                 src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                 width: '350', height: '175c-100'
             )}  320w"/>
-            <source media="(max-width: 768px)" srcset="{f:uri.image(
+            <source media="(max-width: 768px)" data-srcset="{f:uri.image(
                 src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                 width: '500', height: '250c-100'
             )}  500w"/>
-            <source media="(max-width: 991px)" srcset="{f:uri.image(
+            <source media="(max-width: 991px)" data-srcset="{f:uri.image(
                 src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                 width: '360', height: '200c-100'
             )}  360w"/>
-            <source media="(max-width: 1200px)" srcset="{f:uri.image(
+            <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
                 src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                 width: '320', height: '160c-100'
             )}  420w"/>
-            <source media="(min-width: 1201px)" srcset="{f:uri.image(
+            <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
                 src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                 width: '370', height: '220c-100'
             )}  370w"/>
-            <img class="scale" srcset="{f:uri.image(
+            <img class="scale lazyload" data-src="{f:uri.image(
                 src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                 width: '500', height: '250c-100'
             )}" title="" alt="">
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
index 47f4d869..4d9417ac 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
@@ -1,19 +1,19 @@
 <f:if condition="{image}">
     <f:then>
         <picture class="product-teaser__image">
-            <source media="(max-width: 768px)" srcset="{f:uri.image(
+            <source media="(max-width: 768px)" data-srcset="{f:uri.image(
                 image: image, width: '320', height: '140c-100'
             )}  320w"/>
-            <source media="(max-width: 991px)" srcset="{f:uri.image(
+            <source media="(max-width: 991px)" data-srcset="{f:uri.image(
                 image: image, width: '260', height: '220c-100'
             )}  260w"/>
-            <source media="(max-width: 1200px)" srcset="{f:uri.image(
+            <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
                 image: image, width: '220', height: '130c-100'
             )}  220w"/>
-            <source media="(min-width: 1201px)" srcset="{f:uri.image(
+            <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
                 image: image, width: '320', height: '200c-100'
             )}  320w"/>
-            <img class="scale" srcset="{f:uri.image(
+            <img class="scale lazyload" data-src="{f:uri.image(
                 image: image, width: '260', height: '160c-100'
             )}" title="{image.title}" alt="{image.alternative}">
         </picture>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html
index 5323958d..ab5b2962 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html
@@ -8,7 +8,7 @@
         {data.bodytext -> f:format.html()}
         <f:if condition="{files}">
             <f:link.typolink parameter="{files.0.link}">
-                <img class="img-responsive lazy"
+                <img class="img-responsive lazyload"
                      data-src="{f:uri.image(image: files.0, maxWidth: '770')}"
                      alt="{files.0.originalResource.alternative}"
                      title="{files.0.originalResource.title}"
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
index 9909dadd..5ea03037 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
@@ -24,7 +24,7 @@
     <f:section name="Image">
         <div class="partnerlogo {cssClasses}">
             <f:link.typolink parameter="{image.link}">
-                <img class="lazy img-responsive partnerlogo__image"
+                <img class="lazyload img-responsive partnerlogo__image"
                      data-src="{f:uri.image(image: image, width: '400c', height: '400')}"
                      alt="{image.alternative}" title="{image.title}">
             </f:link.typolink>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html
index 89327b72..a539aadf 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html
@@ -11,7 +11,7 @@
 			<f:for each="{items}" as="item" iteration="iteration">
 				<div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}">
 					<div class="col-md-6">
-						<img class="scale lazy" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
+						<img class="scale lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
 					</div>
 					<div class="col-md-6 ">
 						<div>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html
index ef2eb982..158c7e07 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html
@@ -31,7 +31,8 @@
                     <div>
                         <f:if condition="{member.image}">
                             <f:then>
-                                <f:image src="{member.image.uid}" treatIdAsReference="1" crop="{member.image.crop}" width="400" height="400c" title="{member.name}" alt="{member.name}"/>
+                                <img data-src="{f:uri.image(image: member.image, width: '400', height: '400c')}"
+                                     class="lazyload" title="{member.name}" alt="{member.name}">
                             </f:then>
                             <f:else>
                                 <img src="https://placehold.it/400x400" alt="{member.name}">
diff --git a/webpack.config.js b/webpack.config.js
index dfdd9b93..c331e3ee 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,7 +10,7 @@ Encore
     .addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
     .addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
     .createSharedEntry('vendor', [
-        'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'jquery-lazy',
+        'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'lazysizes',
         'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
         'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
     ])