recipes: preload hero images with high priority

Add fetchpriority="high" and <link rel="preload"> hints to hero images
on both the recipe listing and detail pages. Also prefetch the full-size
hero image on card hover via new Image() to warm the cache before navigation.

src/lib/components/recipes/Card.svelte

@@ -38,6 +38,10 @@ const img_alt = $derived(
 );
 
 const img_color = $derived(recipe.images?.[0]?.color || '');
+
+function preloadHeroImage() {
+	new Image().src = `https://bocken.org/static/rezepte/full/${img_name}`;
+}
 </script>
 <style>
 .card-main-link {
@@ -226,7 +230,7 @@ const img_color = $derived(recipe.images?.[0]?.color || '');
 </style>
 
 <div class="card" class:search_me={search} class:margin_right={do_margin_right} data-tags="[{recipe.tags}]">
-	<a href="{routePrefix}/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}">
+	<a href="{routePrefix}/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}" onpointerenter={preloadHeroImage}>
 		<span class="visually-hidden">View recipe: {recipe.name}</span>
 	</a>
 	<div class="card-image" style:background-color={img_color}>

src/lib/components/recipes/TitleImgParallax.svelte

@@ -145,7 +145,7 @@ dialog button{
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
     	<div class:zoom-in={!isredirected} onclick={show_dialog_img}>
 		<div class="image-wrap" style:background-color={color}>
-			<img class="image" {src} {alt} style:view-transition-name={transitionName || null}/>
+			<img class="image" {src} {alt} style:view-transition-name={transitionName || null} fetchpriority="high"/>
 		</div>
 		<noscript>
 			<div class="image-wrap" style:background-color={color}>