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/routes/post/[slug]/+page.server.ts

@@ -9,7 +9,7 @@ import {
   resolvePostTagsInPost,
   resolvePostOverviewBlocks,
   resolveSearchableTextBlocks,
-  getPostImageUrl,
+  getPostImageField,
   formatPostDate,
 } from '$lib/blog-utils';
 import { POST_RESOLVE } from '$lib/constants';
@@ -36,12 +36,14 @@ export const load: PageServerLoad = async ({ params, locals, url }) => {
   await resolveSearchableTextBlocks(post, tagsMap);
   resolvePostTagsInPost(post, tagsMap);
 
-  const rawPostImageUrl = getPostImageUrl(post.postImage);
-  const postImageUrl = rawPostImageUrl
-    ? await ensureTransformedImage(rawPostImageUrl, {
+  const postImageField = getPostImageField(post.postImage);
+  const postImageUrl = postImageField
+    ? await ensureTransformedImage(postImageField.url, {
         width: 150,
         height: 200,
         fit: 'cover',
+        focalX: postImageField.focal?.x,
+        focalY: postImageField.focal?.y,
       })
     : null;