feat: 이미지 포맷변환 및 picture 태그 파싱 플러그인 구현

Author: toothlessdev

.vitepress/config.mts

@@ -5,6 +5,8 @@ import { generateSidebar } from "./plugins/sidebar";
 import markdownItKatex from "markdown-it-katex";
 
 import { createAutoGeneratePostsPlugin } from "./plugins/posts";
+import { createImageOptimizerPlugin } from "./plugins/image-optimizer";
+import { markdownPicturePlugin } from "./plugins/markdown-picture";
 
 const isProduction = process.env.NODE_ENV === "production";
 
@@ -58,14 +60,22 @@ export default defineConfig({
     markdown: {
         config: (md) => {
             md.use(markdownItKatex);
+            md.use(markdownPicturePlugin);
         },
     },
 
     vite: {
         resolve: {
             alias: [{ find: "@", replacement: "/src" }],
         },
-        plugins: [createAutoGeneratePostsPlugin()],
+        plugins: [
+            createAutoGeneratePostsPlugin(),
+            createImageOptimizerPlugin({
+                formats: ["webp", "jpeg"],
+                webpQuality: 90,
+                jpegQuality: 90,
+            }),
+        ],
     },
 
     head: [

.vitepress/plugins/image-optimizer.ts

@@ -0,0 +1,123 @@
+import { Plugin } from "vite";
+import sharp from "sharp";
+import { existsSync } from "fs";
+import { join, dirname, extname, basename } from "path";
+import { glob } from "glob";
+
+interface ImageOptimizerOptions {
+    /**
+     * 이미지를 찾을 디렉토리 패턴
+     * @default "contents/posts/** /img/** /*.(jpg|jpeg|png)"
+     */
+    sourcePattern?: string;
+
+    /**
+     * 생성할 이미지 포맷들
+     * @default ["webp", "jpeg"]
+     */
+    formats?: ("webp" | "jpeg" | "avif")[];
+
+    /**
+     * WebP 품질 (0-100)
+     * @default 90
+     */
+    webpQuality?: number;
+
+    /**
+     * JPEG 품질 (0-100)
+     * @default 90
+     */
+    jpegQuality?: number;
+
+    /**
+     * AVIF 품질 (0-100)
+     * @default 90
+     */
+    avifQuality?: number;
+}
+
+/**
+ * 이미지를 여러 포맷으로 변환합니다
+ */
+async function convertImage(
+    sourcePath: string,
+    formats: ("webp" | "jpeg" | "avif")[],
+    options: ImageOptimizerOptions,
+) {
+    const ext = extname(sourcePath).toLowerCase();
+    const dir = dirname(sourcePath);
+    const name = basename(sourcePath, ext);
+
+    // 이미 최적화된 이미지는 스킵
+    if (formats.includes("webp" as any) && ext === ".webp") return;
+    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}`);
+            }
+        } catch (error) {
+            console.warn(`⚠️  이미지 변환 실패 (${sourcePath}):`, error);
+        }
+    }
+}
+
+/**
+ * 빌드 시점에 이미지를 최적화하는 Vite 플러그인
+ */
+export function createImageOptimizerPlugin(options: ImageOptimizerOptions = {}): Plugin {
+    const {
+        sourcePattern = "contents/posts/**/img/**/*.{jpg,jpeg,png}",
+        formats = ["webp", "jpeg"],
+    } = options;
+
+    return {
+        name: "vitepress-image-optimizer",
+
+        async buildStart() {
+            console.log("🖼️  이미지 최적화 시작...");
+
+            try {
+                const imagePaths = await glob(sourcePattern, {
+                    cwd: process.cwd(),
+                    absolute: true,
+                });
+
+                console.log(`📁 발견된 이미지: ${imagePaths.length}개`);
+
+                for (const imagePath of imagePaths) {
+                    await convertImage(imagePath, formats, options);
+                }
+
+                console.log("✅ 이미지 최적화 완료!");
+            } catch (error) {
+                console.error("❌ 이미지 최적화 실패:", error);
+            }
+        },
+    };
+}

.vitepress/plugins/markdown-picture.ts

@@ -0,0 +1,50 @@
+import type MarkdownIt from "markdown-it";
+import type { RenderRule } from "markdown-it/lib/renderer.mjs";
+
+/**
+ * 이미지 경로에서 확장자를 변경합니다
+ */
+function changeExtension(src: string, newExt: string): string {
+    const lastDotIndex = src.lastIndexOf(".");
+    if (lastDotIndex === -1) return src;
+    return src.substring(0, lastDotIndex) + "." + newExt;
+}
+
+/**
+ * 마크다운의 이미지를 picture 태그로 변환하는 플러그인
+ */
+export function markdownPicturePlugin(md: MarkdownIt) {
+    const defaultRender: RenderRule =
+        md.renderer.rules.image ||
+        ((tokens, idx, options, env, self) => {
+            return self.renderToken(tokens, idx, options);
+        });
+
+    md.renderer.rules.image = (tokens, idx, options, env, self) => {
+        const token = tokens[idx];
+        const srcIndex = token.attrIndex("src");
+
+        if (srcIndex < 0) {
+            return defaultRender(tokens, idx, options, env, self);
+        }
+
+        const src = token.attrs![srcIndex][1];
+        const alt = token.content;
+
+        // 외부 URL이거나 svg, gif는 picture 태그로 변환하지 않음
+        if (src.startsWith("http") || src.endsWith(".svg") || src.endsWith(".gif")) {
+            return defaultRender(tokens, idx, options, env, self);
+        }
+
+        // 이미지 포맷별 경로 생성
+        const srcWebp = changeExtension(src, "webp");
+        const srcJpeg = changeExtension(src, "jpeg");
+
+        // picture 태그 생성
+        return `<picture>
+    <source srcset="${srcWebp}" type="image/webp" />
+    <source srcset="${srcJpeg}" type="image/jpeg" />
+    <img src="${srcJpeg}" alt="${alt}" loading="lazy" />
+</picture>`;
+    };
+}