SVG 와 WebP 는 무엇일까?

728x90

안드로이드 앱이나 웹을 개발하다 보면 이미지 포맷이 대해 고민해야 할 때가 있습니다.

이번 포스트에서는 이미지 포멧 중 SVG와 WebP 각각 특징과, 둘을 비교해 보겠습니다.

SVG란

Scalable Vector Graphics로 웹 친화적인 벡터 파일 포맷입니다.

벡터 파일은 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다.

따라서 SVG와 같은 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로

로고와 복잡한 온라인 그래픽에 아주 적합합니다.

아래 사진을 보면 조금 더 이해하기 쉽습니다.

픽셀로 구성된 래스터 이미지는 사이즈를 조절하면 위처럼 손실이 생길 수 있지만,

벡터는 점과 선을 이용하기 때문에 품질을 유지할 수 있습니다.

SVG가 인기인 이유는 크기 조정뿐만 아니라, 이미지가 XML 코드로 작성되므로, 모든 텍스트 정보를

모양이 아닌 텍스트로 저장합니다. 따라서 검색 엔진이 SVG 그래픽을 키워드로 읽을 수 있으므로,

웹 사이트를 검색 순위를 높이는 데 큰 도움을 줍니다.

픽셀로 구성된 파일들과 달리 벡터 그래픽이므로 크기에 상관없이 항상 해상도를 유지합니다.
따라서 특성 브라우저나 다양한 위치에 맞게 크기를 조정해도 품질이 저하되지 않습니다.
많은 컬러 픽셀로 생성되는 래스터 이미지보다 크기가 작습니다.
텍스트를 디자인이 아닌 그대로 처리하기 때문에 스크린 리더가 SVG 이미지에 포함된 모든 단어를 스캔할 수 있습니다.
그래서 웹 페이지에서 검색 엔진에 큰 도움을 줍니다.

로고, 일러스트레이션, 차트 등 웹 그래픽에 적합합니다.
하지만 픽셀이 부족하기에 고품질 디지털 사진을 표현하기는 어렵습니다.
디테일이 풍부한 사진에는 JPEG 파일이 더 좋습니다.
최선 브라우저만 SVG 지원할 수 있으므로 Internet Explorer8, Android 4.4(API 20 수준) 이전에서는
SVG 파일을 사용하기 어렵습니다.
SVG 파일 포맷을 처음 사용하는 경우에 이미지에 포함된 코드가 이해하기 어려울 수 있습니다.

인터넷에서 이미지가 로딩되는 시간을 단축시키기 위해 Google이 출시한 파일 포맷입니다.

WebP는 웹 사이트에서 고품질 이미지를 표현할 수 있지만, PNG나 JPEG 등 기존 포맷보다 파일 크기가 작아집니다.

저장할 때 압축 방식(무손실 압축, 손실 압축)을 선택할 수 있으므로,

데이터 손실이 없이 압축할 수 있고,

중요하지 않은 정보의 경우엔 일부만 손실하면서 이미지를 압축할 수 있습니다.

Google 개발자는 무손실 WebP 이미지가 PNG보다 최대 26%까지 줄어들 수 있다고 강조합니다.

GIF는 6.78 MiB, WebP는 1.69 MiB로

원본 영상의 약 25% 정도밖에 되지 않는다는 것을 알 수 있습니다.

둘을 비교하면
SVG는 크기를 줄일 수 있고, 텍스트나 아이콘 등 이미지가 축소나 확대되어도 품질이 유지되야 하는 이미지에 적합합니다.

WebP는 크기를 줄일 수 있고, 대용량 이미지의 로딩 속도를 높이기 위해 사용합니다.

728x90