ADD: Components image for explanation

Added HiDPI image for components explanation in easy explained skills

app/assets/css/skills.css

@@ -61,6 +61,7 @@
 
         & .image-container img {
             width: 100%;
+            height: auto;
         }
     }
 }

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: [
       {