PNG SVG JPEG HEIC WebP

 

왜 SVG와 PNG를 혼용해서 썼는지에 대한 내 답변이다.

 

앨범처럼 이미지 중심인 앱이 아니라면,

보통 버튼이나 아이콘 같은 UI 요소에 아무 생각 없이 SVG를 써왔었다.

그런데 아이콘까지 전부 SVG로 쓰다 보니 렌더링이 지연되는 걸 직접 경험하게 됐고,

그 이후로는 본능적으로 SVG와 PNG를 구분해서 사용하게 됐다.

 

사실 지금까지는 “그냥 이렇게 해야 빠르더라” 정도로만 감각적으로 구분했었는데,

해당 이유뿐만 아니라 5가지 포맷 모두를 이번에 제대로 정리해보려고 한다.

 

---

 

PNG

✅

- 무손실 압축이 특징이다.

무손실 압축은 말그대로 품질 손상 없이 데이터만 줄이는 방식을 말한다.

 

- 투명도를 지원한다.

 

❌

- 다른 포맷에 비해 보통은 큰 편이다.

 

- Resizing 경우 이미지가 깨질 수 있다.

 

 

=> 즉, 품질을 보존하는 것이 중요할 때 해당 포맷이 적합할 것이다.

 

---

SVG

✅

- 수학적 계산을 기반으로 만들어진 벡터 이미지이다.

 

- PNG에 비해 용량이 적게 차지한다.

 

- 여러 Display에 대응해야 할 Asset 갯수가 줄어든다.

 

- Resizing에 유리하다. 깨짐현상이 없음

하나의 asset으로 여러 사이즈를 변환하여 사용 가능

이때 Preserve Vector Data를 명시적으로 설정해야 한다.

아니면 큰 사이즈로 변환 시에 이미지가 깨질 수 있다.

 

❌

- 복잡한 그림은 그만큼 계산량이 많아지기 때문에 용량이 PNG보다 커질 수 있음

 

- 컬러 표현면에서 PNG보다 제한적이다.

정확한 색상을 표현하고자 한다면 PNG로 고려해야 한다.

 

- 그런데 참고한 자료에 나온 그라데이션이 들어간 경우나 어떠한 svg파일에는 

xcode에서 이상하게 나타나는 버그가 있었고, 디바이스에서도 안정성이 문제되는 경우가 있었다.

안정성에 문제가 된다고 판단되는 경우 PNG로 고려해볼 수 있다.

 

 

=> 단순하고 투명도와 같은 추가적인 요소가 적다고 판단되는 이미지에 SVG가 적합할 것이다.

 

---

JPEG

✅

- 손실 압축 포맷이 특징이다.

품질을 일부 희생하지만, 그만큼 용량을 효과적으로 줄일 수 있다.

파일 크기를 효과적으로 줄일 수 있어서 저장과 전송에 효율적이다.

 

❌

- 투명도 지원하지 않는다.

 

- 반복 저장하면 품질이 계속 저하된다.

 

 

=> 풍경, 사진처럼 색상과 디테일이 풍부한 이미지에 JPEG가 적합하다. 

( 과거 윈도우에서 3글자 확장자 제한 때문에 JPEG를 JPG로 축약해서 사용했다. )

---

 

HEIC

✅

- iOS 기본 이미지 포맷이다.

- 높은 압축률과 높은 품질을 유지할 수 있다.

JPEG에 비교하면 더 작은 용량으로 더 나은 품질을 제공할 수 있음

 

❌

- 다른 OS나 기기랑 고유할 때 파일이 안 열리는 호환성 문제가 발생할 수 있다

 

=> iOS에 최적

 

---

WebP

✅

- 구글에서 개발한 이미지 포맷

- JPEG에 비교하면 더 작은 용량으로 더 나은 품질을 제공하고, 투명도를 지원한다.

 

❌

- 호환성 문제 발생 가능성이 있다.

 

=> 웹 최적화되어 이미지 속도가 빠르다.

 

---

정리

무손실 압축과 손실 압축은 모두 용량을 줄이는 것이 목적이지만,

품질을 보존할지 여부에 따라 압축 방식을 선택하면 된다.

 

모바일에서 앨범 특성이 있는 앱이라면 JPEG나 HEIC 포맷을 사용해 안정적으로 이미지를 관리하는 걸 고려할 수 있다.

풍경, 사진처럼 색상과 디테일이 풍부한 이미지에 JPEG

호환성 안전이 보장된다면 HEIC, WebP

 

반면, 버튼이나 아이콘 같은 UI 요소에는 PNG와 SVG를 고려할 수 있다.

이미지가 단순하고 그라데이션와 같은 추가적인 요소가 적다면 SVG

안정성에 문제가 된다고 판단되면 PNG를 선택할 것으로 생각이 정리되었다.

 

기존에는 본능적으로 이미지 포맷을 사용해왔지만,

이제는 명확한 이유를 가지고 포맷을 선택할 수 있게 되었다.

 

Reference

https://yozm.wishket.com/magazine/detail/2252/