어떤 이미지 포맷을 써야할까? PNG vs SVG

이번 메인프로젝트에서 메인페이지, 헤더, 푸터 등등 UI 구성을 위해 이미지를 써야 하는 상황이 많았다.

 

팀장님의 추천대로 PNG로 이미지를 다운받아서 사용하고 있었는데, 멘토님께서는 SVG을 사용하는 것을 추천하셨다.

사실, 메인프로젝트 전 프리프로젝트에서는 모든 이미지를 SVG로 써 왔었고 장점 또한 대충은 알고 있었다.

이번 기회를 통해 웹개발에서 많이 쓰이는 PNG와 SVG을 조금 더 자세히 알아보고 장단점을 제대로 알아보고 넘어가고자 한다. (+JPG)

 

 

1. JPG

: 개발에 관심이 없던 '일반인' 시절 가장 많이 사용하였던 이미지 포맷이다. 언제부터인지, 왜 그랬는지는 모르겠지만, 항상 JPG로 저장하고 사용하였었다. 

• 사진과 같은 다양하게 연결되는 톤을 가진 이미지에 적합하다.
• 사이즈를 줄이기 위해 이미지 정보를 삭제하기 때문에 손실률이 높은 포맷이다.
• 배경을 투명하게 만들 수 없다.

 

2. PNG

: 개발을 막 시작했던 시절 가장 많이 사용하였던 이미지 포맷이다.

• 몇 가지 색으로만 이루어지거나, 선들로 이루어진 이미지들에 적합하다. 예를 들어 로코, 클립아트, 텍스트 이미지 등.
• 사이즈를 줄여도 이미지 정보를 삭제하지 않는다. 그렇기 때문에 lossless(무손실) 포맷이라고도 불린다.
• 배경을 투명하게 만들 수 있다. 예를들면 회사 로고가 웹사이트에 자연스럽게 스며들게 할 수 있다.

 

3. SVG

: 프리프로젝트 때 동기의 추천을 받아 사용하기 시작한 이미지 포맷이다. 코딩을 통해 여러 가지 옵션을 바꿀 수 있는데, 처음엔 어려웠지만 조금만 공부하면 그리 어렵진 않다.

• 셋 중에 가장 최근에 나온 이미지 포맷.
• PNG처럼 투명한 배경도 가능하고, 용량도 더 적다. (페이지 로딩 속도 측면에서 유리하다!!)
• PNG 같은 경우 원래의 크기보다 크게 표현할 경우, 이미지가 깨지는 경우가 발생한다. 하지만 SVG는 벡터 그래픽이므로 크기에 상관없이 항상 해상도를 유지한다.

 

SVG가 가진 강력한 장점들 때문에, 앞으로 점점 더 SVG 포맷을 사용할 일이 많아질 것 같다. 사용법에 익숙해지는 게 좋겠다.

 

 

 

레퍼런스

https://www.adobe.com/kr/creativecloud/file-types/image/vector/svg-file.html

 

https://velog.io/@gil0127/svg-vs-png-vs-jpg