@son426/vite-image 0.2.1 → 0.2.2

package/LICENSE

@@ -25,3 +25,4 @@ SOFTWARE.
 
 
 
+

package/README.md

@@ -308,6 +308,24 @@ import heroImage from "@/assets/hero.jpg?vite-image";
 />
 ```
 
+**With decoding:**
+
+```tsx
+<Image src={heroImage} alt="Hero" decoding="sync" />
+```
+
+**With overrideSrc (SEO optimization):**
+
+```tsx
+<Image
+  src={heroImage}
+  alt="Hero"
+  overrideSrc="/original-image.jpg"
+/>
+```
+
+> **Note**: When `overrideSrc` is provided, the `src` attribute uses the override value for SEO purposes, while the optimized `srcSet` is disabled. Placeholders are also disabled when using `overrideSrc`.
+
 **Combined usage:**
 
 ```tsx
@@ -335,6 +353,8 @@ import heroImage from "@/assets/hero.jpg?vite-image";
 | `sizes`       | `string`                                                  | No       | auto      | Sizes attribute (auto-calculated from srcSet if not provided)           |
 | `priority`    | `boolean`                                                 | No       | `false`   | High priority loading (preload + eager + fetchPriority high)            |
 | `placeholder` | `'empty' \| 'blur' \| string`                             | No       | `'empty'` | Placeholder type: `'empty'` (none), `'blur'` (blurDataURL), or data URL |
+| `decoding`    | `'async' \| 'sync' \| 'auto'`                              | No       | `'async'` | Image decoding strategy (Next.js Image compatible)                      |
+| `overrideSrc` | `string`                                                   | No       | -         | Override src attribute for SEO while using optimized images            |
 | `onLoad`      | `(event: React.SyntheticEvent<HTMLImageElement>) => void` | No       | -         | Callback fired when image loads successfully                            |
 | `onError`     | `(event: React.SyntheticEvent<HTMLImageElement>) => void` | No       | -         | Callback fired when image fails to load                                 |
 | `className`   | `string`                                                  | No       | -         | Additional CSS classes                                                  |
@@ -347,6 +367,8 @@ import heroImage from "@/assets/hero.jpg?vite-image";
 - The `width` and `height` are automatically extracted from the `src` object.
 - When `priority={true}`, the image is preloaded using `react-dom`'s `preload` API and loaded with `loading="eager"` and `fetchPriority="high"`.
 - When `sizes` is not provided, it's automatically calculated from `srcSet` breakpoints.
+- When `overrideSrc` is provided, the `src` attribute uses the override value (useful for SEO), while `srcSet` and `sizes` are disabled. Placeholders are also disabled.
+- The `decoding` prop controls how the browser decodes the image: `"async"` (default, non-blocking), `"sync"` (blocking), or `"auto"` (browser decides).
 
 ### ResponsiveImageData
 
@@ -392,3 +414,4 @@ import type { ImageProps } from "@son426/vite-image/react";
 ## License
 
 MIT
+

package/dist/react/index.d.ts

@@ -11,6 +11,8 @@ interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src"
     blurDataURL?: string;
     loading?: "lazy" | "eager";
     priority?: boolean;
+    decoding?: "async" | "sync" | "auto";
+    overrideSrc?: string;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 }
@@ -26,6 +28,8 @@ fill, sizes, placeholder, // 기본값: empty (Next.js Image 호환)
 blurDataURL: customBlurDataURL, // 사용자가 직접 제공한 blurDataURL (우선순위 높음)
 loading, // loading prop (priority보다 낮은 우선순위)
 priority, // 기본값: false (Next.js Image 호환)
+decoding, // 기본값: async (Next.js Image 호환)
+overrideSrc, // Next.js Image 호환: SEO를 위해 src 속성을 유지하면서 최적화된 이미지 사용
 className, style, onLoad, onError, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
 export { type ImageProps, ResponsiveImageData, Image as default };

package/dist/react/index.js

@@ -39,6 +39,10 @@ function Image({
   // loading prop (priority보다 낮은 우선순위)
   priority = false,
   // 기본값: false (Next.js Image 호환)
+  decoding = "async",
+  // 기본값: async (Next.js Image 호환)
+  overrideSrc,
+  // Next.js Image 호환: SEO를 위해 src 속성을 유지하면서 최적화된 이미지 사용
   className = "",
   style,
   onLoad,
@@ -56,6 +60,7 @@ function Image({
   } = src;
   const blurDataURL = customBlurDataURL ?? srcBlurDataURL;
   const loadingAttr = priority ? "eager" : loading ?? "lazy";
+  const finalSrc = overrideSrc ?? currentSrc;
   const computedSizes = sizes ?? (fill ? "100vw" : generateSizesFromSrcSet(currentSrcSet));
   if (priority && currentSrc) {
     preload(currentSrc, {
@@ -66,6 +71,9 @@ function Image({
     });
   }
   const getPlaceholderSrc = () => {
+    if (overrideSrc) {
+      return void 0;
+    }
     if (placeholder === "empty") {
       return void 0;
     }
@@ -123,13 +131,14 @@ function Image({
       "img",
       {
         ...props,
-        src: currentSrc,
-        srcSet: currentSrcSet,
-        sizes: computedSizes,
+        src: finalSrc,
+        srcSet: overrideSrc ? void 0 : currentSrcSet,
+        sizes: overrideSrc ? void 0 : computedSizes,
         width: fill ? void 0 : currentWidth,
         height: fill ? void 0 : currentHeight,
         loading: loadingAttr,
         fetchPriority: priority ? "high" : void 0,
+        decoding,
         onLoad: (e) => {
           setIsImageLoaded(true);
           onLoad?.(e);
@@ -138,7 +147,7 @@ function Image({
         style: { ...imgStyle, zIndex: 0 }
       }
     ),
-    hasShowPlaceholder && /* @__PURE__ */ jsx(
+    !overrideSrc && hasShowPlaceholder && /* @__PURE__ */ jsx(
       "img",
       {
         src: placeholderSrc,

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/Image.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useState, type ImgHTMLAttributes, type CSSProperties } from \"react\";\nimport { preload } from \"react-dom\";\nimport type { ResponsiveImageData } from \"../types\";\n\n// placeholder 타입 정의 (Next.js Image 호환)\ntype PlaceholderValue = \"empty\" | \"blur\" | `data:image/${string}`;\n\n// ?vite-image import 결과 타입\ninterface BaseImageProps\n  extends Omit<\n    ImgHTMLAttributes<HTMLImageElement>,\n    \"src\" | \"srcSet\" | \"width\" | \"height\"\n  > {\n  // 핵심 변경: src는 무조건 최적화된 이미지 객체만 받음\n  src: ResponsiveImageData;\n  sizes?: string; // Optional: 제공되지 않으면 자동 계산\n  placeholder?: PlaceholderValue; // Next.js Image 호환: 'empty' | 'blur' | 'data:image/...'\n  blurDataURL?: string; // Optional: 커스텀 blur placeholder (src.blurDataURL보다 우선)\n  loading?: \"lazy\" | \"eager\"; // Next.js Image 호환: 이미지 로딩 방식\n  priority?: boolean; // Next.js Image 호환: true일 경우 높은 우선순위로 preload\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n\ninterface FillImageProps extends BaseImageProps {\n  fill: true;\n}\n\ninterface StandardImageProps extends BaseImageProps {\n  fill?: false | undefined;\n}\n\nexport type ImageProps = FillImageProps | StandardImageProps;\n\n/**\n * srcSet에서 breakpoints를 추출하여 sizes 문자열을 자동 생성\n * @param srcSet - \"url1 640w, url2 1024w, url3 1920w\" 형식의 문자열\n * @returns sizes 속성 문자열\n */\nfunction generateSizesFromSrcSet(srcSet?: string): string {\n  if (!srcSet) {\n    return \"100vw\";\n  }\n\n  // srcSet에서 width 값들 추출 (예: \"640w\", \"1024w\", \"1920w\")\n  const widthMatches = srcSet.match(/(\\d+)w/g);\n  if (!widthMatches || widthMatches.length === 0) {\n    return \"100vw\";\n  }\n\n  // width 값들을 숫자로 변환하고 정렬\n  const breakpoints = widthMatches\n    .map((match) => parseInt(match.replace(\"w\", \"\"), 10))\n    .sort((a, b) => a - b);\n\n  if (breakpoints.length === 0) {\n    return \"100vw\";\n  }\n\n  // breakpoints를 기반으로 sizes 문자열 생성\n  // 예: \"(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1920px\"\n  const sizeParts: string[] = [];\n\n  for (let i = 0; i < breakpoints.length; i++) {\n    const breakpoint = breakpoints[i];\n    if (i === breakpoints.length - 1) {\n      // 마지막 breakpoint는 최대 크기로 설정\n      sizeParts.push(`${breakpoint}px`);\n    } else {\n      // 중간 breakpoint들은 미디어 쿼리로 설정\n      sizeParts.push(`(max-width: ${breakpoint}px) 100vw`);\n    }\n  }\n\n  return sizeParts.join(\", \");\n}\n\nexport default function Image({\n  src, // 이제 이 src는 객체입니다.\n  fill = false,\n  sizes,\n  placeholder = \"empty\", // 기본값: empty (Next.js Image 호환)\n  blurDataURL: customBlurDataURL, // 사용자가 직접 제공한 blurDataURL (우선순위 높음)\n  loading, // loading prop (priority보다 낮은 우선순위)\n  priority = false, // 기본값: false (Next.js Image 호환)\n  className = \"\",\n  style,\n  onLoad,\n  onError,\n  ...props\n}: ImageProps) {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n\n  // 1. 데이터 추출: src 객체에서 바로 꺼내씀 (병합 로직 제거)\n  const {\n    src: currentSrc,\n    srcSet: currentSrcSet,\n    blurDataURL: srcBlurDataURL, // 번들러가 생성한 blurDataURL\n    width: currentWidth,\n    height: currentHeight,\n  } = src;\n\n  // blurDataURL 우선순위: prop으로 제공된 것 > src 객체의 것\n  const blurDataURL = customBlurDataURL ?? srcBlurDataURL;\n\n  // 2. loading 속성 결정: 우선순위 priority > loading prop > 기본값('lazy')\n  const loadingAttr = priority ? \"eager\" : loading ?? \"lazy\";\n\n  // 3. sizes 자동 계산: 제공되지 않으면 srcSet 기반으로 자동 생성\n  const computedSizes =\n    sizes ?? (fill ? \"100vw\" : generateSizesFromSrcSet(currentSrcSet));\n\n  // 4. Priority 처리: priority={true}일 때 preload\n  if (priority && currentSrc) {\n    preload(currentSrc, {\n      as: \"image\",\n      fetchPriority: \"high\",\n      ...(currentSrcSet ? { imageSrcSet: currentSrcSet } : {}),\n      ...(computedSizes ? { imageSizes: computedSizes } : {}),\n    });\n  }\n\n  // 5. placeholder 처리 (Next.js Image 호환)\n  const getPlaceholderSrc = (): string | undefined => {\n    if (placeholder === \"empty\") {\n      return undefined;\n    }\n    if (placeholder === \"blur\") {\n      return blurDataURL;\n    }\n    // data:image/... 형식의 직접 제공된 placeholder\n    if (placeholder.startsWith(\"data:image/\")) {\n      return placeholder;\n    }\n    // 기본값: empty\n    return undefined;\n  };\n\n  const placeholderSrc = getPlaceholderSrc();\n  const hasShowPlaceholder = !!placeholderSrc;\n\n  // 5. 컨테이너 스타일 계산 (기존 로직 유지)\n  const containerStyle: CSSProperties = fill\n    ? {\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        width: \"100%\",\n        height: \"100%\",\n        overflow: \"hidden\",\n      }\n    : {\n        position: \"relative\",\n        width: \"100%\",\n        overflow: \"hidden\",\n        // Standard 모드일 때 aspect-ratio 처리\n        ...(currentWidth && currentHeight\n          ? { aspectRatio: `${currentWidth} / ${currentHeight}` }\n          : {}),\n      };\n\n  const mergedContainerStyle = { ...containerStyle, ...style };\n\n  // 6. 실제 이미지 스타일 (기존 로직 유지)\n  const imgStyle: CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  };\n\n  // 7. Placeholder 스타일 (blur 모드일 때만 blur 효과 적용)\n  const placeholderStyle: CSSProperties = {\n    ...imgStyle,\n    transition: \"opacity 500ms ease-out\",\n    opacity: isImageLoaded ? 0 : 1,\n    zIndex: 1,\n    pointerEvents: \"none\",\n\n    // blur placeholder일 때만 blur 효과 적용\n    ...(placeholder === \"blur\"\n      ? {\n          filter: \"blur(20px)\",\n          transform: \"scale(1.1)\",\n        }\n      : {}),\n  };\n\n  return (\n    <div className={className} style={mergedContainerStyle}>\n      {/* 실제 이미지 */}\n      <img\n        {...props}\n        src={currentSrc}\n        srcSet={currentSrcSet}\n        sizes={computedSizes}\n        width={fill ? undefined : currentWidth}\n        height={fill ? undefined : currentHeight}\n        loading={loadingAttr}\n        fetchPriority={priority ? \"high\" : undefined}\n        onLoad={(e) => {\n          setIsImageLoaded(true);\n          onLoad?.(e);\n        }}\n        onError={onError}\n        style={{ ...imgStyle, zIndex: 0 }}\n      />\n\n      {/* Placeholder 레이어 (placeholder prop에 따라 표시) */}\n      {hasShowPlaceholder && (\n        <img\n          src={placeholderSrc}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={placeholderStyle}\n        />\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/react/Image.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useState, type ImgHTMLAttributes, type CSSProperties } from \"react\";\nimport { preload } from \"react-dom\";\nimport type { ResponsiveImageData } from \"../types\";\n\n// placeholder 타입 정의 (Next.js Image 호환)\ntype PlaceholderValue = \"empty\" | \"blur\" | `data:image/${string}`;\n\n// ?vite-image import 결과 타입\ninterface BaseImageProps\n  extends Omit<\n    ImgHTMLAttributes<HTMLImageElement>,\n    \"src\" | \"srcSet\" | \"width\" | \"height\"\n  > {\n  // 핵심 변경: src는 무조건 최적화된 이미지 객체만 받음\n  src: ResponsiveImageData;\n  sizes?: string; // Optional: 제공되지 않으면 자동 계산\n  placeholder?: PlaceholderValue; // Next.js Image 호환: 'empty' | 'blur' | 'data:image/...'\n  blurDataURL?: string; // Optional: 커스텀 blur placeholder (src.blurDataURL보다 우선)\n  loading?: \"lazy\" | \"eager\"; // Next.js Image 호환: 이미지 로딩 방식\n  priority?: boolean; // Next.js Image 호환: true일 경우 높은 우선순위로 preload\n  decoding?: \"async\" | \"sync\" | \"auto\"; // Next.js Image 호환: 이미지 디코딩 방식\n  overrideSrc?: string; // Next.js Image 호환: SEO를 위해 src 속성을 유지하면서 최적화된 이미지 사용\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n\ninterface FillImageProps extends BaseImageProps {\n  fill: true;\n}\n\ninterface StandardImageProps extends BaseImageProps {\n  fill?: false | undefined;\n}\n\nexport type ImageProps = FillImageProps | StandardImageProps;\n\n/**\n * srcSet에서 breakpoints를 추출하여 sizes 문자열을 자동 생성\n * @param srcSet - \"url1 640w, url2 1024w, url3 1920w\" 형식의 문자열\n * @returns sizes 속성 문자열\n */\nfunction generateSizesFromSrcSet(srcSet?: string): string {\n  if (!srcSet) {\n    return \"100vw\";\n  }\n\n  // srcSet에서 width 값들 추출 (예: \"640w\", \"1024w\", \"1920w\")\n  const widthMatches = srcSet.match(/(\\d+)w/g);\n  if (!widthMatches || widthMatches.length === 0) {\n    return \"100vw\";\n  }\n\n  // width 값들을 숫자로 변환하고 정렬\n  const breakpoints = widthMatches\n    .map((match) => parseInt(match.replace(\"w\", \"\"), 10))\n    .sort((a, b) => a - b);\n\n  if (breakpoints.length === 0) {\n    return \"100vw\";\n  }\n\n  // breakpoints를 기반으로 sizes 문자열 생성\n  // 예: \"(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1920px\"\n  const sizeParts: string[] = [];\n\n  for (let i = 0; i < breakpoints.length; i++) {\n    const breakpoint = breakpoints[i];\n    if (i === breakpoints.length - 1) {\n      // 마지막 breakpoint는 최대 크기로 설정\n      sizeParts.push(`${breakpoint}px`);\n    } else {\n      // 중간 breakpoint들은 미디어 쿼리로 설정\n      sizeParts.push(`(max-width: ${breakpoint}px) 100vw`);\n    }\n  }\n\n  return sizeParts.join(\", \");\n}\n\nexport default function Image({\n  src, // 이제 이 src는 객체입니다.\n  fill = false,\n  sizes,\n  placeholder = \"empty\", // 기본값: empty (Next.js Image 호환)\n  blurDataURL: customBlurDataURL, // 사용자가 직접 제공한 blurDataURL (우선순위 높음)\n  loading, // loading prop (priority보다 낮은 우선순위)\n  priority = false, // 기본값: false (Next.js Image 호환)\n  decoding = \"async\", // 기본값: async (Next.js Image 호환)\n  overrideSrc, // Next.js Image 호환: SEO를 위해 src 속성을 유지하면서 최적화된 이미지 사용\n  className = \"\",\n  style,\n  onLoad,\n  onError,\n  ...props\n}: ImageProps) {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n\n  // 1. 데이터 추출: src 객체에서 바로 꺼내씀 (병합 로직 제거)\n  const {\n    src: currentSrc,\n    srcSet: currentSrcSet,\n    blurDataURL: srcBlurDataURL, // 번들러가 생성한 blurDataURL\n    width: currentWidth,\n    height: currentHeight,\n  } = src;\n\n  // blurDataURL 우선순위: prop으로 제공된 것 > src 객체의 것\n  const blurDataURL = customBlurDataURL ?? srcBlurDataURL;\n\n  // 2. loading 속성 결정: 우선순위 priority > loading prop > 기본값('lazy')\n  const loadingAttr = priority ? \"eager\" : loading ?? \"lazy\";\n\n  // 3. overrideSrc 처리: SEO를 위해 src 속성을 유지하면서 최적화된 이미지 사용\n  const finalSrc = overrideSrc ?? currentSrc;\n\n  // 4. sizes 자동 계산: 제공되지 않으면 srcSet 기반으로 자동 생성\n  const computedSizes =\n    sizes ?? (fill ? \"100vw\" : generateSizesFromSrcSet(currentSrcSet));\n\n  // 5. Priority 처리: priority={true}일 때 preload\n  if (priority && currentSrc) {\n    preload(currentSrc, {\n      as: \"image\",\n      fetchPriority: \"high\",\n      ...(currentSrcSet ? { imageSrcSet: currentSrcSet } : {}),\n      ...(computedSizes ? { imageSizes: computedSizes } : {}),\n    });\n  }\n\n  // 6. placeholder 처리 (Next.js Image 호환) - overrideSrc가 있으면 placeholder 비활성화\n  const getPlaceholderSrc = (): string | undefined => {\n    // overrideSrc가 있으면 placeholder를 표시하지 않음\n    if (overrideSrc) {\n      return undefined;\n    }\n    if (placeholder === \"empty\") {\n      return undefined;\n    }\n    if (placeholder === \"blur\") {\n      return blurDataURL;\n    }\n    // data:image/... 형식의 직접 제공된 placeholder\n    if (placeholder.startsWith(\"data:image/\")) {\n      return placeholder;\n    }\n    // 기본값: empty\n    return undefined;\n  };\n\n  const placeholderSrc = getPlaceholderSrc();\n  const hasShowPlaceholder = !!placeholderSrc;\n\n  // 7. 컨테이너 스타일 계산 (기존 로직 유지)\n  const containerStyle: CSSProperties = fill\n    ? {\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        width: \"100%\",\n        height: \"100%\",\n        overflow: \"hidden\",\n      }\n    : {\n        position: \"relative\",\n        width: \"100%\",\n        overflow: \"hidden\",\n        // Standard 모드일 때 aspect-ratio 처리\n        ...(currentWidth && currentHeight\n          ? { aspectRatio: `${currentWidth} / ${currentHeight}` }\n          : {}),\n      };\n\n  const mergedContainerStyle = { ...containerStyle, ...style };\n\n  // 8. 실제 이미지 스타일 (기존 로직 유지)\n  const imgStyle: CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  };\n\n  // 9. Placeholder 스타일 (blur 모드일 때만 blur 효과 적용)\n  const placeholderStyle: CSSProperties = {\n    ...imgStyle,\n    transition: \"opacity 500ms ease-out\",\n    opacity: isImageLoaded ? 0 : 1,\n    zIndex: 1,\n    pointerEvents: \"none\",\n\n    // blur placeholder일 때만 blur 효과 적용\n    ...(placeholder === \"blur\"\n      ? {\n          filter: \"blur(20px)\",\n          transform: \"scale(1.1)\",\n        }\n      : {}),\n  };\n\n  return (\n    <div className={className} style={mergedContainerStyle}>\n      {/* 실제 이미지 */}\n      <img\n        {...props}\n        src={finalSrc}\n        srcSet={overrideSrc ? undefined : currentSrcSet}\n        sizes={overrideSrc ? undefined : computedSizes}\n        width={fill ? undefined : currentWidth}\n        height={fill ? undefined : currentHeight}\n        loading={loadingAttr}\n        fetchPriority={priority ? \"high\" : undefined}\n        decoding={decoding}\n        onLoad={(e) => {\n          setIsImageLoaded(true);\n          onLoad?.(e);\n        }}\n        onError={onError}\n        style={{ ...imgStyle, zIndex: 0 }}\n      />\n\n      {/* Placeholder 레이어 (overrideSrc가 없을 때만 표시) */}\n      {!overrideSrc && hasShowPlaceholder && (\n        <img\n          src={placeholderSrc}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={placeholderStyle}\n        />\n      )}\n    </div>\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@son426/vite-image",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
   "type": "module",
   "main": "./dist/index.js",