이전에 윈도우 탐색기의 이메일 전송 기능이나 Image Resizer for Windows 같은 데스크톱 프로그램을 활용해 이미지 파일 크기를 줄이는 방법을 소개한 적이 있습니다. 물론 좋은 방법들이지만, 이미지를 최적화하는 방법은 이 외에도 여러 가지가 있습니다. 많은 사이트에서 그림판(Paint) 사용을 권하기도 하는데, 개인적으로는 별로 추천하지 않습니다. 그림판으로 변환하면 이미지 품질이 눈에 띄게 떨어지기 때문입니다.
먼저 알아두어야 할 중요한 점은, 이미지 크기를 줄이는 일부 방식은 화질 저하를 수반한다는 것입니다. 웹 게시용이라면 큰 문제가 없지만, 인쇄용으로는 적합하지 않을 수 있습니다. 이런 현상은 주로 해상도를 변경할 때 발생하는데, 예를 들어 2560×1440에서 1920×1080으로 줄이는 경우가 대표적입니다.
또 다른 방법은 이미지를 압축하는 것입니다. 압축에는 두 가지 종류가 있습니다. 바로 무손실(lossless) 압축과 손실(lossy) 압축입니다. 무손실 압축은 원본 파일의 픽셀 하나도 잃지 않고 파일 크기를 줄여주며, 손실 압축은 일부 데이터가 삭제되는 대신 더 작은 용량을 얻습니다.
마지막으로, 파일 형식(포맷)도 용량에 큰 영향을 미칩니다. 카메라로 찍은 일반적인 사진은 JPG 형식일 가능성이 높은데, 압축 효율이 뛰어나기 때문입니다. 반면 색상 수가 적은 이미지(256색 이하)는 GIF로 저장하는 것이 훨씬 유리합니다. PNG는 무손실 포맷으로 높은 압축률을 지원하며, 웹 그래픽과 복잡한 사진 모두에 잘 어울립니다.
이 글에서는 여러 포맷으로 이미지를 압축해 본 결과를 스크린샷과 함께 보여드리겠습니다. 직접 비교해 보시면 용량과 화질의 차이를 명확하게 확인할 수 있습니다.
이미지 크기 줄이는 방법
먼저 화질 손실 없이 이미지 크기를 줄이는 방법부터 살펴보겠습니다. 이 방식은 원본의 품질을 유지하면서 가장 작은 파일을 만들어 줍니다. 아래 예시에서 확인하겠지만, 손실 압축을 사용하면 훨씬 작은 파일을 얻을 수 있지만 그만큼 화질이 떨어집니다.
포맷 및 압축
먼저 단순한 색상의 그래픽 이미지를 예로 들어 보겠습니다. 색상 수가 적고 구조가 단순한 HDG 웹사이트의 스크린샷(600×319)을 준비했습니다. 압축을 적용하지 않은 상태에서 각 포맷별 파일 크기는 다음과 같습니다.
원본 GIF: 27 KB
원본 JPEG: 67 KB
원본 PNG: 68 KB
결과를 보면 PNG와 GIF 파일이 JPEG보다 확실히 선명합니다. 앞서 말씀드린 대로 JPEG는 사진 촬영 이미지에 더 적합합니다. GIF는 68 KB인 PNG와 비교해 겨우 27 KB로 매우 효율적입니다. 하지만 제 경험상 PNG는 손실 압축을 적용했을 때 압축 효율이 훨씬 좋아지면서도 화질은 여전히 우수하게 유지됩니다.
세 가지 포맷 모두 무손실 압축을 적용해 보았는데, JPG와 PNG만 크기가 줄었고 감소폭도 크지 않았습니다. PNG는 45 KB로, JPG는 58 KB로 줄었습니다. 그런데 손실 압축을 적용하자 PNG의 결과물이 가장 인상적이었습니다.
손실 압축 GIF: 22 KB
손실 압축 JPEG: 50 KB
손실 압축 PNG: 23 KB
보시다시피 PNG가 가장 선명하면서도 GIF보다 겨우 1 KB밖에 크지 않습니다! 그래서 이 웹사이트의 스크린샷 대부분을 PNG로 저장하는 것입니다. 참고로 JPG는 16비트, PNG는 24비트라는 점도 알아두세요. JPG는 수백만 가지 색상을 지원하고, PNG는 사실상 무제한의 색상을 지원합니다.
GIF는 5 KB 정도만 줄었는데 화질 손실은 상당했습니다. JPG 역시 압축 효과가 크지 않았습니다. 원래 JPG는 PNG만큼 잘 압축되지 않는 편입니다.
이미지 편집 앱에서 포맷을 바꿔가며 어떤 형식이 가장 작은 용량을 갖는지 실험해 보세요. 압축에는 온라인 도구를 활용하는 것을 추천합니다. 저는 개인적으로 웹사이트 작업 시 Kraken.io를 사용하지만, TinyPNG나 Optimizilla 같은 훌륭한 대안도 있습니다.
이미지 해상도 변경
이미지를 줄이는 가장 근본적인 방법은 해상도를 낮추는 것입니다. 예를 들어 4000×2500 크기의 파일을 2000×1250으로 줄이면 파일 용량도 절반으로 감소합니다. 원본 이미지 데이터의 상당 부분을 잃게 되지만, 용도에 따라서는 전혀 문제가 되지 않을 수 있습니다.
모든 이미지 편집 프로그램에는 이미지 크기를 조절하는 기능이 있습니다. 여기서 너비/높이 또는 해상도(DPI, 인치당 도트 수 또는 PPI, 인치당 픽셀 수)를 변경할 수 있습니다. DPI와 PPI의 차이가 궁금하다면 관련 전문 글을 참고하시길 권합니다. 웹용 이미지라면 도트(dots)가 아니라 픽셀만 신경 쓰면 됩니다. 도트는 오직 인쇄물에만 영향을 미칩니다.
예를 들어 제 웹사이트는 폭 680픽셀까지만 이미지를 표시할 수 있습니다. 그래서 업로드 전에 항상 이미지를 680픽셀 이하로 조정합니다. 그렇지 않으면 워드프레스가 자동으로 680px로 줄여주긴 하지만, 불필요하게 큰 파일 용량이 그대로 남기 때문입니다.
72픽셀/인치 숫자의 의미나 리샘플(resample) 옵션에 대해 더 자세히 알고 싶다면, 이 주제를 심도 있게 다룬 전문 포스트를 확인해 보세요.
색상 깊이/모드 변경
앞선 예시처럼 색상 수가 적은 이미지라면, 수백만 가지 색상을 지원하는 포맷을 굳이 사용할 필요가 없습니다. 제 웹페이지 예시의 GIF는 인덱스 컬러(Indexed color)와 채널당 8비트만 지원하면 충분합니다.
RGB 컬러와 채널당 16비트를 선택할 수도 있지만, 이미지는 똑같아 보이는 데 파일 용량만 커집니다. 이러한 색상 모드에 대한 자세한 내용은 Adobe 공식 웹사이트에서 확인할 수 있습니다. 포토샵뿐 아니라 대부분의 이미지 편집 프로그램에서도 색상 깊이/모드를 변경할 수 있습니다.
이미지 자르기(크롭)
이미지 용량을 줄이는 또 다른 쉬운 방법은 바로 자르기(crop)입니다! 잘라낸 부분은 이미지에서 완전히 제거됩니다. 어떤 이미지든 최소한 조금은 잘라낼 여지가 있는 법이고, 그것만으로도 용량 절감에 확실히 도움이 됩니다.
참고로 자르기가 꼭 위아래나 좌우를 잘라내는 전형적인 방식일 필요는 없습니다. 제가 즐겨 쓰는 SnagIt Editor에는 이미지의 가운데 부분을 가로 또는 세로로 잘라내는 '컷아웃(cut out)' 도구가 있습니다. 생각보다 훨씬 자주 유용하게 쓰이는 기능입니다. 예를 들어 명령어를 입력하는 동안의 시작 메뉴 스크린샷을 포함해야 하는 상황을 살펴보겠습니다.
위 파일의 원본 용량은 22 KB였습니다. 필요 없는 가운데 부분을 잘라내면 아래와 같이 됩니다.
새 파일 용량은 겨우 9 KB입니다! 압축도 하지 않고 포맷도 변경하지 않았는데 말이죠. 여기에 압축까지 적용하니 4.4 KB까지 줄었습니다. 그만큼 자르기는 이미지 용량을 줄이는 강력한 방법입니다.
이 글을 통해 이미지 용량을 성공적으로 줄이셨기를 바라며, 디지털 이미지가 작동하는 원리에 대한 이해도 조금 높아졌으면 좋겠습니다! 궁금한 점이 있다면 언제든지 댓글로 남겨주세요.