feat(image): enhance image handling with new properties and responsive support

- Updated PostEntry type to include _rawImageUrl and _imageFocal for improved image management.
- Refactored image handling in various components to utilize the new properties, ensuring better focal point support and responsive image rendering.
- Introduced warmResponsiveImage function for pre-fetching image variants to optimize loading performance.
- Replaced CmsImage component with RustyImage in multiple blocks for consistent image processing.

src/routes/[...slug]/+page.server.ts

@@ -5,7 +5,7 @@ import {
   resolveContentImages,
   resolveImageUrls,
 } from '$lib/rusty-image';
-import { buildResponsiveImage, type ResponsiveImage } from '$lib/rusty-image.server';
+import { buildResponsiveImage, warmResponsiveImage, type ResponsiveImage } from '$lib/rusty-image.server';
 import {
   resolvePostOverviewBlocks,
   resolveSearchableTextBlocks,
@@ -14,14 +14,15 @@ import {
 import { PAGE_RESOLVE } from '$lib/constants';
 import { error } from '@sveltejs/kit';
 
-const BANNER_WIDTHS = [640, 960, 1280, 1600, 1920, 2400];
+const BANNER_WIDTHS = [640, 960, 1280, 1600, 1920];
+const BANNER_AR = '16/9';
 
 function focalToCss(focal: { x: number; y: number } | undefined): string | null {
   if (!focal) return null;
   return `${(focal.x * 100).toFixed(2)}% ${(focal.y * 100).toFixed(2)}%`;
 }
 
-export const load: PageServerLoad = async ({ params, locals }) => {
+export const load: PageServerLoad = async ({ params, locals, fetch }) => {
   const { slug } = params;
   const translations = locals.translations ?? {};
 
@@ -56,9 +57,9 @@ export const load: PageServerLoad = async ({ params, locals }) => {
         topBannerFocalCss = focalToCss(primary.focal);
         topBannerResponsive = await buildResponsiveImage(primary.url, {
           widths: BANNER_WIDTHS,
-          fit: 'contain',
-          formats: ['avif', 'webp', 'jpeg'],
-          quality: 78,
+          fit: 'cover',
+          ar: BANNER_AR,
+          quality: 72,
           focal: primary.focal,
         });
       }
@@ -68,6 +69,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
         fit: 'cover',
         format: 'webp',
       });
+      warmResponsiveImage(topBannerResponsive, fetch);
     }
   }