Server Image Format (feat. JPG, PNG, WebP)

안녕하세요. 그린입니다 🍏

이번 포스팅에서는 앱에서 서버 이미지를 받아올때 서버 이미지 포맷의 차이와 선택 기준들에 대해 한번 정리해보려고 합니다 🙋🏻

---

Server Image Format

모바일 앱에서 이미지는 사용자 경험에 큰 영향을 끼칠 정도로 아주 중요합니다.

특히나 서버에서 내려받는 이미지 포맷은 앱의 성능, 용량, 로딩 속도에 직결되기 때문에 그 특성의 차이를 이해하고 상황에 따른 최적의 포맷을 선택하는것이 중요합니다.

 

그렇기에 본문에서 대표적으로 JPG, PNG, WebP의 차이를 알아보며 각 케이스마다 장단점들을 살펴보겠습니다 😃

 

---

Image Format Preview

포맷	압축 방식	투명도 지원	애니메이션 지원	용량	품질 손실	특징
JPG	손실 압축	X	X	적음	O	사진에 적합
PNG	무손실 압축	O	X	큼	X	아이콘, 로고 등 선명한 이미지 적합
WebP	모두 가능	O	O	가장 적음	선택 가능	차세대 포맷, 전반적으로 우수함

 

그럼 이어서 각 포맷들의 상세한 설명과 장단점을 살펴보겠습니다.

 

---

Image Format Detail

---

JPG

• 특징 - 손실 압축 방식으로, 이미지의 세부 정보를 일부 버리는 대신에 파일 크기를 대폭 줄여줍니다.
• 장점
  • 용량이 적음 - 네트워크 트래픽 절감에 유리
  • 사진에 적합 - 풍부한 색감, 자연스러운 그라디언트 표현이 뛰어남
• 단점
  • 투명도 미지원 - 배경이 투명한 이미지를 다룰 수 없음
  • 재압축 시 품질 저하 누락

대표적인 이미지 캐싱 라이브러리인 Kingfisher나 SDWebImage는 JPG를 잘 지원하며 주로 썸네일이나 사용자 프로필 사진처럼 품질보다 속도가 중요한 사진에 적합합니다.

---

 

PNG

• 특징 - 무손실 압축 방식으로 픽셀 정보를 모두 보존합니다. 
• 장점
  • 투명도 지원 - UI 구성 요소로 쓰기 좋음
  • 선명한 이미지 표현 - 텍스트, 라인 아트에 적합
• 단점
  • 파일 크기가 큼 - 네트워크 비용 증가
  • 애니메이션 미지원

PNG는 아이콘, 버튼, 배경 없는 오브젝트 이미지에 적합합니다.

앱 번들에 포함하는 이미지의 대부분은 PNG로 제공되는 경우가 많아요.

---

WebP

• 특징 - 구글이 개발한 차세대 이미지 포맷으로 손실, 무손실 압축 모두를 지원하고 투명도와 애니메이션도 지원합니다.
• 장점
  • 작은 용량 - 같은 품질 대비 JPG보다 25~35% 작고 PNG보다 작습니다.
  • 다기능 - 투명도, 애니메이션, 손실/무손실 압축 모두 지원
  • 빠른 로딩과 효율적인 캐싱
• 단점
  • iOS 지원 이슈 - iOS 14 이상부터 시스템적으로 WebP 지원이 내장되었습니다.

최근에는 서버에서 WebP만 제공하는 경우가 많습니다.

WebP는 썸네일, 피드 이미지, 배너 이미지 등 성능과 용량을 동시에 고려해야 하는 이미지에 가장 적합해요 😃

 

---

시나리오별 권장 포맷

케이스	권장 포맷	이유
피드 썸네일 / 배너	WebP	빠른 로딩, 용량 최소화
고해상도 이미지	JPG	자연스러운 품질과 적당한 용량
투명 배경	PNG	투명도 필수, 선명한 품질
iOS 13 이하 지원	PNG / JPG	WebP 미지원 이슈 방지
앱 번들 내 정적 리소스	PNG	무손실 압축, 알파값 지원

 

추가로, 디코딩에는 어떤것이 유리한지 살펴보겠습니다.

 

---

디코딩 성능 비교

포맷	디코딩 속도	설명
JPG	빠름	오래된 포맷으로 하드웨어/소프트웨어 최적화가 잘되어 있음
PNG	중간	무손실 압축이지만 구조가 단순해 디코딩 부담이 적음
WebP (손실)	느림 ~ 중간	압축 효율이 좋지만 구조가 복잡해 디코딩 비용 증가
WebP (무손실, 애니메이션)	느림	가장 느리고 복잡한 구조로 인해서 해제에 CPU 사용량이 큼

 

그럼 왜 WebP는 디코딩이 느릴까요?

 

WebP는 고도의 압축을 위해 더 복잡한 알고리즘을 사용합니다.

특히나 무손실 포맷 방식은 더 그렇죠.

그렇기에 디코딩 시 CPU 사용량이 높고 특히 저사양 기기에서는 렌더링 프레임 드롭이나 스크롤 끊김이 발생할 수 있습니다.

JPG는 하드웨어 가속이 일부 기기에서 지원되는 반면에 WebP는 소프트웨어 디코딩 중심입니다.

 

그렇기에 WebP는 여전히 JPG보다 느릴 수 있기에 리스트 스크롤 UI나 고빈도 이미지 로딩에선 성능 이슈가 발생할 가능성도 있어요.

특히나 UITableView, UICollectionView에서 rapid cell reuse가 일어나는 구조라면 주의하면 좋을것 같습니다.

 

애니메이션 등은 WebP로 하면 부담이 많이 되겠죠?

 

---

Conclusion

이미지 포맷은 클라이언트 성능에 직접적인 영향이 있습니다.

앱에서 지원하는 iOS 버전 범위를 명확히 살펴보고 다른 특성들도 고려해 포맷을 고르는것이 필요합니다.

 

---

References

Image I/O | Apple Developer Documentation

 

웹용 이미지 형식  |  WebP  |  Google for Developers

GitHub - SDWebImage/SDWebImageWebPCoder: A WebP coder plugin for SDWebImage, use libwebp