Add unstable_getImgProps export from next/image (#51205)

### Description 

This PR refactors the Image component so that the core logic can be consolidated into a single function.

This allows usage outside of `<Image>`, such as:

1. Working with [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) or [`image-set`](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set)
2. Working with canvas [`context.drawImage()`](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images) or simply `new Image()`
3. Working with [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) media queries to implement Art Direction or Light/Dark Mode images

### Example

```tsx
import { unstable_getImgProps as getImgProps } from 'next/image'

export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 }
  const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/dark.png' })
  const { props: { srcSet: light, ...rest } } = getImgProps({ ...common, src: '/light.png' })

  return (<picture>
  <source media="(prefers-color-scheme: dark)" srcSet={dark} />
  <source media="(prefers-color-scheme: light)" srcSet={light} />
  <img {...rest} />
</picture>)
}
```

### Related

fix NEXT-257

Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>

packages/next/image-types/global.d.ts

@@ -2,7 +2,7 @@
 // if the static image import handling is enabled
 
 declare module '*.png' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }
@@ -19,43 +19,43 @@ declare module '*.svg' {
 }
 
 declare module '*.jpg' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }
 
 declare module '*.jpeg' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }
 
 declare module '*.gif' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }
 
 declare module '*.webp' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }
 
 declare module '*.avif' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }
 
 declare module '*.ico' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }
 
 declare module '*.bmp' {
-  const content: import('../dist/client/image').StaticImageData
+  const content: import('../dist/shared/lib/image-external').StaticImageData
 
   export default content
 }

packages/next/image.d.ts

@@ -1,3 +1,3 @@
-import Image from './dist/client/image'
-export * from './dist/client/image'
+import Image from './dist/shared/lib/image-external'
+export * from './dist/shared/lib/image-external'
 export default Image

packages/next/image.js

@@ -1 +1 @@
-module.exports = require('./dist/client/image')
+module.exports = require('./dist/shared/lib/image-external')

packages/next/src/build/webpack-config.ts

@@ -1103,8 +1103,8 @@ export default async function getBaseWebpackConfig(
               'next/dist/esm/server/web/exports/index',
             [`${NEXT_PROJECT_ROOT}/dist/client/link`]:
               'next/dist/esm/client/link',
-            [`${NEXT_PROJECT_ROOT}/dist/client/image`]:
-              'next/dist/esm/client/image',
+            [`${NEXT_PROJECT_ROOT}/dist/shared/lib/image-external`]:
+              'next/dist/esm/shared/lib/image-external',
             [`${NEXT_PROJECT_ROOT}/dist/client/script`]:
               'next/dist/esm/client/script',
             [`${NEXT_PROJECT_ROOT}/dist/client/router`]:
@@ -1403,7 +1403,7 @@ export default async function getBaseWebpackConfig(
       }
 
       const isNextExternal =
-        /next[/\\]dist[/\\](esm[\\/])?(shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic|app-dynamic|lazy-dynamic|head[^-]))/.test(
+        /next[/\\]dist[/\\](esm[\\/])?(shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic|app-dynamic|image-external|lazy-dynamic|head[^-]))/.test(
           localRes
         )
 

packages/next/src/build/webpack/loaders/next-image-loader/blur.ts

@@ -3,7 +3,7 @@ import { optimizeImage } from '../../../../server/image-optimizer'
 
 const BLUR_IMG_SIZE = 8
 const BLUR_QUALITY = 70
-const VALID_BLUR_EXT = ['jpeg', 'png', 'webp', 'avif'] // should match next/client/image.tsx
+const VALID_BLUR_EXT = ['jpeg', 'png', 'webp', 'avif'] // should match other usages
 
 export async function getBlurImage(
   content: Buffer,