feat(image): enhance image handling with focal points and responsive support

- Added support for extracting focal points and alt text from CMS image fields.
- Introduced responsive image handling in TopBanner component, allowing for AVIF/WebP sources and LQIP placeholders.
- Updated image transformation functions to accommodate focal point parameters for better cropping.
- Refactored image URL resolution logic across various components and routes to utilize new image field structure.

src/lib/image-cache.server.ts

@@ -27,6 +27,8 @@ export interface ImageTransformParams {
   format?: string;
   fit?: string;
   ar?: string;
+  fx?: number;
+  fy?: number;
 }
 
 const memoryCache = new Map<string, CachedImage>();
@@ -45,6 +47,10 @@ function ensureCacheDir(): string {
  * Deterministischer Cache-Key aus src + allen Transform-Parametern.
  * Gleiche Eingabe = gleicher Key, unabhängig von Reihenfolge.
  */
+function roundFocal(v: number): number {
+  return Math.round(v * 10000) / 10000;
+}
+
 export function buildCacheKey(src: string, params: ImageTransformParams): string {
   const parts = [src];
   if (params.w != null) parts.push(`w=${params.w}`);
@@ -53,6 +59,8 @@ export function buildCacheKey(src: string, params: ImageTransformParams): string
   if (params.format) parts.push(`f=${params.format}`);
   if (params.fit) parts.push(`fit=${params.fit}`);
   if (params.ar) parts.push(`ar=${params.ar}`);
+  if (params.fx != null) parts.push(`fx=${roundFocal(params.fx)}`);
+  if (params.fy != null) parts.push(`fy=${roundFocal(params.fy)}`);
   return createHash('sha256').update(parts.join('|')).digest('hex').slice(0, 16);
 }