diff --git a/assets/conf-img/tpl/default-picture-nolazyload-caption.tpl b/assets/conf-img/tpl/default-picture-nolazyload-caption.tpl
index 4c2c72f8..a959848d 100644
--- a/assets/conf-img/tpl/default-picture-nolazyload-caption.tpl
+++ b/assets/conf-img/tpl/default-picture-nolazyload-caption.tpl
@@ -1,6 +1,6 @@
 <picture>
     %%data-location%%
     %%sources%%
-    <img %%src%% fetchpriority="high" %%attributes%%>
+    <img %%src%% fetchpriority="high" decoding="async" %%attributes%%>
 </picture>
-<figcaption>%%caption%%</figcaption>
\ No newline at end of file
+<figcaption>%%caption%%</figcaption>
diff --git a/assets/conf-img/tpl/default-picture-nolazyload.tpl b/assets/conf-img/tpl/default-picture-nolazyload.tpl
index 5b7315a4..ac3571ac 100644
--- a/assets/conf-img/tpl/default-picture-nolazyload.tpl
+++ b/assets/conf-img/tpl/default-picture-nolazyload.tpl
@@ -1,5 +1,5 @@
 <picture>
     %%data-location%%
     %%sources%%
-    <img %%src%% fetchpriority="high" %%attributes%%>
+    <img %%src%% fetchpriority="high" decoding="async" %%attributes%%>
 </picture>
diff --git a/package.json b/package.json
index 40297858..91724683 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "license": "GPL-2.0",
   "dependencies": {
     "@fontsource/poppins": "^5.0.5",
+    "lazysizes": "^5.3.2",
     "oneloop.js": "^5.2.1"
   },
   "devDependencies": {
diff --git a/src/js/index.js b/src/js/index.js
index 65f0ae53..c2f085ac 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,3 +1,4 @@
+import 'lazysizes'
 import './classes/ScrollDirection'
 import './classes/ButtonSeoClick'
 import './classes/Header'
diff --git a/src/scss/04-utilities/_lazyload.scss b/src/scss/04-utilities/_lazyload.scss
new file mode 100644
index 00000000..075e5804
--- /dev/null
+++ b/src/scss/04-utilities/_lazyload.scss
@@ -0,0 +1,77 @@
+@use "../01-abstract/variables" as *;
+@use "sass:math";
+
+.lazyload,
+.lazyloading {
+	background: $color-grey-200;
+	opacity: 0;
+}
+
+.lazyloaded {
+	opacity: 1;
+	transition: opacity .5s;
+}
+
+// css loading for bgset items
+// with basicspinner
+$loading-dimensions: 50px;
+
+[data-bgset] {
+	position: relative;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: cover;
+	opacity: 1;
+
+	&::before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 2;
+		content: "";
+		background: $color-primary;
+		transition: opacity .5s, z-index .5s ease .5s;
+	}
+
+	&::after {
+		position: absolute;
+		top: calc(50% - #{math.div($loading-dimensions, 2)});
+		left: calc(50% - #{math.div($loading-dimensions, 2)});
+		z-index: 3;
+		width: $loading-dimensions;
+		height: $loading-dimensions;
+		content: "";
+		border: 5px solid $color-light;
+		border-top-color: transparent;
+		border-radius: $loading-dimensions;
+		opacity: 1;
+		transition: opacity .5s, z-index .5s ease .5s;
+		transform: translateX(-50%) translateY(-50%);
+		animation: loading .5s linear infinite;
+	}
+
+	&.lazyload {
+		opacity: 1;
+		transition: opacity .5s;
+	}
+
+	&.lazyloaded {
+		&::after,
+		&::before {
+			z-index: -1;
+			opacity: 0;
+		}
+	}
+}
+
+@keyframes loading {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
diff --git a/src/scss/editor.scss b/src/scss/editor.scss
index 25207cf4..6e86ec30 100644
--- a/src/scss/editor.scss
+++ b/src/scss/editor.scss
@@ -27,6 +27,7 @@ variables.$entry-file-name: "editor";
 
 @use "04-utilities/wp-admin-bar";
 @use "04-utilities/focus";
+@use "04-utilities/lazyload";
 @use "04-utilities/seo";
 @use "04-utilities/video-wrapper";
 @use "04-utilities/palette";
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 75d19422..4ee6e41e 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -31,6 +31,7 @@ variables.$entry-file-name: "style";
 
 @use "04-utilities/wp-admin-bar";
 @use "04-utilities/focus";
+@use "04-utilities/lazyload";
 @use "04-utilities/seo";
 @use "04-utilities/video-wrapper";
 @use "04-utilities/palette";
diff --git a/yarn.lock b/yarn.lock
index 60bcc8c9..dad57470 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2272,6 +2272,7 @@ __metadata:
     imagemin-jpegtran: "npm:^7.0.0"
     imagemin-optipng: "npm:^8.0.0"
     imagemin-svgo: "npm:^10.0.1"
+    lazysizes: "npm:^5.3.2"
     mini-css-extract-plugin: "npm:^1.5.0"
     oneloop.js: "npm:^5.2.1"
     postcss: "npm:^8.4.24"
@@ -6703,6 +6704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lazysizes@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "lazysizes@npm:5.3.2"
+  checksum: 10/15dfa1cc8bf8c3a4393014d411f161cb1df96ab0888a0776ba4dc34d45c6ba9c5d2b2eca22683c14dfeee552c67173cb9a512d640d3424d9910c0246e15c4edc
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"