fix: 이미지 최적화 실패시 fallback 으로 원본이미지를 제공하도록 변경

Author: toothlessdev

.vitepress/plugins/image-optimizer.ts

@@ -53,37 +53,45 @@ async function convertImage(
     if (formats.includes("jpeg" as any) && [".jpg", ".jpeg"].includes(ext)) return;
     if (formats.includes("avif" as any) && ext === ".avif") return;
 
-    const image = sharp(sourcePath);
-
-    for (const format of formats) {
-        const outputPath = join(dir, `${name}.${format}`);
-
-        // 이미 변환된 파일이 있으면 스킵
-        if (existsSync(outputPath)) continue;
-
-        try {
-            if (format === "webp") {
-                await image
-                    .clone()
-                    .webp({ quality: options.webpQuality || 80 })
-                    .toFile(outputPath);
-                console.log(`✅ WebP 생성: ${outputPath}`);
-            } else if (format === "jpeg") {
-                await image
-                    .clone()
-                    .jpeg({ quality: options.jpegQuality || 80 })
-                    .toFile(outputPath);
-                console.log(`✅ JPEG 생성: ${outputPath}`);
-            } else if (format === "avif") {
-                await image
-                    .clone()
-                    .avif({ quality: options.avifQuality || 70 })
-                    .toFile(outputPath);
-                console.log(`✅ AVIF 생성: ${outputPath}`);
+    try {
+        const image = sharp(sourcePath);
+
+        for (const format of formats) {
+            const outputPath = join(dir, `${name}.${format}`);
+
+            // 이미 변환된 파일이 있으면 스킵
+            if (existsSync(outputPath)) continue;
+
+            try {
+                if (format === "webp") {
+                    await image
+                        .clone()
+                        .webp({ quality: options.webpQuality || 80 })
+                        .toFile(outputPath);
+                    console.log(`✅ WebP 생성: ${outputPath}`);
+                } else if (format === "jpeg") {
+                    await image
+                        .clone()
+                        .jpeg({ quality: options.jpegQuality || 80 })
+                        .toFile(outputPath);
+                    console.log(`✅ JPEG 생성: ${outputPath}`);
+                } else if (format === "avif") {
+                    await image
+                        .clone()
+                        .avif({ quality: options.avifQuality || 70 })
+                        .toFile(outputPath);
+                    console.log(`✅ AVIF 생성: ${outputPath}`);
+                }
+            } catch (error) {
+                console.warn(
+                    `⚠️  ${format.toUpperCase()} 변환 실패 (${basename(sourcePath)}): ${error instanceof Error ? error.message : String(error)}`,
+                );
             }
-        } catch (error) {
-            console.warn(`⚠️  이미지 변환 실패 (${sourcePath}):`, error);
         }
+    } catch (error) {
+        console.warn(
+            `⚠️  이미지 로드 실패 (${basename(sourcePath)}): ${error instanceof Error ? error.message : String(error)}. 원본 파일을 사용합니다.`,
+        );
     }
 }
 

.vitepress/plugins/markdown-picture.ts

@@ -40,11 +40,11 @@ export function markdownPicturePlugin(md: MarkdownIt) {
         const srcWebp = changeExtension(src, "webp");
         const srcJpeg = changeExtension(src, "jpeg");
 
-        // picture 태그 생성
+        // picture 태그 생성 (원본을 최종 fallback으로 사용)
         return `<picture>
     <source srcset="${srcWebp}" type="image/webp" />
     <source srcset="${srcJpeg}" type="image/jpeg" />
-    <img src="${srcJpeg}" alt="${alt}" loading="lazy" />
+    <img src="${src}" alt="${alt}" loading="lazy" />
 </picture>`;
     };
 }