이미지 파일은 왜 종류가 많을까? JPG,PNG,압축의 기초

이미지를 저장하려다 보면 JPG, PNG, GIF, WebP처럼 형식이 여럿이라 무엇을 골라야 할지 망설이게 됩니다. 사진은 JPG로, 로고는 PNG로 저장하라는 말은 들어 봤어도, 왜 그런지는 설명을 듣기 어렵습니다.

이번 글에서는 이미지 형식이 왜 이렇게 여러 가지인지, 그 바탕에 있는 압축이 무엇인지, 그리고 어떤 형식을 언제 고르면 좋은지를 코드 없이 풀어 보겠습니다.

이미지도 결국 숫자입니다 #

화면의 이미지는 아주 작은 점들이 빼곡히 모인 것입니다. 이 점 하나하나를 픽셀이라고 하며, 픽셀마다 어떤 색인지가 숫자로 적혀 있습니다. 앞서 컴퓨터가 모든 것을 0과 1로 표현한다고 했는데, 이미지도 예외가 아닙니다. 색을 숫자로 바꿔, 그 숫자를 0과 1로 저장하는 것입니다.

문제는 점이 너무 많다는 점입니다. 요즘 사진 한 장에는 수백만 개의 픽셀이 들어 있어, 색 숫자를 그대로 다 적으면 파일이 엄청나게 커집니다. 그래서 거의 모든 이미지는 압축을 거쳐 저장됩니다.

압축은 용량을 줄이는 기술입니다 #

압축은 같은 그림을 더 적은 데이터로 담는 기술입니다. 크게 두 갈래가 있습니다.

하나는 무손실 압축입니다. 정보를 하나도 버리지 않고 영리하게 줄였다가, 펼치면 원본과 똑같이 되돌아옵니다. 가령 같은 색이 넓게 이어지면 이 색이 여기부터 저기까지라고 적어 용량을 아끼는 식입니다. 다른 하나는 손실 압축입니다. 사람 눈에 잘 띄지 않는 정보를 조금 버리는 대신, 용량을 훨씬 크게 줄입니다. 약간의 화질을 내주고 가벼움을 얻는 셈입니다.

그래서 형식마다 잘하는 게 다릅니다 #

이미지 형식이 여럿인 이유가 여기 있습니다. 형식마다 압축 방식과 잘 맞는 쓰임새가 다르기 때문입니다.

JPG는 손실 압축을 써서 사진에 알맞습니다. 색이 미묘하게 변하는 사진을 작은 용량으로 담는 데 강합니다. 반대로 PNG는 무손실이라, 로고나 글자, 또렷한 선이 있는 그래픽에 알맞고 배경을 투명하게 둘 수도 있습니다. GIF는 간단한 움직이는 이미지에 쓰입니다. 최근에는 WebP나 AVIF처럼 더 작은 용량으로 비슷한 화질을 내는 새 형식도 널리 쓰입니다. 사진을 PNG로 저장하면 쓸데없이 무거워지고, 로고를 JPG로 저장하면 글자 가장자리가 지저분해지는 이유가 이 차이에 있습니다.

형식을 잘 고르면 화면이 빨라집니다 #

이미지는 웹페이지에서 가장 무거운 자원 가운데 하나입니다. 글자는 가볍지만 이미지는 그렇지 않아서, 큰 이미지가 잔뜩 들어간 페이지는 열리는 데 오래 걸립니다. 그래서 쓰임새에 맞는 형식을 고르고 화면에 필요한 만큼으로 크기를 줄이는 것만으로도 페이지가 눈에 띄게 빨라집니다.

앞서 다룬 CDN과 캐시도 여기서 함께 작동합니다. 잘 압축한 이미지를 가까운 곳에 두고 한 번 받은 것은 캐시해 두면, 무거운 이미지도 빠르게 전달됩니다. 형식 선택과 전달 최적화가 맞물려 화면 속도를 만듭니다.

그래서 이미지를 다룰 때 #

기준은 단순합니다. 사진처럼 색이 풍부한 이미지는 JPG나 WebP로, 로고나 투명 배경이 필요한 그래픽은 PNG로 저장하면 대체로 맞습니다. 그리고 화면에 보이는 크기보다 지나치게 큰 원본을 그대로 올리지 않는 것이 중요합니다. 손바닥만 하게 보일 이미지를 거대한 원본 그대로 올리면, 보이지 않는 용량까지 사용자가 내려받게 됩니다.

왜 비개발자가 알면 일이 편해지는가 #

• 형식을 바르게 고릅니다. 사진과 그래픽에 맞는 형식이 다르다는 점을 알면, 이미지를 올릴 때 무겁거나 흐릿해지는 실수를 줄일 수 있습니다.
• 느린 페이지를 진단합니다. 이미지가 화면을 무겁게 한다는 점을 알면, 페이지가 느릴 때 이미지부터 살펴볼 수 있습니다.
• 원본을 다듬어 올립니다. 화면 크기에 맞게 줄여서 올리는 습관만으로도, 사용자에게 더 빠른 화면을 줄 수 있습니다.

마무리 #

오늘은 이미지가 결국 색을 적은 숫자이고, 그 큰 용량을 줄이려고 압축을 쓰며, 형식마다 압축 방식과 어울리는 쓰임새가 다르다는 점을 살펴봤습니다. 사진은 JPG나 WebP, 또렷한 그래픽은 PNG라는 기준과, 화면에 맞게 크기를 줄인다는 원칙이 핵심입니다.

이미지가 0과 1로 어떻게 표현되는지 더 알고 싶다면 컴퓨터가 0과 1로 모든 것을 표현하는 법을, 무거운 이미지를 빠르게 전달하는 CDN과 캐시가 궁금하다면 캐시,CDN — “캐시 좀 지워보세요"의 정체를 함께 읽어 보시길 권합니다.