feat: 이미지 최적화 2·3차(imageAutoSizes/imageSizesPreset) 및 문서/플랜 반영 (TDD)

- ExportOptions.imageAutoSizes 추가 및 기본 sizes 자동 적용
- ExportOptions.imageSizesPreset 추가(mobile-first/desktop-fixed)
- 우선순위: imageSizes > preset > auto > none
- 테스트 케이스 확장(image.responsive.options.test.ts)
- README/MAIN_PLAN 업데이트

lib/exporter/html.ts

@@ -12,6 +12,8 @@ export type ExportOptions = {
   imageFetchPriority?: 'high' | 'low'
   imageSrcset?: string
   imageSizes?: string
+  imageAutoSizes?: boolean
+  imageSizesPreset?: 'mobile-first' | 'desktop-fixed'
 }
 
 function renderFaq(section: { props: { items: Array<{ q: string; a: string }> } }) {
@@ -130,7 +132,15 @@ function renderHero(section: { props: { heading: string; subheading?: string; im
   const decoding = opts?.imageDecoding ?? 'async'
   const fetchpriority = opts?.imageFetchPriority ? ` fetchpriority="${escapeHtml(opts.imageFetchPriority)}"` : ''
   const srcset = opts?.imageSrcset ? ` srcset="${escapeHtml(opts.imageSrcset)}"` : ''
-  const sizes = opts?.imageSizes ? ` sizes="${escapeHtml(opts.imageSizes)}"` : ''
+  const defaultSizes = '(max-width: 640px) 100vw, 600px'
+  const presetSizes = (() => {
+    if (!opts?.imageSizesPreset) return ''
+    if (opts.imageSizesPreset === 'mobile-first') return '(max-width: 640px) 100vw, 800px'
+    if (opts.imageSizesPreset === 'desktop-fixed') return '1200px'
+    return ''
+  })()
+  const sizesValue = opts?.imageSizes ?? (presetSizes || (opts?.imageSrcset && opts?.imageAutoSizes ? defaultSizes : ''))
+  const sizes = sizesValue ? ` sizes="${escapeHtml(sizesValue)}"` : ''
   return `
     <section class="hero" aria-labelledby="hero-heading">
       <div class="container">

lib/exporter/image.responsive.options.test.ts

@@ -35,4 +35,53 @@ describe('image responsive/export options', () => {
     expect(html).toMatch(/<img[^>]*srcset="https:\/\/example.com\/hero.jpg 1x, https:\/\/example.com\/hero@2x.jpg 2x"/)
     expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 600px"/)
   })
+
+  it('applies default sizes when srcset is provided and imageAutoSizes is true', () => {
+    const options: ExportOptions = {
+      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
+      imageAutoSizes: true,
+    }
+    const { html } = exportPage(basePage, options)
+    expect(html).toMatch(/<img[^>]*srcset="https:\/\/example.com\/hero.jpg 1x, https:\/\/example.com\/hero@2x.jpg 2x"/)
+    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 600px"/)
+  })
+
+  it('does not include sizes when srcset is provided but imageAutoSizes is false and sizes not provided', () => {
+    const options: ExportOptions = {
+      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
+      imageAutoSizes: false,
+    }
+    const { html } = exportPage(basePage, options)
+    expect(html).toMatch(/<img[^>]*srcset="https:\/\/example.com\/hero.jpg 1x, https:\/\/example.com\/hero@2x.jpg 2x"/)
+    expect(html).not.toMatch(/<img[^>]*sizes="/)
+  })
+
+  it('applies preset sizes when imageSizesPreset is set (mobile-first)', () => {
+    const options: ExportOptions = {
+      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
+      imageSizesPreset: 'mobile-first',
+    }
+    const { html } = exportPage(basePage, options)
+    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 800px"/)
+  })
+
+  it('applies desktop-fixed preset when selected', () => {
+    const options: ExportOptions = {
+      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
+      imageSizesPreset: 'desktop-fixed',
+    }
+    const { html } = exportPage(basePage, options)
+    expect(html).toMatch(/<img[^>]*sizes="1200px"/)
+  })
+
+  it('explicit imageSizes overrides presets and auto', () => {
+    const options: ExportOptions = {
+      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
+      imageAutoSizes: true,
+      imageSizesPreset: 'desktop-fixed',
+      imageSizes: '(max-width: 768px) 100vw, 700px',
+    }
+    const { html } = exportPage(basePage, options)
+    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 768px\) 100vw, 700px"/)
+  })
 })