PNG, JPEG, WebP 뭘 써야 할까? 실전 이미지 최적화 튜토리얼

대부분의 사람들은 파일 형식을 아무 생각 없이 선택해요. Figma에서 내보내거나, Photoshop에서 저장하거나, 스크린샷을 찍거나——그냥 나온 형식 그대로 사용하는 거죠. 그리고 압축 툴에 넣으면 알아서 작아지겠지 싶은데, 왜 생각만큼 안 줄어드는지 이해를 못 해요.

사실 형식 선택이 압축 설정보다 훨씬 중요해요. JPEG를 품질 85로 압축하면 PNG를 같은 품질로 압축한 것보다 작아져요. 압축기가 더 열심히 일해서가 아니라, JPEG와 PNG가 이미지 데이터를 인코딩하는 방식 자체가 근본적으로 다르기 때문이에요. 압축 툴을 열기 전에 먼저 형식을 제대로 선택하면, 슬라이더 조작보다 훨씬 더 많은 바이트를 아낄 수 있어요.

이 튜토리얼에서는 형식 선택을 먼저 다루고, 그다음에 압축·변환·리사이즈를 위한 구체적인 툴과 설정을 소개할게요. 여기서 소개하는 모든 것은 계정 없이 사용할 수 있어요.

다른 무엇보다 먼저 해야 할 형식 선택

웹과 일상적인 사용 사례 대부분은 JPEG, PNG, WebP 세 가지로 커버돼요. 솔직하게 정리해볼게요.

JPEG는 사진과 연속적인 색조 그라데이션이 있는 이미지——인물 사진, 풍경, 음식 사진——에 적합해요. 사람 눈이 색상과 밝기를 인식하는 방식을 활용한 손실 압축을 사용해서, 품질 80의 JPEG 사진은 원본과 거의 동일하게 보이면서 파일 크기는 대략 절반 수준이에요. 부드러운 색상 전환은 잘 처리하지만, 딱딱한 엣지(텍스트, 로고, 아이콘)에서는 특유의 블록 아티팩트가 생겨요.

PNG는 스크린샷, 일러스트, 로고, 아이콘, 정확한 픽셀 값이나 투명도가 필요한 모든 것에 적합해요. PNG는 무손실 압축이에요——데이터를 하나도 버리지 않아요. 그래서 같은 사진이라도 PNG가 항상 JPEG보다 커요. 사진에는 절대 PNG를 쓰지 마세요. 선이 선명하거나, 투명도가 있거나, 텍스트가 있는 건 항상 PNG로 해요.

WebP는 모든 것에 쓸 수 있고, 파일도 더 작아요. WebP는 동등한 시각적 품질에서 사진은 JPEG보다 약 25~35%, 그래픽은 PNG보다 약 26% 작은 파일을 만들어요. 브라우저 지원율은 이제 97%——2020년에 Safari가 마지막으로 지원을 추가했어요. 웹용이라면 WebP를 제공할 수 있는데 굳이 JPEG나 PNG를 쓸 이유가 거의 없어요.

실전 의사결정 흐름: 웹에 올릴 거라면 WebP. PNG가 꼭 필요한 경우(투명 배경, 인쇄용 정확한 색상)는 PNG. 나중에 편집할 수 있도록 누군가에게 보낼 거라면 사진은 JPEG, 그래픽은 PNG. WebP를 지원하지 않는 이메일 클라이언트나 플랫폼에 첨부하거나 업로드할 경우에는 사진은 JPEG, 나머지는 PNG로 대체해요.

Squoosh로 압축하기: 진짜 중요한 설정

히어로 이미지, 제품 사진, 포트폴리오 작품처럼 이미지 한 장을 세심하게 압축해야 할 때는 Squoosh가 딱이에요. Google Chrome 팀이 만들었고, 완전히 WebAssembly로 동작하기 때문에 파일이 브라우저 밖으로 나가지 않아요.

Squoosh를 열고 이미지를 드롭하면 돼요. 인터페이스가 왼쪽(원본)과 오른쪽(처리 후)으로 나뉘고, 가운데 선을 드래그할 수 있어요. 오른쪽 패널에서 출력 형식을 선택하고 설정을 조정하면 됩니다.

웹 이미지는 WebP 품질 80으로 시작해 보세요. 이 설정이 대부분의 경우를 커버해요——같은 품질 수치의 JPEG와 비교해서 시각적으로는 거의 동일하면서 파일 크기는 훨씬 작아요. 오른쪽 아래 크기 추정치가 슬라이더를 움직일 때마다 실시간으로 업데이트돼요. 품질 75~85 사이에서 어떤 변화가 생기는지 관찰해 보세요. 75로 낮추면 눈에 띄는 변화 없이 상당한 바이트를 아낄 수 있고, 70 아래로 가면 품질 저하가 확연히 보이기 시작해요. 대부분의 사진 콘텐츠에서 품질 80이 스위트 스팟이에요.

텍스트, 선명한 선, 투명도가 있는 이미지는 출력 형식을 **WebP(무손실)**로 바꾸세요. Squoosh가 손실 압축보다 크다고 경고하지만, 픽셀 값은 완벽하게 보존돼요. 손실 압축 결과와 비교해서 실제 표시 크기에서 차이가 보이는지 확인해 보세요.

Squoosh는 ‘편집’ 패널에서 리사이즈도 지원해요. 타겟 너비를 픽셀로 입력하거나, 퍼센트 토글을 클릭해서 50%를 입력해 치수를 절반으로 줄이고, 가로세로 비율 잠금을 활성화하세요. 사진 리사이즈에는 Lanczos3 알고리즘이 맞아요. 쌍선형이나 박스보다 선명도를 더 잘 보존해요. 아이콘이나 픽셀 아트를 확대할 때는 ‘최근접 이웃’을 사용해서 흐릿해지는 대신 딱딱한 엣지를 유지하세요.

Squoosh에서 안 되는 게 하나 있어요: 배치 처리. 한 번에 파일 하나씩만 작업할 수 있어서, 특정 이미지 작업에는 괜찮지만 제품 사진 40장에는 적합하지 않아요.

계정 없이 배치 압축하기

한 장씩 세밀하게 제어하는 것보다 수량이 더 중요할 때, TinyPNG는 계정 없이 한 번에 최대 20장을 처리할 수 있어요. 이미지 폴더를 업로드 박스에 드롭하면 모두 병렬로 처리돼요.

TinyPNG의 PNG 파일 알고리즘은 선택적 색상 양자화를 사용해요. 최대 1,600만 개의 색상을 더 작은 팔레트로 줄인 다음, 결과에 표준 압축을 적용해요. 시각적 차이는 보통 구분이 안 돼요. PNG 파일은 일반적으로 60~80% 줄어들고, 큰 단색 영역을 가진 단순한 그래픽은 더 많이 줄어들기도 해요.

JPEG 파일은 더 공격적인 양자화로 재인코딩하고 메타데이터(EXIF 데이터, 색상 프로파일, 임베디드 댓글)를 제거해요. 3MB짜리 스마트폰 사진이 500KB 아래로 나오는 경우가 많아요. 알고리즘이 품질 결정을 대신 해주는데, 꽤 잘 조정되어 있어요.

20파일 무료 티어에 일일 제한은 없어요——각 배치는 독립적이에요. 한 배치가 끝나면 다음 20장을 드롭하면 돼요. 200장 사진이라면 드래그 앤 드롭 10번이에요. 번거롭긴 하지만 계정이나 API 비용 없이 작동해요.

솔직히 말하면 한 가지 제한이 있어요: TinyPNG는 파일을 서버에 업로드해요. 일정 시간 후 삭제되지만, 민감한 이미지(법적 문서, 의료 사진, 개인 자료)를 압축하는 거라면 Squoosh의 로컬 처리를 사용하는 게 나아요. 제품 사진이나 블로그 이미지는 서버 측 처리가 괜찮은 트레이드오프예요.

특정 플랫폼에 맞는 리사이즈

‘올바른 치수로 리사이즈하기’는 간단하게 들리지만, 여덟 개 플랫폼에 대해 여덟 가지 권장 크기를 보고 있으면 복잡해져요. 일반적인 케이스의 현재 표준 치수를 정리했어요.

리사이즈는 압축에 쓰는 툴로 똑같이 할 수 있어요. Squoosh(‘편집’ 패널 열기)와 ezGIF 모두 정확한 픽셀 치수를 지정할 수 있어요. 더 많은 제어가 필요할 때——정확한 가로세로 비율로 크롭하기, 프레임 내에서 콘텐츠 위치 재조정——Photopea가 로그인 없이 쓸 수 있는 가장 강력한 옵션이에요. 브라우저에서 완전한 Photoshop 같은 에디터를 열어서 Photoshop에서 하는 것처럼 캔버스 크기, 크롭, 이미지 크기 컨트롤을 사용할 수 있고, 계정은 전혀 필요 없어요.

HEIC 및 기타 까다로운 형식 변환

iPhone은 기본으로 HEIC(HEIF라고도 함) 형식으로 촬영해요. 훌륭한 형식이에요——JPEG보다 작고 품질도 더 좋아요——하지만 아직 광범위하게 받아들여지지 않아요. WordPress는 거부해요. 대부분의 웹 브라우저에서는 표시되지 않아요. 이메일 클라이언트 지원도 일관성이 없어요.

HEIC를 JPEG로 변환하려면 ezGIF가 가입 없이 처리해줘요. ‘Image Converter’ 탭으로 가서 HEIC 파일을 업로드하고, 출력을 JPEG로 선택한 다음 결과를 다운로드하면 돼요. 변환 자체는 잘 되는데 대용량 배치에는 느려요.

Convertio는 RAW 카메라 형식(CR2, NEF, ARW), 게임 텍스처(DDS), EXR 같은 HDR 형식을 처리해요——대부분의 이미지 툴이 조용히 건너뛰는 것들이에요. 계정 없이 무료 변환은 하루 약 10회, 파일당 100MB로 제한되어 있어서 가끔 사용하기에는 충분해요. 파일이 Convertio 서버에 업로드되므로, 민감한 자료의 경우 개인정보처리방침을 확인하세요.

SVG 파일에 대해서도 특별히 말씀드릴게요. Figma 같은 디자인 툴이 내보내는 SVG에는 에디터 메타데이터, 인라인 스타일, 소수점 8자리까지의 수치 정밀도가 가득 들어있어요. 기술적으로는 유효하지만 불필요하게 커요. 배포 전에 SVGOMG를 통해서 돌려보세요——브라우저 기반 SVG 최적화 도구예요. Figma 내보내기는 40~70% 절약이 일반적이고, 전부 클라이언트 측에서 처리돼요.

일반적인 케이스를 위한 현실적인 워크플로우

대부분의 사람들이 쓰는 올바른 워크플로우는 이래요.

스마트폰 사진 → 웹사이트: Squoosh에서 열고, 출력을 WebP로 설정, 품질 80, 너비 1200px로 리사이즈. 끝. 거의 모든 사진이 200KB 아래로 나와요.

제품 사진(배치): 한 번에 최대 20장을 TinyPNG에 드롭. 다운로드, 반복. 형식 변환 없이 크기만 줄여요.

스크린샷 → 블로그 게시물: Squoosh나 TinyPNG. 어두운 UI 스크린샷은 무손실 WebP로 특히 잘 압축돼요.

iPhone HEIC → 공유 가능한 JPEG: ezGIF 이미지 컨버터, HEIC 입력, JPEG 출력.

웹사이트 로고나 아이콘: SVG가 있다면 SVGOMG로 최적화. PNG가 필요하면 디자인 툴에서 내보낸 다음 TinyPNG에 돌려요.

특이한 형식 변환: 다른 툴이 처리 못하는 형식은 Convertio로.

대부분의 사람들이 이미지 파일에 할 수 있는 가장 좋은 한 가지는 웹 출력을 JPEG에서 WebP로 전환하는 거예요. 두 번째로 좋은 건 압축 전에 실제 표시 치수로 리사이즈하는 것——800px로 표시될 이미지에 3000px 너비를 전달할 필요가 없어요. 두 단계 모두 무료이고, 즉각적이고, 계정이 필요 없어요.

여기서 설명한 툴들은 nologin.tools 디렉터리에서 검증된 것들이에요. HTTP Archive Web Almanac은 이미지가 웹에서 가장 큰 자산 카테고리이고, WebP/AVIF 채택률이 브라우저가 처리할 수 있는 수준보다 훨씬 낮다는 것을 지속적으로 보여주고 있어요. 기술적으로 가능한 것과 대부분의 사이트가 실제로 제공하는 것 사이의 격차는 여전히 커요——그리고 그 격차는 파일 하나하나씩 줄어들어요.

이 툴들이 여기서 설명한 기본 이상으로 무엇을 커버하는지 더 알고 싶다면, 이전의 이미지 압축 및 변환 툴 글에서 형식 선택과 툴 트레이드오프를 더 깊이 다루고 있어요.