feat(frontend): add unpic-img for image optimisation

https://unpic.pics/img/.

frontend/package.json

@@ -36,6 +36,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@unpic/svelte": "^0.0.53",
 		"open-props": "^1.7.5",
 		"openseadragon": "^4.1.1"
 	}

frontend/src/lib/config.js

@@ -8,3 +8,4 @@ export const url = dev ? 'http://localhost:5173/' : publicUrl;
 
 export const imageServer =
 	'https://apheleia.classics.ox.ac.uk/iipsrv/iipsrv.fcgi?IIIF=inscription_images/';
+export const imageThumbParams = 'full/400,/0/default.jpg';

frontend/src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import BaseLink from '$lib/components/BaseLink.svelte';
 	import * as config from '$lib/config';
+	import { Image } from '@unpic/svelte';
 	import { onMount } from 'svelte';
 
 	/** @type {import('./$types').PageData} */
@@ -117,11 +118,12 @@
 				<li>
 					{#if inscription.facsimile}
 						<BaseLink href="inscription/{inscription.file}">
-							<img
+							<Image
 								src="{config.imageServer}{inscription.file}/{inscription.facsimile
-									.url}/full/400,/0/default.jpg"
+									.url}/{config.imageThumbParams}"
 								alt={inscription.facsimile.desc}
-								loading="lazy"
+								width={400}
+								height={200}
 							/>
 						</BaseLink>
 					{/if}
@@ -237,10 +239,8 @@
 			}
 
 			& img {
-				/* the height should be 200 */
-				height: 200px;
-				object-fit: cover;
-				width: 100%;
+				font-size: var(--font-size-1);
+				text-align: center;
 			}
 		}
 	}