SVG 확장자와 이미지 용량 최적화 사이트

 

SVG 확장자의 개념과 비트맵 이미지의 차이, 고해상도 디스플레이 대응 방식, 웹 이미지 용량 최적화 방법까지 실무 관점에서 정리한 가이드.

 

SVG 확장자와 이미지 용량 최적화에 대한 이해

SVG(Scalable Vector Graphics)는 이름 그대로 확대·축소가 자유로운 벡터 그래픽 확장자다.

SVG는 점 하나하나를 픽셀로 저장하는 방식이 아니라, 선과 곡선을 수학적 좌표와 계산식으로 저장한다. 이 때문에 해상도에 구애받지 않고 어떤 크기로 확대해도 이미지가 깨지지 않는다.

 

반면 PNG, JPG, GIF는 모두 비트맵(bitmap) 이미지 확장자다. 비트맵 이미지는 픽셀 단위로 색상 정보를 저장하기 때문에, 원본보다 크게 출력될 경우 픽셀이 늘어나면서 이미지가 흐려지거나 깨지는 현상이 발생한다.

이 차이는 모바일 웹 환경에서 특히 중요해진다.

예를 들어 모바일 웹에 사용될 로고를 100px 크기로 작업한다고 가정해보자. SVG 확장자는 100px로 작업해도 고해상도 디스플레이 환경에서 선명하게 출력된다. 하지만 비트맵 이미지를 100px로 그대로 사용하면, 레티나 디스플레이처럼 픽셀 밀도가 높은 환경에서 2배 이상 확대되며 이미지가 깨지게 된다.

 

그래서 비트맵 이미지는 일반적으로 2배율(또는 3배율)로 작업한 뒤, 화면에서는 축소하여 사용한다.
반대로 SVG는 이러한 배율 작업이 필요 없다. 한 번만 만들어두면 모든 해상도에서 동일한 품질을 유지할 수 있기 때문이다.

하지만 모든 이미지를 SVG로 만들 수 있는 것은 아니다.

사진처럼 픽셀 하나하나의 색상 정보가 중요한 이미지는 벡터 방식으로 표현하기 어렵다. 수천, 수만 개의 색상 정보를 모두 수학적 좌표로 계산해야 하므로 데이터 구조상 비효율적이기 때문이다.

따라서 실무에서는 다음과 같이 구분하는 것이 일반적이다.

• 사진, 배경 이미지: JPG, PNG 등 비트맵 이미지 + 2배율 작업
• 로고, 아이콘, UI 요소: SVG 확장자 + 1배율 작업

이 기준만 잘 지켜도 이미지 품질과 용량 관리가 훨씬 수월해진다.

---

이미지 용량 최적화가 중요한 이유

사용자가 웹사이트에 접속했을 때 페이지가 빠르게 열리기 위해서는, 서버에서 전송되는 파일의 용량이 작아야 한다.
특히 이미지는 웹 페이지 용량에서 가장 큰 비중을 차지하는 요소다. 통신 환경이 불안정하거나 모바일 데이터 환경이라면, 이미지 용량은 곧 이탈률로 이어진다.

파일 용량 단위는 TB > GB > MB > KB 순으로 나뉘며, 웹에서 이상적인 이미지 크기는 KB 단위다.
(1024KB = 1MB, 1024MB = 1GB)

이미지를 깨지지 않으면서 용량을 줄이는 방법에는 여러 가지가 있다.

---

이미지 용량 줄이는 방법

1. 포토샵을 이용한 최적화

Adobe Photoshop에서
내보내기 → 웹용으로 저장을 선택한 뒤 JPG 확장자를 선택한다.

이때 품질을 100에서 60 정도로 낮추면, 육안으로 거의 차이가 느껴지지 않으면서도 파일 용량은 크게 줄어든다.
이는 이미지를 60% 화질로 저장하는 것이 아니라, 사람의 눈으로 구분하기 어려운 정보만 제거하는 방식이기 때문에 품질 저하가 최소화된다.

2. 이미지 최적화 사이트 이용

포토샵이 없거나 빠르게 작업해야 할 경우, 이미지 압축 사이트를 활용하는 것도 좋은 방법이다.
대표적으로 TinyPNG, ImageOptim 같은 서비스는 이미지 품질을 유지하면서 불필요한 메타데이터와 색상 정보를 제거해 용량을 줄여준다.

3. SVG 자체 최적화

SVG 역시 최적화가 가능하다.
불필요한 그룹, 메타데이터, 주석을 제거하면 파일 크기를 더 줄일 수 있다.
SVGO 같은 도구를 사용하면 SVG 용량을 수십 퍼센트까지 줄일 수 있으며, 웹 성능 개선에 직접적인 도움이 된다.

---

마무리하며

SVG와 비트맵 이미지의 차이를 이해하고, 용도에 맞게 확장자를 선택하는 것만으로도 웹 성능은 눈에 띄게 개선된다.
여기에 이미지 용량 최적화까지 함께 적용하면, 페이지 로딩 속도와 사용자 경험, 그리고 검색엔진 평가까지 모두 긍정적인 영향을 받을 수 있다.

웹 디자인과 프론트엔드 작업에서 이미지는 단순한 시각 요소가 아니라 성능 요소라는 점을 항상 염두에 두는 것이 중요하다.