용어
이미지 압축
이미지 압축은 받아들일 수 있는 화질을 유지하면서 이미지 파일 크기를 줄이는 작업입니다. 웹에서 더 빨리 불러오고 공유, 업로드, 보관하기 쉬워집니다.
손실 압축과 무손실 압축
무손실 압축은 이미지 데이터를 버리지 않고 파일 크기를 줄입니다. 압축을 풀면 원본과 완전히 같은 이미지가 됩니다. PNG가 무손실 압축을 사용하기 때문에 선명한 글자와 정확한 색이 필요한 스크린샷에 자주 쓰입니다.
손실 압축은 사람이 알아보기 어려운 이미지 데이터 일부를 버려 파일 크기를 줄입니다. JPG가 사용하는 방식입니다. 파일은 작아지지만 원래 화질로 완전히 되돌릴 수 없습니다. 적당히 압축하면 차이를 찾기 어렵지만 강하게 압축하면 글자와 날카로운 가장자리 주변에 흔적이 보입니다.
WebP는 손실과 무손실 압축을 모두 지원하며 같은 화질이라면 대체로 JPG나 PNG보다 작은 파일을 만듭니다.
이미지 압축이 중요한 곳
- 웹 성능 — 큰 이미지는 페이지 로딩을 늦춥니다. 압축한 이미지는 더 빨리 로드되고 대역폭을 적게 씁니다.
- 공유와 이메일 — 작은 파일은 첨부하기 쉽고 보내는 시간도 짧습니다.
- 저장 공간 — 많은 이미지를 캡처할수록 압축으로 절약하는 디스크 공간이 커집니다.
- 스크린샷 작업 — 일괄 캡처는 이미지 수백 장을 만들 수 있습니다. 압축하면 전체 결과물의 크기를 관리하기 쉽습니다.
- 문서 — 문서나 PDF에 넣는 스크린샷은 화질과 파일 크기의 균형을 맞춘 압축이 필요합니다.
형식별 압축 방식
- PNG — 무손실 형식입니다. 글자, UI 요소, 단색이 있는 스크린샷에 적합합니다. 파일은 클 수 있지만 화질이 정확합니다.
- JPG — 손실 형식입니다. 사진과 그라데이션 이미지에 적합합니다. 파일은 작지만 날카로운 가장자리와 글자 주변에 흔적이 생길 수 있습니다.
- WebP — 손실과 무손실 압축을 모두 지원합니다. 같은 화질에서 대체로 PNG나 JPG보다 파일이 작습니다. 최신 브라우저에서 폭넓게 지원됩니다.
- AVIF — 압축률이 뛰어난 새로운 형식입니다. 브라우저 지원이 늘고 있지만 아직 모든 환경에서 작동하지는 않습니다.
이미지 압축에서 흔히 하는 실수
- 글자가 있는 스크린샷을 지나치게 압축합니다. 강한 손실 압축은 글자를 흐리게 하고 날카로운 가장자리 주변에 흔적을 만듭니다. 글자가 선명해야 한다면 PNG나 무손실 WebP를 사용하세요.
- 이미 압축한 이미지를 다시 압축합니다. JPG나 손실 WebP를 반복해서 압축하면 매번 화질이 더 떨어집니다. 언제나 원본에서 압축하세요.
- 단색이 많은 스크린샷을 JPG로 저장합니다. JPG는 사진용 형식입니다. 단색 배경, UI 요소, 글자가 있는 스크린샷은 PNG나 무손실 WebP로 저장할 때 더 작고 선명할 수 있습니다.
- 일괄 내보내기 전에 화질을 시험하지 않습니다. 전체 묶음에 적용하기 전에 샘플 하나를 목표 압축률로 미리 확인하세요.
자주 묻는 질문
이미지를 압축하면 화질이 나빠지나요?
손실 압축은 화질을 낮출 수 있으며 강하게 압축할수록 차이가 큽니다. 무손실 압축은 화질 손실 없이 파일 크기를 줄입니다. 이미지를 어디에 쓸지에 따라 알맞은 방식을 고르세요.
스크린샷에는 어떤 형식이 좋은가요?
선명한 글자와 정확한 색이 중요하면 PNG가 좋습니다. 약간의 화질 손실을 받아들일 수 있는 사진에는 JPG가 맞습니다. WebP는 두 종류 모두에서 화질과 파일 크기의 균형이 좋습니다.
압축을 되돌릴 수 있나요?
무손실 압축은 완전히 되돌릴 수 있습니다. 손실 압축은 되돌릴 수 없습니다. 한 번 제거된 화질 정보는 압축 파일에서 복원할 수 없습니다.
파일 크기를 얼마나 줄일 수 있나요?
이미지마다 다릅니다. 넓은 단색 영역이 있는 PNG 스크린샷은 무손실 압축으로 50~80% 줄어들기도 합니다. JPG는 화질 설정에 따라 60~90% 줄어들 수 있지만 낮은 화질 설정에서는 차이가 눈에 보입니다.
출처
- Imagemin으로 이미지 압축하기 — web.dev