feat: 🚀 New feature getOptimizedImageProps implemented

✅Closes: #822

__tests__/e2e/app/page.jsx

@@ -7,6 +7,7 @@ import ClientComponent from '../components/ClientComponent'
 
 import imgSrc from '../images/img.png'
 import legacyImgSrc from '../images/legacy-img.png'
+import WithPropsComponent from '../components/WithPropsComponent'
 
 export default function IndexPage() {
   return (
@@ -19,6 +20,9 @@ export default function IndexPage() {
         {/* Static image */}
         <Image src="/images/img.png" width={1920} height={1280} sizes="(min-width: 768px) 720px, 85vw" alt="" />
 
+        {/* Image with props */}
+        <WithPropsComponent />
+
         {/* Invalid format image */}
         <Image src="/images/img.svg" width={1920} height={1280} alt="" />
 

__tests__/e2e/components/WithPropsComponent.jsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+import { getOptimizedImageProps } from '../../../image'
+
+import getPropsSrc from '../images/get-props.png'
+import getPropsMobileSrc from '../images/get-props-mobile.png'
+
+const WithPropsComponent = () => {
+  const props = getOptimizedImageProps({ src: getPropsSrc, alt: '' }).props
+  const mobileProps = getOptimizedImageProps({ src: getPropsMobileSrc, alt: '' }).props
+
+  return (
+    <div>
+      <img {...props} />
+      <div
+        style={{
+          backgroundImage: `url(${props.src})`,
+          width: props.width,
+          height: props.height,
+        }}
+      ></div>
+      <picture>
+        <source
+          srcSet={mobileProps.srcSet}
+          width={mobileProps.width}
+          height={mobileProps.height}
+          media="(max-width: 768px)"
+        />
+        <img {...props} />
+      </picture>
+    </div>
+  )
+}
+
+export default WithPropsComponent

__tests__/e2e/index.test.ts

@@ -10,6 +10,8 @@ const files = [
 
   // next/image
   '_next/static/media/img.8a5ad2fe_[width].avif',
+  '_next/static/media/get-props.8a5ad2fe_[width].avif',
+  '_next/static/media/get-props-mobile.7d5f5264_[width].avif',
   'images/img_[width].avif',
   'id/237/200/300_[width].avif',
   'id/238/200/300_[width].avif',
@@ -23,6 +25,8 @@ const files = [
 
   // next/image
   '_next/static/media/img.8a5ad2fe_[width].webp',
+  '_next/static/media/get-props.8a5ad2fe_[width].webp',
+  '_next/static/media/get-props-mobile.7d5f5264_[width].webp',
   'images/img_[width].webp',
   'id/237/200/300_[width].webp',
   'id/238/200/300_[width].webp',
@@ -36,6 +40,8 @@ const files = [
 
   // next/image
   '_next/static/media/img.8a5ad2fe_[width].png',
+  '_next/static/media/get-props.8a5ad2fe_[width].png',
+  '_next/static/media/get-props-mobile.7d5f5264_[width].png',
   'images/img_[width].png',
   'id/237/200/300_[width].jpg',
   'id/238/200/300_[width].jpg',

docs/docs/03-Features/03-get-props.md

@@ -0,0 +1,68 @@
+---
+description: This page introduces the `getOptimizedImageProps` function, which is used to get the props of a component.
+---
+
+# Get Optimized Image Props
+
+`getOptimizedImageProps` is a function that extracts the internal processing of the `Image` component provided by this library.
+
+For example, if you use the `<img>` element directly without using the `Image` component, you can use `getOptimizedImageProps` to get the properties to pass to the `<img>` element.
+This allows for more advanced use cases such as art direction using the `<picture>` element or displaying images using the CSS `background-image` property.
+
+## Usage
+
+### Background image
+
+```tsx
+'use client'
+
+import { getOptimizedImageProps } from 'next-export-optimize-images/image'
+
+import src from '../images/sample.png'
+
+export default function BackgroundImage() {
+  const props = getOptimizedImageProps({ src, alt: '' }).props
+
+  return (
+    <div
+      style={{
+        backgroundImage: `url(${props.src})`,
+        width: props.width,
+        height: props.height,
+      }}
+    ></div>
+  )
+}
+
+export default WithPropsComponent
+```
+
+### Art direction
+
+```tsx
+'use client'
+
+import { getOptimizedImageProps } from 'next-export-optimize-images/image'
+
+import srcDesktop from '../images/sample-desktop.png'
+import srcMobile from '../images/sample-mobile.png'
+
+export default function BackgroundImage() {
+  const propsDesktop = getOptimizedImageProps({ src: srcDesktop, alt: '' }).props
+  const propsMobile = getOptimizedImageProps({ src: srcMobile, alt: '' }).props
+
+  return (
+    <picture>
+      <source
+        srcSet={propsMobile.srcSet}
+        width={propsMobile.width}
+        height={propsMobile.height}
+        media="(max-width: 768px)"
+      />
+      <img {...propsDesktop} />
+    </picture>
+  )
+}
+
+export default WithPropsComponent
+```

docs/docs/05-comparison.md

@@ -46,9 +46,9 @@ Let me list some of the disadvantages.
 
 Because of the above characteristics, the library is recommended for users other than those listed below.
 
-- I want to develop without being conscious of the fact that it is an export, the same as when using next/image.
-- Remote images need to be optimized.
 - Want to use it as simply as possible.
+- When multiple formats of images are required to be supported by Picture component.
+-
 
 ## Please let me know if there are others!
 

image.d.ts

@@ -1,2 +1,3 @@
 import Image from './dist/components/image'
+export * from './dist/components/image'
 export default Image

src/components/image.tsx

@@ -24,4 +24,5 @@ const CustomImage = forwardRef<HTMLImageElement, ImageProps>((props, forwardedRe
 })
 CustomImage.displayName = 'CustomImage'
 
+export { default as getOptimizedImageProps } from './utils/getOptimizedImageProps'
 export default CustomImage

src/components/utils/getOptimizedImageProps.ts

@@ -0,0 +1,23 @@
+import { getImageProps, ImageProps } from 'next/image'
+
+import getStringSrc from './getStringSrc'
+import imageLoader from './imageLoader'
+
+export type ImgProps = ReturnType<typeof getImageProps>
+
+const getOptimizedImageProps = (props: ImageProps): ImgProps => {
+  const srcStr = getStringSrc(props.src)
+
+  return getImageProps({
+    ...props,
+    loader: props.loader || imageLoader(),
+    ...(props.blurDataURL
+      ? { blurDataURL: props.blurDataURL }
+      : typeof props.src === 'string' && props.placeholder === 'blur' && props.loader === undefined
+        ? { blurDataURL: imageLoader()({ src: props.src, width: 8, quality: 10 }) }
+        : {}),
+    unoptimized: props.unoptimized !== undefined ? props.unoptimized : srcStr.endsWith('.svg'),
+  })
+}
+
+export default getOptimizedImageProps