Add Netlify Image CDN processing for blog social media images

Process blog header images through Netlify Image CDN to optimize them for social media sharing. Images are automatically resized to 1200x630px (the standard og:image dimensions), converted to JPG format, and quality-optimized to ensure fast loading and proper display across all social platforms.

Benefits:
- Consistent 1200x630 dimensions for all platforms (Facebook, Twitter, LinkedIn)
- Optimized file size with 80% quality JPG output
- Proper aspect ratio with cover fit mode
- Faster page preview generation on social media

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: KyleAMathews

src/routes/_libraries/blog.$.tsx

@@ -69,15 +69,22 @@ export const Route = createFileRoute('/_libraries/blog/$')({
   staleTime: Infinity,
   loader: ({ params }) => fetchBlogPost({ data: params._splat }),
   head: ({ loaderData }) => {
+    // Generate optimized social media image URL using Netlify Image CDN
+    const getSocialImageUrl = (headerImage?: string) => {
+      if (!headerImage) return undefined
+
+      // Use Netlify Image CDN to optimize for social media (1200x630 is the standard for og:image)
+      const netlifyImageUrl = `https://tanstack.com/.netlify/images?url=${encodeURIComponent(headerImage)}&w=1200&h=630&fit=cover&fm=jpg&q=80`
+      return netlifyImageUrl
+    }
+
     return {
       meta: loaderData
         ? [
             ...seo({
               title: `${loaderData?.title ?? 'Docs'} | TanStack Blog`,
               description: loaderData?.description,
-              image: loaderData?.headerImage
-                ? `https://tanstack.com${loaderData.headerImage}`
-                : undefined,
+              image: getSocialImageUrl(loaderData?.headerImage),
             }),
             {
               name: 'author',