웹용 이미지 압축, 품질 손상 없이 하는 법

이미지는 대개 웹 페이지에서 가장 무거운 요소입니다. 휴대폰 카메라에서 곧장 나온 최적화 안 된 사진 한 장이 몇 메가바이트에 달할 수 있는데 — 사이트의 텍스트·코드·스타일을 모두 합친 것보다 큽니다. 이미지 압축은 대부분의 사람이 페이지 속도를 위해 할 수 있는 가장 효과 큰 변화이며, 잘하면 방문자에게는 보이지 않습니다. 이 가이드는 이미지 압축이 어떻게 동작하는지, 그리고 눈에 띄는 품질 저하 없이 파일을 줄이는 법을 다룹니다.

이미지 크기가 왜 중요한가

여분의 킬로바이트마다 방문자의 브라우저가 페이지를 보여주기 전에 내려받아야 하는 데이터입니다. 빠른 데스크톱 연결에서는 티가 안 날 수 있지만, 모바일 네트워크에서는 로딩 시간을 직접 늘리고 사용자를 짜증나게 하며 검색 순위를 해칩니다 — 구글은 로딩 속도 같은 페이지 경험 신호를 순위 요소로 씁니다. 더 작은 이미지는 더 빠른 페이지, 더 낮은 대역폭 비용, 더 만족한 방문자를 뜻합니다.

손실 vs. 무손실 압축

이미지 파일을 작게 만드는 근본적으로 다른 두 가지 방법이 있습니다.

무손실 압축

무손실 방식은 아무것도 버리지 않고 데이터를 더 효율적으로 담습니다 — 압축을 풀면 원본과 픽셀 단위로 동일한 사본을 돌려받습니다. 안전하지만 절약폭은 보통 10~50%로 온건합니다. PNG는 무손실 압축을 쓰며, 그래서 로고·스크린샷·선명한 가장자리와 단색이 있는 그래픽에 좋습니다.

손실 압축

손실 방식은 사람 눈이 알아채기 어려운 정보 — 미묘한 색 변화, 복잡한 영역의 미세한 디테일 — 를 버려 훨씬 큰 절약, 흔히 70~90%를 이룹니다. JPEG와 WebP가 손실 압축을 씁니다. 그 절충은 품질(quality) 설정으로 조절됩니다: 품질이 낮을수록 파일은 작지만 아티팩트가 더 눈에 띕니다. 사진에는 합리적인 품질 수준의 손실 압축이 거의 언제나 옳은 선택입니다.

올바른 포맷 고르기

고르는 포맷은 압축 수준만큼 중요합니다:

• JPEG — 사진의 일꾼. 어디서나 폭넓게 지원됩니다. 압축은 좋지만 투명도는 없습니다.
• PNG — 선명한 선·텍스트·투명도가 있는 그래픽(로고, 아이콘, 스크린샷)에 최적. 무손실이라 사진은 커집니다.
• WebP — 같은 시각 품질에서 보통 JPEG보다 25~35% 작은 파일을 만들고, PNG처럼 투명도를 지원하는 현대 포맷. 모든 최신 브라우저가 지원합니다. 오늘날 대부분의 웹 이미지에는 WebP가 최선의 기본값입니다.
• SVG — 압축된 사진 포맷이 전혀 아니지만, 단순한 로고와 아이콘에는 벡터 SVG가 어떤 크기에서도 칼같이 선명하고 흔히 몇 킬로바이트에 불과합니다.

품질을 얼마나 내줄 수 있나?

손실 포맷에서 품질은 보통 0~100 척도로 표현됩니다. 직관과 달리 그 범위의 꼭대기는 낭비입니다: 품질 100과 품질 80의 차이는 흔히 알아볼 수 없는데, 품질 80은 파일 크기가 절반일 수 있습니다. 실용적인 출발점:

• 품질 75~85 — 대부분의 웹 사진에 최적 지점. 큰 절약, 일반적 감상에서 눈에 띄는 손실 없음.
• 품질 60~75 — 절대적 선명함이 중요치 않은 큰 배경 이미지나 썸네일에 무난.
• 60 미만 — 절약폭은 줄고 아티팩트(블록져 보이는 하늘, 가장자리 후광)가 눈에 띕니다. 대개 그럴 가치 없음.

가장 좋은 접근은 추측이 아니라 비교입니다. 특정 품질로 압축하고, 실제로 표시될 크기로 결과를 보고, 차이가 막 보이기 시작할 때까지 품질을 낮춘 뒤 — 한 단계 다시 올리세요.

압축 전에 크기 줄이기

이미지가 필요한 것보다 훨씬 크면 압축이 할 수 있는 일은 한계가 있습니다. 800픽셀 폭 칼럼에 표시되는 4000픽셀 폭 사진은 아무도 볼 일 없는 픽셀을 다섯 배나 지고 있습니다. 이미지를 표시되는 크기 근처로 줄인 뒤 — 그다음 압축하는 것 — 이 흔히 모든 것 중 가장 큰 단일 절약입니다. 우리 이미지 리사이저는 자르기·회전·크기 조정을 한 번에, 전부 브라우저 안에서 처리합니다.

간단한 워크플로우

1. 이미지를 표시될 가장 큰 크기로 줄인다.
2. 가능하면 WebP, 최대 호환성엔 JPEG, 투명도 있는 그래픽엔 PNG를 고른다.
3. 품질 ~80으로 압축하고 표시 크기로 결과를 본다.
4. 차이가 보일 때까지 품질을 낮춘 뒤 한 단계 올린다.

마지막 세 단계는 우리 이미지 압축기로 몇 초 만에 할 수 있습니다: 한 장이든 여러 장이든 넣으면 당신 기기에서 즉시 압축됩니다 — 서버로 아무것도 업로드하지 않아 비공개 사진도 안전합니다. 전후 크기를 비교하고, 결과가 마음에 들면 내려받으세요.