프로그레시브 JPEG vs 기본 JPEG, 브라우저 변환기가 안 만들어주는 이유

가이드 · 2026-08-19 최종 확인

PNG를 JPG로 변환할 때 대부분의 사람들은 "화질"과 "용량"만 신경 쓰지만, JPEG 내부에는 눈에 잘 안 보이는 또 하나의 선택지가 있습니다. 바로 기본(Baseline) 방식과 프로그레시브(Progressive) 방식입니다. 같은 화질, 같은 파일 크기라도 이미지가 화면에 나타나는 방식이 완전히 다릅니다. 이 가이드는 두 방식이 내부적으로 어떻게 다른지, 그리고 브라우저의 Canvas API로 만든 JPEG이 왜 항상 기본 방식으로만 나오는지 정리합니다.

1. 두 방식의 화면 표시 차이

기본(Baseline) JPEG은 이미지를 위에서 아래로, 8×8 픽셀 블록 단위로 순서대로 완성해가며 로드합니다. 느린 네트워크에서는 이미지 위쪽 절반만 선명하게 보이고 아래쪽은 아예 안 보이는 상태로 한참 머무릅니다. 프로그레시브(Progressive) JPEG은 반대로 이미지 전체의 흐릿한 저해상도 버전을 먼저 통째로 보여준 뒤, 데이터가 더 도착할 때마다 전체 영역이 동시에 점점 선명해지는 방식입니다. 사용자 체감상 "빨리 뭔가 보이기 시작한다"는 인상을 주기 때문에, 웹 성능 최적화에서는 프로그레시브 방식이 흔히 권장됩니다.

2. 내부 구조: 스캔(Scan)이 하나냐 여러 개냐

JPEG은 이미지를 8×8 블록으로 나눈 뒤 DCT(이산 코사인 변환)를 적용해 각 블록을 저주파(전체적인 밝기·색조 정보) 계수와 고주파(세부 디테일 정보) 계수로 분해합니다. 두 방식의 차이는 이 계수들을 파일에 몇 번의 스캔(scan)으로 나눠 기록하느냐에 있습니다.

• 기본 방식: 각 블록의 모든 계수(저주파+고주파)를 한 번에, 블록 순서대로(왼쪽 위→오른쪽 아래) 기록합니다. 스캔이 1번뿐입니다.
• 프로그레시브 방식: 먼저 모든 블록의 저주파 계수만 훑어 기록(1차 스캔)하고, 그다음 스캔에서 고주파 계수를 조금씩 추가해나가는 식으로 보통 3~10회 이상 여러 번의 스캔으로 나눠 기록합니다. 1차 스캔만 도착해도 이미지 전체의 대략적인 형태를 이미 그릴 수 있는 이유가 여기 있습니다.

즉 프로그레시브 JPEG은 "같은 정보를 다른 순서로 재배열해서" 체감 로딩 속도를 개선하는 것이지, 별도의 압축 알고리즘을 쓰는 것이 아닙니다. 인코딩 방식이 더 복잡해 압축 자체의 효율은 오히려 기본 방식보다 미세하게(보통 몇 % 수준) 더 좋은 경우가 많다는 점도 부가적인 특징입니다.

3. 왜 Canvas API는 항상 기본 방식만 만드는가

브라우저에서 canvas.toBlob(..., 'image/jpeg', quality)로 JPEG을 생성하면, 어떤 브라우저를 쓰든 결과물은 항상 기본(Baseline) 방식입니다. Web 표준인 HTML Canvas 2D Context 스펙 자체가 JPEG 인코딩 옵션으로 품질(quality)만 정의하고 있고, 스캔 방식(프로그레시브 여부)을 지정하는 옵션은 아예 존재하지 않기 때문입니다. 이는 특정 브라우저의 한계가 아니라 표준 자체의 설계 범위 밖의 기능입니다. 그래서 이 사이트의 PNG → JPG 변환기를 포함해, Canvas API로 동작하는 모든 브라우저 기반 이미지 변환 도구는 프로그레시브 옵션을 제공할 수 없습니다.

4. 실무에서는 어떤 걸 골라야 하나

웹사이트 성능(Core Web Vitals의 LCP 등)을 고려한다면 큰 사진 이미지는 프로그레시브가 유리한 경우가 많습니다. 반면 아주 작은 썸네일이나 아이콘처럼 어차피 순식간에 로드되는 이미지는 두 방식의 체감 차이가 거의 없고, 오히려 프로그레시브 인코딩의 복잡한 구조 때문에 파일이 미세하게 커질 수도 있습니다. 이 사이트의 변환기처럼 개인이 빠르게 포맷만 바꾸는 용도라면 기본 방식으로 충분하며, 대규모 웹 서비스에 올릴 이미지라면 별도의 이미지 최적화 파이프라인(MozJPEG 등)에서 프로그레시브로 재인코딩하는 것을 권장합니다.

자주 묻는 질문