diff --git a/app/assets/css/skills.css b/app/assets/css/skills.css
index cfc78ee..f523d1f 100644
--- a/app/assets/css/skills.css
+++ b/app/assets/css/skills.css
@@ -61,6 +61,7 @@
 
         & .image-container img {
             width: 100%;
+            height: auto;
         }
     }
 }
\ No newline at end of file
diff --git a/app/components/SkillsEasy.vue b/app/components/SkillsEasy.vue
index 897d92d..b63b69d 100644
--- a/app/components/SkillsEasy.vue
+++ b/app/components/SkillsEasy.vue
@@ -5,7 +5,15 @@
     <div class="skill-container flex-col margin-top gap-default">
       <article class="skill-card z-2 card gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
         <div class="image-container">
-          <img :src="skill.img" alt="" class="card-img z-4" />
+          <img
+              loading="lazy"
+              width="550"
+              height="350"
+              :srcset="[skill.img('1x', true), skill.img('2x', true), skill.img('3x', true)].join(', ')"
+              :src="skill.img('1x', false)"
+              aria-hidden="true"
+              alt=""
+          />
         </div>
         <div class="text-container flex-col gap-default">
           <h3>{{skill.title}}</h3>
@@ -30,14 +38,16 @@
 import type { RichText } from './RichText/Types'
 
 type Skill = {
-  img: string
+  img: Function
   title: string
   text: RichText[]
 }
 
+const getExplanationImage = (img : string) => getImage('/img/explanations/', img)
+
 const skills : Skill[] = [
   {
-    img: 'https://picsum.photos/550/350.webp?random=1',
+    img: getExplanationImage('components'),
     title: 'Das, was du sehen kannst',
     text: [
       {
@@ -90,7 +100,7 @@ const skills : Skill[] = [
       },
     ],
   }, {
-    img: 'https://picsum.photos/550/350.webp?random=2',
+    img: getExplanationImage('components'),
     title: 'Da, wo du eintragen kannst',
     text: [
       {
@@ -191,7 +201,7 @@ const skills : Skill[] = [
       },
     ],
   }, {
-    img: 'https://picsum.photos/550/350.webp?random=3',
+    img: getExplanationImage('components'),
     title: 'Was dabei am Ende rauskommt',
     text: [
       {
diff --git a/public/img/explanations/components@1x.webp b/public/img/explanations/components@1x.webp
new file mode 100644
index 0000000..1af52c2
Binary files /dev/null and b/public/img/explanations/components@1x.webp differ
diff --git a/public/img/explanations/components@2x.webp b/public/img/explanations/components@2x.webp
new file mode 100644
index 0000000..5b386ff
Binary files /dev/null and b/public/img/explanations/components@2x.webp differ
diff --git a/public/img/explanations/components@3x.webp b/public/img/explanations/components@3x.webp
new file mode 100644
index 0000000..8d5f9c9
Binary files /dev/null and b/public/img/explanations/components@3x.webp differ