2026-05-19 · 1분 읽기
responsive layout용 image resize
layout이 쓰는 exact width export — mobile에 4000px source ship 금지.
imageperformancefrontend
핵심 요점
- resize first, compress second — quality와 bytes에 order matters.
- art direction crop 필요 없으면 aspect ratio 유지.
srcset에 맞추기
하나의 giant master 대신 breakpoint당 1x/2x width generate.
resized output을 ship format으로 Image Compress와 pairing.
자주 묻는 질문
resize 후 format?
modern stack photo는 WebP; crisp UI edge는 PNG.
secondary field width?
target width 또는 WxH; unnecessary upscaling 없이 bounds fit.