feat: 이미지 최적화 2·3차(imageAutoSizes/imageSizesPreset) 및 문서/플랜 반영 (TDD)
Auto PR / open-pr (push) Successful in 15s
Auto Label PR / add-automerge-label (pull_request) Successful in 4s
CI / test (pull_request) Successful in 1m8s

- ExportOptions.imageAutoSizes 추가 및 기본 sizes 자동 적용
- ExportOptions.imageSizesPreset 추가(mobile-first/desktop-fixed)
- 우선순위: imageSizes > preset > auto > none
- 테스트 케이스 확장(image.responsive.options.test.ts)
- README/MAIN_PLAN 업데이트
This commit is contained in:
2025-11-16 20:03:33 +09:00
parent 396d0ac7a0
commit ba2ba588f7
4 changed files with 78 additions and 2 deletions
@@ -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"/)
})
})