perf(img): Optimise images and use webp where possible

Author: jackdomleo7

app/components/ArticleList.vue

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

app/components/ProjectList.vue

@@ -46,14 +46,14 @@ const projects: Project[] = [{
   type: 'mini',
   url: 'https://which-media-queries.jackdomleo.dev',
   description: 'A simple web app to detect the values of media queries on your device to be viewed at a glance.',
-  image: '/projects/which-media-queries.png',
+  image: '/projects/which-media-queries.webp',
   tech: ['JavaScript']
 },{
   name: 'Grassverse NFT <small>grassverse.org</small>',
   type: 'client',
   url: 'https://www.grassverse.org',
   description: 'This website came with pre-existing designs and includes a CMS and an account section for Grassverse asset owners to log in to view their assets and fellow owners of assets.',
-  image: '/projects/grassverse-nft.png',
+  image: '/projects/grassverse-nft.webp',
   tech: ['Nuxt 2', 'Web3', 'TypeScript'],
   isUrlDeactivated: true
 },{
@@ -68,15 +68,15 @@ const projects: Project[] = [{
   type: 'client',
   url: 'https://www.madparrotcrew.com',
   description: 'Created a fully responsive minting website based on existing designs for the Mad Parrot Crew NFT.',
-  image: '/projects/mad-parrot-crew-nft.png',
+  image: '/projects/mad-parrot-crew-nft.webp',
   tech: ['Nuxt 2', 'Web3', 'TypeScript'],
   isUrlDeactivated: true
 },{
   name: 'Spring Clean Twitter Bot',
   type: 'project',
   url: 'https://github.com/jackdomleo7/Spring_Clean_Twitter_Bot',
   description: 'A Twitter bot to automatically clean up my Twitter account.',
-  image: '/projects/spring-clean-twitter-bot.png',
+  image: '/projects/spring-clean-twitter-bot.webp',
   tech: ['TypeScript', 'Twitter API', 'CRON']
 },{
   name: 'Colour Theme Watcher & Switcher',
@@ -90,14 +90,14 @@ const projects: Project[] = [{
   type: 'project',
   url: 'https://checka11y.jackdomleo.dev',
   description: 'A CSS stylesheet to quickly highlight a11y concerns and a really good education project for those wanting to learn about accessibility.',
-  image: '/projects/checka11y.css.png',
+  image: '/projects/checka11y.css.webp',
   tech: ['SCSS', 'Cypress']
 },{
   name: 'Cooltipz.css',
   type: 'project',
   url: 'https://cooltipz.jackdomleo.dev',
   description: 'A pure CSS solution for adding highly customisable, accessible tooltips to HTML.',
-  image: '/projects/cooltipz.css.png',
+  image: '/projects/cooltipz.css.webp',
   tech: ['SCSS']
 },{
   name: 'Custom Car Colour Preview',
@@ -118,42 +118,42 @@ const projects: Project[] = [{
   type: 'mini',
   url: 'https://codepen.io/jackdomleo7/full/abvrgEo',
   description: "A pure CSS pixel-perfect Union Jack flag.",
-  image: '/projects/css-union-jack-flag.png',
+  image: '/projects/css-union-jack-flag.webp',
   tech: ['SCSS']
 },{
   name: 'TMD Interior Projects & Building Services Ltd <small>tmdip.co.uk</small>',
   type: 'client',
   url: 'https://github.com/jackdomleo7/tmdip.co.uk',
   description: "Designed and built a fully responsive static website for a small shop-fitting & interior design company. This website needed a modern but minimal feel to it so they could clearly get their message across to visitors. Unfortunately, the company closed in October 2021.",
-  image: '/projects/tmdip-interiors.png',
+  image: '/projects/tmdip-interiors.webp',
   tech: ['Nuxt 2', 'TypeScript', 'Prismic']
 },{
   name: 'Neumorphic Design Elements',
   type: 'mini',
   url: 'https://codepen.io/jackdomleo7/full/mdeowoz',
   description: 'Some common UI elements in the style of neumorphic design.',
-  image: '/projects/neumorphic-design-elements.png',
+  image: '/projects/neumorphic-design-elements.webp',
   tech: ['SCSS']
 },{
   name: 'Jumping into Lightspeed',
   type: 'mini',
   url: 'https://codepen.io/jackdomleo7/full/rNOYdwz',
   description: "A mini animation demonstrating Star Wars lightspeed using HTML, CSS & JS.",
-  image: '/projects/lightspeed.png',
+  image: '/projects/lightspeed.webp',
   tech: ['JavaScript', 'CSS']
 },{
   name: 'Pixel Art R2-D2',
   type: 'mini',
   url: 'https://codepen.io/jackdomleo7/full/ZEEqdxy',
   description: "A pure CSS, single div pixel art of the beloved Star Wars droid, R2-D2.",
-  image: '/projects/pixel-art-r2d2.png',
+  image: '/projects/pixel-art-r2d2.webp',
   tech: ['CSS']
 },{
   name: 'My website <small>jackdomleo.dev</small>',
   type: 'project',
   url: '/',
   description: 'Designed and built a fully responsive static website and blog for myself. This has been through many design variations as my UI skills have developed.',
-  image: '/projects/jackdomleo.dev.png',
+  image: '/projects/jackdomleo.dev.webp',
   tech: ['Nuxt 4', 'TypeScript', 'SCSS']
 }];
 

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

@@ -5,7 +5,7 @@
         <h1 class="article__title">{{ article.title }}</h1>
       </header>
       <picture class="article__img">
-        <source :srcset="cover_image" type="image/jpg">
+        <source :srcset="cover_image" type="image/webp">
         <img :src="cover_image" alt="" width="768" height="403" loading="eager" />
       </picture>
       <ul class="article__tags">
@@ -77,7 +77,7 @@ if (!article.value) {
     statusMessage: 'Page not found'
   })
 }
-const cover_image = `${article.value.path}/cover_image.jpg`
+const cover_image = `${article.value.path}/cover_image.webp`
 
 function copyLink() {
   navigator.clipboard.writeText(`${config.public.BASE_URL}${article.value!.path}`)
@@ -100,6 +100,7 @@ useSeoMeta({
   title: `${article.value.title} | Blog`,
   description: article.value.description,
   ogImage: cover_image,
+  // ogImageType: 'image/webp', // TODO: OG doesn't support webp. Can I automatically convert to png somehow?
   twitterImage: cover_image,
   ogType: 'article',
   articleAuthor: ['Jack Domleo'],

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.png" 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" />
             <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.jpg" alt="Mitrefinch" height="80" width="80" class="place__logo" />
+            <img src="/work/mitrefinch-logo.webp" alt="Mitrefinch" height="80" width="80" class="place__logo" />
             <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.png" alt="flybmi" height="80" width="80" class="place__logo" />
+            <img src="/work/flybmi-logo.webp" alt="flybmi" height="80" width="80" class="place__logo" />
             <h2 class="place__name">flybmi</h2>
             <p class="place__duration">September 2018 - February 2019</p>
           </div>