UIImage의 png와 jpeg의 차이점

이전 글에 이어서 PHPicker로 가져온 이미지를 FilManager를 이용해 저장하고, 저장한 이미지를 가져와서 보여주려고 한다. 가져온 이미

지는 png() 메서드를 사용해서, png 데이터로 변경 후 png 형식으로 저장했다.

 func savePetImage(petId: String, petImageList: [Data]) throws {
        guard let defaultDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first else { return }
        let petImageDirectoryURL = defaultDirectory.appendingPathComponent(petId, conformingTo: .directory)
        try FileManager.default.createDirectory(at: petImageDirectoryURL, withIntermediateDirectories: true)
        for images in 0..<petImageList.count {
            let imagePath = petImageDirectoryURL.appendingPathComponent("\(images)", conformingTo: .png)
            try petImageList[images].write(to: imagePath)
        }
    }

 

extension UIImageView {
    func configureImageFromFilePath(path: String) throws {
        guard let defaultPath = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first else { return }
        let imagePath: String
        if #available(iOS 16.0, *) {
            imagePath = defaultPath.appendingPathComponent(path, conformingTo: .png).path()
        } else {
            imagePath = defaultPath.appendingPathComponent(path, conformingTo: .png).path
        }
        if let imageFile = FileManager.default.contents(atPath: imagePath) {
            DispatchQueue.main.async { [weak self] in
                self?.image = UIImage(data: imageFile)
            }
        } else {
            throw FetchFileImageError.cannotFetchImage
        }
    }
}

 

문제 발생

이미지를 저장을 한 후 가져오니 또다시 이미지 방향 회전돼있었다.

 

이전 문제처럼 가져올 때 orient 방향에 문제가 있나 해서 디버깅해보니

회전이 적용이 안된 이미지(기본값)라고 나온다. 혹시나 해서 UIImage를 png 데이터로 변형시키고, 그걸 다시 UIImage로 만들어서 orientation의 값을 살펴봤더니, orientation값이 기본값으로 설정이 되어있다.

이번에는 png 대신에 jpeg형식으로 파일을 저장 및 읽어와 봤다.

 

이번에는 정상적으로 이미지가 들어갔다. 

이번에도 jpeg데이터를 분리해서 바로 UIImage를 생성해 본 결과 orientation이 제대로 적용된 걸 볼 수 있었다. 

문제의 원인

직접 저장된 이미지의 메타데이터를 확인해 본 결과, 메타데이터 값은 다음과 같았다.

jpeg

png

UIImage에서 png()로 데이터를 넘기면 방향에 대한 메타데이터가 사라지는 것을 볼 수 있다. 즉 png()로 데이터를 저장하면 orientation값이 없으므로, UIImage는 기본값인 up으로 되어있어 방향이 바뀐 이미지를 보여준 것이고, jpeg는 orientation 값을 가지고 있으므로 이 값으로 이미지 데이터를 회전시켜서 이미지를 보여준 것이다. 왜 이런 차이가 발생한 것일까?

 

png와 jpeg 차이점

png는 exif 데이터를 지원하지 않는다고 한다. exif는 사진의 날짜와 시간정보, 셔터 속도, 초점 거리, 사진의 세부 정보를 담아서 이미지파일 자체에 끼워져서 저장된다. 그래서 jpeg로 앨범에서 찍은 사진을 Filemanager에 저장을 하면 원본 사진의 exif 데이터 역시 함께 저장되므로 사진이 올바른 방향으로 보이게 되는 것이고, png로 데이터를 저장하게 되면, 원본사진에 존재하던 exif 데이터 자체는 사라진 채로 저장되는 듯하다. 

출처: https://www.adobe.com/kr/creativecloud/file-types/image/comparison/jpeg-vs-png.html

 

+ PNG도 버전에 따라서 exif를 지원한다고 해서 더 알아보았는데, 1.2 버전 (2017년 7월)부터 지원하기 시작했다고 한다. 그런데 맥북에서 png의 exif를 읽지 못하는걸 보면 아직 지원을 안하는듯 하다.

 

참고: https://www.adobe.com/kr/creativecloud/file-types/image/comparison/jpeg-vs-png.html