JPEG와 PNG의 차이점

블로그 이전했습니다!
https://computasha.com/basic/term/JPEG와+PNG의+차이점

---

✨ 오늘의 목표 : JPG와 PNG의 차이점을 이해하고, iOS 개발에 더 적합한 포맷 알기

🖼️ JPEG 포맷이란

JPEG(Joint Photographic Experts Group) 파일은 이미지를 저장하는 가장 일반적인 형식이다.

JPEG 파일은 빠른 저장과 전송을 위해 손실 압축 방식으로 이미지를 저장한다.

손실 압축 방식이란, 사람의 눈으로 볼 수 없는 시각적 데이터를 제거하고 색상 변형을 평균화하는 방법으로,
이를 통해 이미지 파일의 크기를 최대한 작게 유지할 수 있다.

다만 압축을 할때 원본 이미지의 품질이 훼손될 수 있다는 단점이 있다.

🖼️ PNG 포맷이란

PNG(Portable Network Graphic) 포맷은 무손실 압축 방식을 사용하므로 압축 시 모든 원본 데이터를 유지한다.
중요한 정보가 손실되지 않기 때문에 디테일한 이미지를 저장하는데 적합하다.

다만 이때문에 JPEG보다 파일 크기가 훨씬 크다는 단점이 있다.

+ PNG 파일은 투명 또는 반투명 배경의 그래픽을 처리할 수 있다.

📌 언제 어떤 포맷을 사용해야 할까?

이미지 디테일을 살리고 싶다 = PNG

PNG는 무손실 압축, JPEG는 손실 압축 방식을 제공한다.

파일을 편집하고 저장할 때마다 이미지의 일부 데이터가 손실되는 JPEG 파일과 달리, PNG는 모든 데이터를 유지한다.
따라서 아무리 파일을 편집하고 저장해도 이미지 품질이 유지되고 이미지가 흐려지거나 왜곡되지 않으므로 선명한 로고나 수치가 많이 포함되는 그래프에 적합하다.

파일 크기가 작아야 한다 = JPEG

JPEG는 손실 압축 방식을 사용하므로 품질이 저하될 수 있지만, 대용량 이미지를 압축해서 작은 용량으로 관리할 수 있다. 디스크 저장 공간이 제한적일 경우 유용하며, 로딩 시간이 단축된다는 것도 장점이다.

PNG는 무손실 압축 방식으로 인해 용량이 크기 때문에 저장 공간이 추가로 필요할 뿐만 아니라 웹 페이지의 반응 속도도 느려진다.

투명도 있는 이미지를 사용해야 한다 = PNG

JPEG는 투명한 배경을 지원하지 않기 때문에 로고나 텍스트 중심의 그래픽은 적합하지 않다.

이와 달리 PNG 파일은 투명도를 지원해서,
투명한 배경을 이미지에 적용할 수 있고, 투명도 수준도 조절할 수 있다.

🤔 iOS 개발에서는?

내가 생각하기에 앱을 개발하는데 사용되는 디자인 컴포넌트는 디테일도 중요하고 투명도가 필요한 이미지가 많기 때문에 PNG 포맷으로 사용하고,
유저의 이미지 데이터는 파일 크기, 전송 속도 등이 중요하기 때문에 JPEG 형태로 사용하는 게 좋을 것 같다.

✨ 알쓸신잡

래스터 파일

디지털 이미지 파일 포맷으로는 크게 래스터(Raster)와 벡터(Vector)가 있다.
디지털 사진과 디테일한 그래픽은 모두 래스터 형식으로 제공된다. JPEG, PNG, GIF 이미지가 대표적인 래스터 파일 유형이다.
래스터 파일은 픽셀 수가 제한되어 있기 때문에 크기를 조정할 경우 이미지가 왜곡되거나 흐려질 수 있다.
이 때문에 일러스트레이션과 로고 작업에서는 벡터 이미지가 사용되는데, 벡터는 이미지를 무한대로 확장하거나 축소할 수 있는 수학 공식으로 구성되므로, 크기를 조정해도 픽셀에 비해 해상도가 손실되지 않는다.

JPEG와 PNG 파일의 크기 제한

JPEG 이미지의 최대 크기(폭x높이)는 6만 5,535픽셀이라, 상세 정보가 많은 이미지를 저장해야 한다면 이를 고려해야 한다. PNG 파일의 크기는 이론상 제한이 없지만, 실제로는 컴퓨터의 메모리 공간, 파일을 보는 데 사용하는 소프트웨어 등에 제약을 받는다.

JPEG 메타데이터

EXIF(Exchangeable image file format)는 JPEG 파일에 포함된 메타데이터로, 다음과 같은 추가 정보를 제공한다.

이미지가 생성된 날짜와 시간
제조사, 모델, 조리개, ISO 속도 등의 카메라 설정
파일 관리자와 카메라의 LCD 화면에서 미리보기를 위한 썸네일
저작권 정보
사진이 촬영된 장소를 나타내는 지리적 위치 정보 태그

PNG는 EXIF 데이터를 저장할 수 없다.

---

참고 사이트

• https://www.adobe.com/kr/creativecloud/file-types/image/raster/jpeg-file.html

• https://www.adobe.com/kr/creativecloud/file-types/image/raster/png-file.html

• https://www.adobe.com/kr/creativecloud/file-types/image/raster.html