이미지 화질·용량 비교

화질 몇으로 저장해야 할까요

사진을 JPG나 WEBP로 저장할 때 화질 값을 낮추면 용량은 크게 줄지만 어느 순간부터 경계가 뭉개지고 네모난 얼룩(블록 노이즈)이 생겨요. 그 경계가 사진마다 달라서, 직접 같은 사진을 여러 설정으로 저장해 비교해 보는 것이 가장 확실해요. 이 도구는 두 가지 설정으로 실제로 저장한 결과를 한 화면에 겹쳐 놓고, 막대를 밀어 가며 비교하게 해 줘요.

쓰는 법

• 왼쪽·오른쪽 각각 형식(JPG·WEBP·PNG·원본)과 화질을 고르세요. PNG는 무손실이라 화질 값이 없어요.
• 가운데 흰 막대를 손가락이나 마우스로 밀면 왼쪽 결과와 오른쪽 결과가 바뀌어 보여요. 키보드 ←·→로도 움직여요.
• 확대를 2배·4배로 하면 글자·머리카락·하늘 그러데이션처럼 차이가 잘 드러나는 곳을 자세히 볼 수 있어요(상자 안에서 스크롤).
• 마음에 드는 쪽의 받기 버튼을 누르면 그 설정으로 저장한 파일을 바로 받아요.

숫자 읽는 법

용량 옆의 PSNR(최대 신호 대 잡음비)은 원본과 얼마나 다른지를 dB로 나타낸 값이에요. 높을수록 원본에 가깝고, 사진은 보통 40dB 이상이면 차이를 거의 못 느끼고 30dB 아래로 내려가면 눈에 띄기 시작해요. 다만 PSNR은 사람 눈의 민감도를 반영하지 않으니 숫자보다 화면으로 확인하는 것이 중요해요. 저장은 브라우저에 들어 있는 인코더(canvas.toBlob)로 하므로, 결과 파일은 이 페이지에서 본 것과 같아요.

대략적인 기준

블로그·쇼핑몰 사진은 JPG 75~85, WEBP 70~80이면 대부분 충분해요. 같은 화질 값이라도 WEBP가 JPG보다 25~34% 정도 작은 경우가 많아요. 글자가 많은 캡처·로고는 손실 압축보다 PNG나 PNG 용량 줄이기가 깨끗해요. AVIF는 브라우저가 직접 저장하지 못해서 AVIF 변환에서 따로 만들 수 있어요.

참고한 자료

• Wikipedia — Peak signal-to-noise ratio (PSNR)
• Google — WebP Compression Study (JPEG 대비 용량 비교)
• MDN — HTMLCanvasElement.toBlob()