JPG

JPG(JPEG라고도 함)는 사진과 복잡한 이미지에 맞춘 손실 이미지 형식입니다. 사람이 알아보기 어려운 시각 정보를 버려 작은 파일을 만듭니다.

JPG 압축의 작동 방식

JPG 압축은 사람의 시각적 한계를 이용하는 여러 단계로 이뤄집니다. 먼저 이미지를 RGB에서 YCbCr 색 공간으로 바꿔 밝기(luma)와 색상(chroma)을 나눕니다. 사람의 눈은 색 변화보다 밝기 변화에 더 민감하므로 색상 채널은 더 낮은 해상도로 저장할 수 있습니다. 이를 크로마 서브샘플링이라고 합니다.

다음으로 이미지를 8x8픽셀 블록으로 나눕니다. 각 블록에 이산 코사인 변환(DCT)을 적용해 픽셀값을 주파수 성분으로 바꿉니다. 고주파 성분은 세밀한 정보와 날카로운 가장자리를, 저주파 성분은 서서히 바뀌는 색과 넓은 형태를 나타냅니다.

압축 단계에서는 품질 설정에 따라 고주파 성분을 버립니다. 품질이 높은 8595%에서는 대부분의 세부 정보를 보존해 파일이 비교적 큽니다. 품질이 낮은 3050%에서는 많이 버려 파일은 작지만 날카로운 가장자리 주변의 흐림, 그라데이션 색 띠, 부드러운 영역의 블록 무늬가 보입니다.

블록 기반 방식은 부드러운 그라데이션과 복잡한 질감이 많은 사진에 뛰어납니다. 반대로 글자와 UI의 선명하고 대비가 큰 가장자리는 알고리즘이 버리는 정보에 해당해 스크린샷에는 잘 맞지 않습니다.

JPG, PNG, WebP 비교

• JPG — 손실 압축만 지원합니다. 사진에서 작은 파일을 만들며 투명도는 지원하지 않습니다. 글자와 날카로운 가장자리 주변에 흔적이 생깁니다. 모든 브라우저, 이미지 뷰어, 문서 형식에서 폭넓게 작동합니다.
• PNG — 무손실 압축만 지원합니다. 모든 픽셀을 정확히 보존하고 투명도를 지원합니다. 스크린샷, 글자, UI 요소에 맞지만 사진에서는 JPG보다 파일이 큽니다.
• WebP — 손실과 무손실 모드를 모두 지원합니다. 같은 화질에서 JPG와 PNG보다 작은 파일을 만들고 투명도도 지원합니다. 최신 브라우저와 네이티브 앱에서 지원 범위가 늘고 있습니다.

스크린샷에는 거의 언제나 PNG가 더 좋습니다. 웹에 표시할 사진에는 폭넓은 호환성 때문에 JPG가 여전히 보편적인 기본값이지만 파일 크기가 중요하면 WebP를 점점 더 많이 선택합니다.

JPG가 알맞은 상황

• 사진 — 복잡한 색 그라데이션, 자연스러운 질감, 연속적인 색조가 있는 이미지를 눈에 띄는 화질 손실 없이 효율적으로 압축합니다.
• 히어로 이미지와 배너 — 파일 크기가 페이지 로딩 시간에 직접 영향을 주고 픽셀 단위 정확성은 중요하지 않은 큰 사진 배경에 맞습니다.
• 썸네일 미리보기 — 표시 크기에서 세부 정보가 보이지 않는 작은 이미지입니다. 중간 품질 JPG는 빨리 불러오는 매우 작은 파일을 만듭니다.
• 이메일 첨부 — 받는 사람의 환경이 WebP를 지원하지 않을 수 있고 파일을 작게 유지해야 할 때 사용합니다. JPG는 호환성이 가장 넓은 손실 형식입니다.
• 소셜 미디어 업로드 — 플랫폼은 업로드 이미지를 다시 압축하는 경우가 많습니다. 품질이 높은 JPG를 쓰면 플랫폼 압축기가 처리할 원본 상태가 좋아집니다.

글자가 있는 스크린샷, 투명도가 필요한 이미지, 단색과 날카로운 가장자리가 있는 그래픽, 여러 번 편집하고 다시 저장할 에셋에는 JPG가 맞지 않습니다. 저장할 때마다 손실이 누적됩니다.

흔한 실수

• 글자가 있는 스크린샷을 JPG로 저장합니다. 압축이 글자 가장자리를 흐리고 대비가 큰 경계에 링잉 흔적을 만듭니다. 작은 글자는 읽기 어렵고 UI 라벨은 번져 보입니다. 읽어야 하는 글자가 있다면 PNG를 사용하세요.
• 이미 압축한 JPG를 다시 압축합니다. 저장할 때마다 손실 압축을 다시 적용해 품질이 더 떨어집니다. 이를 세대 손실이라고 합니다. 이전에 압축한 JPG가 아니라 원본 파일에서 편집하세요.
• 파일을 줄이려고 품질을 너무 낮춥니다. 60~70% 아래에서는 부드러운 영역의 블록 무늬, 가장자리의 색 번짐, 세부 정보 손실이 뚜렷해집니다. 아주 낮은 품질에서 얻는 크기 절감은 화질 저하를 감수할 만큼 크지 않은 경우가 많습니다.
• JPG가 투명도를 지원한다고 생각합니다. 투명 배경 이미지를 JPG로 저장하면 투명한 부분을 단색으로 채웁니다. 투명도가 필요하면 PNG나 WebP를 사용하세요.