프로젝트를 진행하면서 이미지 파일을 저장할때마다 어떤 형식으로 저장해야 될 지 고민이 될 때가 있다. 그래서 기본적으로 png나 jpg 위주로 사용을 했었는데 가끔 다른 사이트에 들어가서 찾아보면 svg 파일을 사용한 곳들이 많아서 각자 어떤 상황에 따라서 png나 svg 파일을 사용하는지 궁금해져서 이번에 블로그에 정리하면서 확실히 알아가고자 한다.
👉📁Png(Portable Network Graphics)
- png 파일은 gif에 저작권 관련 문제가 있어 gif에 대체해 누구나 무료로 쓸 수 있는 형식을 개발하고자 한 데에서 탄생된 확장자이다. 이미지의 모든 데이터를 유지한다.
- png 파일은 래스터 이미지 파일 형식이다. 이것은 모든 png 이미지와 그래픽이 픽셀(pixel)로 구성되어 있음을 의미한다. 그래서 이미지를 확대하면 입자가 걸치어지는 픽셀화(계단 현상)가 나타난다. 또한, 이미지를 너무 축소해도 이미지가 희미해진다. 그래서 png 파일이 고해상도를 지원해도 무한대로 확대할 수는 없다.
- png 파일은 '고해상도'를 지원하므로 파일 크기가 크다. 따라서 이미지를 처리, 공유, 저장, 실행하는 데 시간이 걸려 페이지 로딩 시간이 길어진다.
- 비손실압축방식으로 원본이 훼손되지 않는다. 용량 대비해 화질이 좋은 편이다. gif의 단색 투명증과는 다르게 8비트 알파채널을 이용한 투명증을 제공하므로 투명, 반투명 모두 지원된다. gif와 달리 트루컬러(1600만 색)를 지원한다.
- 원본이 훼손되지 않는 대신 손실을 피한 압축방식이기 때문에 용량이 커질 수밖에 없다. gif의 장점은 모두 갖고있지만 애니메이션 기능은 제공하지 않는다.
- 단순한 형태의 일러스트 이미지(로고,아이콘) 같은 경우 화질이 깨끗해야 하므로 png로 저장하는 것이 좋다. 또한 배경이 투명이거나, 반투명인 이미지의 경우 png를 사용해야 한다.
- png 파일은 투명한 배경을 가진 로고 및 일러스트레이션을 위한 파일 유형이다.
👉📁Svg(Scalable Vector Graphic)
- svg 파일은 vector 파일 포맷이다. 픽셀로 이루어진 png 파일과는 다르게 라인과 곡선들로 이루어져 있다. 이런 점에서 파일을 확대하거나 줄였을때 이미지가 깨지지 않고 그대로 선명함을 유지한다.
- 또한 svg 파일은 XML로 작성되기 때문에 텍스트 편집기에서 열고 편집이 가능하다. 즉, 값을 조작 할 수 있기 때문에 js를 이용해서 svg 아이콘의 색상을 변경하거나 애니메이션을 적용시킬 수도 있어서 이미지 파일을 원하는 스타일에 맞게 변경이 가능하다.
- svg 파일 사이즈는 기본적으로는 작은 편에 속한다. 그러나 svg 파일의 경우는 수학을 기반으로 하는 점, 직선, 곡선과 같은 형태들로 구성이 되어있어서 수학적 계산 능력을 요구한다.
그렇기 때문에 단순한 이미지면 상관 없지만 복잡해질수록 크기가 커지거나 속도 저하를 일으킨다.
그래서 가능한 벡터 모양을 단순화 하는 것이 중요하다. - 그렇기에 svg는 로고,아이콘 또는 단순화된 이미지에 많이 활용된다.
- 또다른 주의사항으로는 svg 파일은 IE8 이하에서는 지원되지 않는다.
💡결론
결국 이미지를 어떤식으로 활용해서 사용할지에 따라서 확장자를 결정하면 된다.
svg 파일의 경우 png보다 파일이 더 적으르모 속도를 저하시키진 않지만 세부정보가 많은 디자인일 경우면 느려질 수 있다. 반면에 png 파일은 웹사진에 일반적으로 사용하는 포맷은 아니지만 세부 정보가 많은 고품질 디지털 사진의 인쇄, 편집 등에 사용하기에는 좋다.
또한, png와 svg 모두 웹 그래픽, 일러스트레이션, 로고, 인포그래픽, 표 등 복잡한 세부 사항을 표현할 수 있지만, svg 경우에는 XML 프로그래밍 언어로 작성되어 모두 코드가 아닌 텍스트로 작성되기 때문에 스크린 리더와 검색 엔진이 해당 텍스트를 분석하므로 접근성과 SEO(검색 엔진 최적화) 측면에서 좋다. svg 파일이 크기가 작아 페이지를 빠르게 로딩할 수 있는데 로딩 시간은 검색 엔진 순위를 높이는 데 매우 중요한 요소이기 때문이다. 이런 점에서는 png 보다는 svg 사용이 효율적이다. 이렇게 경우에 맞게 확장자를 선택해서 이미지 파일을 사용하는게 중요하다.
현재 프로젝트에서는 일단 이미지에 복잡한 세부사항이 들어가지 않아 대부분의 아이콘들은 전부 svg 확장자를 사용하고 있지만, 많은 애니메이션이나 디자인이 들어가게 되는 경우에는 페이지 최적화에 따라 이미지 확장자 선정도 신중해야 될 것 같다.
