perf(img): Add loading and fetchpriority attributes to relevant images

Author: jackdomleo7

app/components/ArticleList.vue

@@ -10,7 +10,7 @@
             <p v-if="props.suggested.titles.includes(item.title)" class="post__banner">Suggested</p>
             <picture class="post__img">
               <source :srcset="`${item.path}/cover_image.webp`" type="image/webp">
-              <img :src="`${item.path}/cover_image.webp`" alt="" width="424" height="223" :loading="index <= props.preloadArticleImages ? 'eager' : 'lazy'" />
+              <img :src="`${item.path}/cover_image.webp`" alt="" width="424" height="223" :loading="index <= props.preloadArticleImages ? 'eager' : 'lazy'" :fetchpriority="index <= props.preloadArticleImages ? 'high' : 'low'" />
             </picture>
             <div class="post__details">
               <ul class="post__tags">

app/components/ProjectList.vue

@@ -4,7 +4,7 @@
       <component :is="project.isUrlDeactivated ? 'div' : defineNuxtLink({})" :to="project.isUrlDeactivated ? undefined : project.url" class="project" :target="project.isUrlDeactivated ? undefined : '_blank'">
         <picture class="project__img">
           <source :srcset="project.image" :type="`image/${project.image.split('.').pop()}`">
-          <img :src="project.image" alt="" width="424" height="223" :loading="index <= props.preloadProjectImages ? 'eager' : 'lazy'" />
+          <img :src="project.image" alt="" width="424" height="223" :loading="index <= props.preloadProjectImages ? 'eager' : 'lazy'" :fetchpriority="index <= props.preloadProjectImages ? 'high' : 'low'" />
         </picture>
         <div class="project__details">
           <ul class="project__tags">

app/pages/blog/[year]/[slug].vue

@@ -6,7 +6,7 @@
       </header>
       <picture class="article__img">
         <source :srcset="cover_image" type="image/webp">
-        <img :src="cover_image" alt="" width="768" height="403" loading="eager" />
+        <img :src="cover_image" alt="" width="768" height="403" loading="eager" fetchpriority="high" />
       </picture>
       <ul class="article__tags">
         <li v-for="tag in article.tags" :key="tag" class="tag">

app/pages/index.vue

@@ -5,7 +5,7 @@
         <div class="hero__row">
           <picture class="hero__img">
             <source srcset="/me.webp" type="image/webp">
-            <img src="/me.webp" alt="Jack Domleo portrait" height="300" width="300" loading="eager" />
+            <img src="/me.webp" alt="Jack Domleo portrait" height="300" width="300" loading="eager" fetchpriority="high" />
           </picture>
           <h1 class="hero__title">Jack Domleo</h1>
         </div>
@@ -17,7 +17,7 @@
         <div class="about__img">
           <picture>
             <source srcset="/me.webp" type="image/webp">
-            <img src="/me.webp" alt="Jack Domleo portrait" height="440" width="440" loading="lazy" />
+            <img src="/me.webp" alt="Jack Domleo portrait" height="440" width="440" loading="lazy" fetchpriority="low" />
           </picture>
         </div>
         <h2 class="about__header">About me</h2>

app/pages/work.vue

@@ -8,7 +8,7 @@
       <ol class="work__places">
         <li class="place">
           <div class="place__details">
-            <img src="/work/ocean-finance-logo.webp" alt="Ocean Finance" height="80" width="80" class="place__logo" />
+            <img src="/work/ocean-finance-logo.webp" alt="Ocean Finance" height="80" width="80" class="place__logo" loading="eager" fetchpriority="high" />
             <h2 class="place__name">Ocean Finance</h2>
             <p class="place__duration">February 2021 - present</p>
           </div>
@@ -65,7 +65,7 @@
         </li>
         <li class="place">
           <div class="place__details">
-            <img src="/work/mitrefinch-logo.webp" alt="Mitrefinch" height="80" width="80" class="place__logo" />
+            <img src="/work/mitrefinch-logo.webp" alt="Mitrefinch" height="80" width="80" class="place__logo" loading="lazy" fetchpriority="low" />
             <h2 class="place__name">Mitrefinch</h2>
             <p class="place__duration">March 2019 - February 2021</p>
           </div>
@@ -117,7 +117,7 @@
         </li>
         <li class="place">
           <div class="place__details">
-            <img src="/work/flybmi-logo.webp" alt="flybmi" height="80" width="80" class="place__logo" />
+            <img src="/work/flybmi-logo.webp" alt="flybmi" height="80" width="80" class="place__logo" loading="lazy" fetchpriority="low" />
             <h2 class="place__name">flybmi</h2>
             <p class="place__duration">September 2018 - February 2019</p>
           </div>