JPG는 DCT(Discrete Cosine Transform, 이산 코사인 변환)를 사용합니다. 이미지를 8×8 픽셀 블록으로 나누고, 각 블록을 주파수 성분으로 분해합니다. 사람 눈에 덜 민감한 고주파 성분(미세한 색 변화)을 줄이거나 버려 용량을 낮춥니다.

압축률을 높일수록 고주파 성분을 더 많이 버리므로 블록 경계에 뭉개짐(artifact)이 생깁니다. 저장할 때마다 이 과정이 반복돼 품질 손실이 누적됩니다.

PNG는 DEFLATE 알고리즘으로 무손실 압축합니다. DEFLATE는 반복되는 패턴을 참조하는 LZ77과 빈도 높은 값을 짧은 코드로 표현하는 Huffman coding의 조합입니다.

같은 색이 연속으로 이어지는 단순한 이미지는 패턴이 반복되어 압축률이 높아집니다. 반면 사진처럼 픽셀마다 색이 복잡하게 달라지면 패턴이 적어 압축률이 낮아집니다. 원본 정보를 전혀 버리지 않으므로 압축 해제하면 원본과 완전히 동일합니다.

PNG는 알파 채널을 통해 투명도를 표현합니다. 일반적인 RGB가 빨강, 초록, 파랑 값을 저장한다면 RGBA는 여기에 Alpha 값을 하나 더 저장합니다.

알파 값은 픽셀이 얼마나 불투명한지를 나타냅니다. 1에 가까우면 불투명하고, 0에 가까우면 투명합니다. JPG는 알파 채널을 지원하지 않아 투명도를 표현할 수 없습니다.

알파 합성(alpha compositing)으로 계산합니다.

결과 색 = 전경 색 × 알파 + 배경 색 × (1 - 알파)

전경이 빨간색 (255, 0, 0), 배경이 흰색 (255, 255, 255), 알파가 0.5라면 결과는 (255, 128, 128) — 분홍색에 가깝습니다. 이 계산을 픽셀마다 수행하면 반투명 레이어를 배경 위에 합성할 수 있습니다.

대체로 PNG가 더 적합합니다.

스크린 캡처에는 글자, 버튼, 선, 아이콘처럼 경계가 뚜렷한 요소가 많습니다. JPG로 저장하면 8×8 블록 단위 압축 때문에 글자 주변에 artifact가 생겨 흐릿해 보일 수 있습니다.

사진이 대부분인 화면이고 용량이 더 중요하다면 WebP 무손실이 PNG와 비슷한 품질을 유지하면서 용량을 줄일 수 있습니다.

bitmap은 픽셀 격자로, vector는 수학적 도형으로 이미지를 표현합니다.

bitmap(JPG, PNG, WebP, AVIF)은 해상도가 고정되어 있어 확대하면 픽셀이 보입니다. 사진처럼 색 정보가 복잡한 이미지에 적합합니다.

vector(SVG)는 점, 선, 도형, path 같은 수학적 정보로 이미지를 표현해 어떤 크기로 확대해도 선명합니다. 로고나 아이콘처럼 확대해도 깨지면 안 되는 이미지에 적합합니다.

JPG나 PNG보다 더 작은 용량으로 비슷한 품질을 원할 때 씁니다.

WebP는 손실/무손실 모두 지원하며, 같은 품질 기준으로 JPG보다 약 25-34% 파일 크기가 작습니다. AVIF는 AV1 기반으로 WebP보다 더 강한 압축률을 보이는 경우가 있지만 인코딩 비용이 큽니다.

브라우저 지원 범위와 fallback 필요 여부를 함께 고려해야 합니다. WebP는 현재 대부분의 모던 브라우저에서 지원됩니다.

로고, 아이콘, 단순 일러스트처럼 도형 기반이고 확대해도 선명해야 하는 이미지는 SVG가 적합합니다. vector 기반이라 크기를 키워도 깨지지 않고, CSS로 색이나 크기를 조절하기도 쉽습니다.

사진처럼 색 변화가 복잡한 이미지는 SVG보다 JPG, WebP, AVIF 같은 bitmap 포맷이 적합합니다.

사진은 픽셀마다 색이 복잡하게 달라집니다. JPG의 DCT 압축은 사람 눈에 덜 민감한 고주파 정보를 줄여 용량을 크게 낮추지만, 자연 사진의 부드러운 색 변화 특성상 artifact가 잘 드러나지 않습니다.

같은 사진을 PNG로 저장하면 무손실이지만 파일 크기가 JPG보다 수배 커집니다. 품질이 더 중요하거나 차세대 포맷을 원한다면 WebP, AVIF가 대안이 됩니다.