Skip to content

Commit 0a719ba

Browse files
committed
perf(img): Optimise images and use webp where possible
1 parent e858cc8 commit 0a719ba

40 files changed

Lines changed: 20 additions & 19 deletions

app/components/ArticleList.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<article class="post__article">
1010
<p v-if="props.suggested.titles.includes(item.title)" class="post__banner">Suggested</p>
1111
<picture class="post__img">
12-
<source :srcset="`${item.path}/cover_image.jpg`" type="image/jpg">
13-
<img :src="`${item.path}/cover_image.jpg`" alt="" width="424" height="223" :loading="index <= props.preloadArticleImages ? 'eager' : 'lazy'" />
12+
<source :srcset="`${item.path}/cover_image.webp`" type="image/webp">
13+
<img :src="`${item.path}/cover_image.webp`" alt="" width="424" height="223" :loading="index <= props.preloadArticleImages ? 'eager' : 'lazy'" />
1414
</picture>
1515
<div class="post__details">
1616
<ul class="post__tags">

app/components/ProjectList.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ const projects: Project[] = [{
4646
type: 'mini',
4747
url: 'https://which-media-queries.jackdomleo.dev',
4848
description: 'A simple web app to detect the values of media queries on your device to be viewed at a glance.',
49-
image: '/projects/which-media-queries.png',
49+
image: '/projects/which-media-queries.webp',
5050
tech: ['JavaScript']
5151
},{
5252
name: 'Grassverse NFT <small>grassverse.org</small>',
5353
type: 'client',
5454
url: 'https://www.grassverse.org',
5555
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.',
56-
image: '/projects/grassverse-nft.png',
56+
image: '/projects/grassverse-nft.webp',
5757
tech: ['Nuxt 2', 'Web3', 'TypeScript'],
5858
isUrlDeactivated: true
5959
},{
@@ -68,15 +68,15 @@ const projects: Project[] = [{
6868
type: 'client',
6969
url: 'https://www.madparrotcrew.com',
7070
description: 'Created a fully responsive minting website based on existing designs for the Mad Parrot Crew NFT.',
71-
image: '/projects/mad-parrot-crew-nft.png',
71+
image: '/projects/mad-parrot-crew-nft.webp',
7272
tech: ['Nuxt 2', 'Web3', 'TypeScript'],
7373
isUrlDeactivated: true
7474
},{
7575
name: 'Spring Clean Twitter Bot',
7676
type: 'project',
7777
url: 'https://github.com/jackdomleo7/Spring_Clean_Twitter_Bot',
7878
description: 'A Twitter bot to automatically clean up my Twitter account.',
79-
image: '/projects/spring-clean-twitter-bot.png',
79+
image: '/projects/spring-clean-twitter-bot.webp',
8080
tech: ['TypeScript', 'Twitter API', 'CRON']
8181
},{
8282
name: 'Colour Theme Watcher & Switcher',
@@ -90,14 +90,14 @@ const projects: Project[] = [{
9090
type: 'project',
9191
url: 'https://checka11y.jackdomleo.dev',
9292
description: 'A CSS stylesheet to quickly highlight a11y concerns and a really good education project for those wanting to learn about accessibility.',
93-
image: '/projects/checka11y.css.png',
93+
image: '/projects/checka11y.css.webp',
9494
tech: ['SCSS', 'Cypress']
9595
},{
9696
name: 'Cooltipz.css',
9797
type: 'project',
9898
url: 'https://cooltipz.jackdomleo.dev',
9999
description: 'A pure CSS solution for adding highly customisable, accessible tooltips to HTML.',
100-
image: '/projects/cooltipz.css.png',
100+
image: '/projects/cooltipz.css.webp',
101101
tech: ['SCSS']
102102
},{
103103
name: 'Custom Car Colour Preview',
@@ -118,42 +118,42 @@ const projects: Project[] = [{
118118
type: 'mini',
119119
url: 'https://codepen.io/jackdomleo7/full/abvrgEo',
120120
description: "A pure CSS pixel-perfect Union Jack flag.",
121-
image: '/projects/css-union-jack-flag.png',
121+
image: '/projects/css-union-jack-flag.webp',
122122
tech: ['SCSS']
123123
},{
124124
name: 'TMD Interior Projects & Building Services Ltd <small>tmdip.co.uk</small>',
125125
type: 'client',
126126
url: 'https://github.com/jackdomleo7/tmdip.co.uk',
127127
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.",
128-
image: '/projects/tmdip-interiors.png',
128+
image: '/projects/tmdip-interiors.webp',
129129
tech: ['Nuxt 2', 'TypeScript', 'Prismic']
130130
},{
131131
name: 'Neumorphic Design Elements',
132132
type: 'mini',
133133
url: 'https://codepen.io/jackdomleo7/full/mdeowoz',
134134
description: 'Some common UI elements in the style of neumorphic design.',
135-
image: '/projects/neumorphic-design-elements.png',
135+
image: '/projects/neumorphic-design-elements.webp',
136136
tech: ['SCSS']
137137
},{
138138
name: 'Jumping into Lightspeed',
139139
type: 'mini',
140140
url: 'https://codepen.io/jackdomleo7/full/rNOYdwz',
141141
description: "A mini animation demonstrating Star Wars lightspeed using HTML, CSS & JS.",
142-
image: '/projects/lightspeed.png',
142+
image: '/projects/lightspeed.webp',
143143
tech: ['JavaScript', 'CSS']
144144
},{
145145
name: 'Pixel Art R2-D2',
146146
type: 'mini',
147147
url: 'https://codepen.io/jackdomleo7/full/ZEEqdxy',
148148
description: "A pure CSS, single div pixel art of the beloved Star Wars droid, R2-D2.",
149-
image: '/projects/pixel-art-r2d2.png',
149+
image: '/projects/pixel-art-r2d2.webp',
150150
tech: ['CSS']
151151
},{
152152
name: 'My website <small>jackdomleo.dev</small>',
153153
type: 'project',
154154
url: '/',
155155
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.',
156-
image: '/projects/jackdomleo.dev.png',
156+
image: '/projects/jackdomleo.dev.webp',
157157
tech: ['Nuxt 4', 'TypeScript', 'SCSS']
158158
}];
159159

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<h1 class="article__title">{{ article.title }}</h1>
66
</header>
77
<picture class="article__img">
8-
<source :srcset="cover_image" type="image/jpg">
8+
<source :srcset="cover_image" type="image/webp">
99
<img :src="cover_image" alt="" width="768" height="403" loading="eager" />
1010
</picture>
1111
<ul class="article__tags">
@@ -77,7 +77,7 @@ if (!article.value) {
7777
statusMessage: 'Page not found'
7878
})
7979
}
80-
const cover_image = `${article.value.path}/cover_image.jpg`
80+
const cover_image = `${article.value.path}/cover_image.webp`
8181
8282
function copyLink() {
8383
navigator.clipboard.writeText(`${config.public.BASE_URL}${article.value!.path}`)
@@ -100,6 +100,7 @@ useSeoMeta({
100100
title: `${article.value.title} | Blog`,
101101
description: article.value.description,
102102
ogImage: cover_image,
103+
// ogImageType: 'image/webp', // TODO: OG doesn't support webp. Can I automatically convert to png somehow?
103104
twitterImage: cover_image,
104105
ogType: 'article',
105106
articleAuthor: ['Jack Domleo'],

app/pages/work.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<ol class="work__places">
99
<li class="place">
1010
<div class="place__details">
11-
<img src="/work/ocean-finance-logo.png" alt="Ocean Finance" height="80" width="80" class="place__logo" />
11+
<img src="/work/ocean-finance-logo.webp" alt="Ocean Finance" height="80" width="80" class="place__logo" />
1212
<h2 class="place__name">Ocean Finance</h2>
1313
<p class="place__duration">February 2021 - present</p>
1414
</div>
@@ -65,7 +65,7 @@
6565
</li>
6666
<li class="place">
6767
<div class="place__details">
68-
<img src="/work/mitrefinch-logo.jpg" alt="Mitrefinch" height="80" width="80" class="place__logo" />
68+
<img src="/work/mitrefinch-logo.webp" alt="Mitrefinch" height="80" width="80" class="place__logo" />
6969
<h2 class="place__name">Mitrefinch</h2>
7070
<p class="place__duration">March 2019 - February 2021</p>
7171
</div>
@@ -117,7 +117,7 @@
117117
</li>
118118
<li class="place">
119119
<div class="place__details">
120-
<img src="/work/flybmi-logo.png" alt="flybmi" height="80" width="80" class="place__logo" />
120+
<img src="/work/flybmi-logo.webp" alt="flybmi" height="80" width="80" class="place__logo" />
121121
<h2 class="place__name">flybmi</h2>
122122
<p class="place__duration">September 2018 - February 2019</p>
123123
</div>
-275 KB
Binary file not shown.
78.2 KB
Loading
-150 KB
Binary file not shown.
40.5 KB
Loading

public/icon.png

-448 Bytes
Loading

public/og.png

-457 Bytes
Loading

0 commit comments

Comments
 (0)