JPG나 HEIC 이미지를 React Native 앱에서 선택한 후
아래와 같은 코드로 업로드하려 하자 예상치 못한 현상이 발생했습니다:

const response = await fetch(uri);
const blob = await response.blob();
await fetch(presignedUrl, {
  method: 'PUT',
  body: blob,
});

원본 HEIC 이미지: 약 1.5MB
fetch() 호출 후 Response.body._data.size: 약 5.7MB
blob() 호출도 하지 않았는데, fetch만 했을 뿐인데 용량이 3.7배 증가했습니다.

문제: `fetch()` 호출만 해도 iOS에서 이미지가 재인코딩되어 용량이 증가함

Android에서는 문제 없음
iOS에서만 .heic 또는 .jpg를 fetch()로 읽었을 때 자동으로 UIImage 변환 후 재인코딩되는 것 같음
특히 HEIC → JPEG(quality: 1.0) 변환으로 인해 압축률 손실이 큼

문제의 원인: 이미지 업로드 흐름과 재인코딩 시점 분석

✅ 업로드 시 내부적으로 일어나는 흐름 (iOS 기준)

사용자가 이미지를 선택 (ImagePicker, launchImageLibrary)
- HEIC / JPG / PNG 등 원본 포맷 유지
fetch(uri) 호출
- iOS 내부에서:
  - file:// 경로를 인식
  - .heic, .jpg, .png 파일 → UIImage로 디코딩됨
  - 그리고 자동으로 다시 JPEG 품질 1.0로 인코딩됨
- 이 시점에서 용량 이미 증가
response.blob() 호출
- 이미 Response 내부에 포함된 Blob을 꺼낼 뿐
- Blob 생성 자체가 fetch 시점에 끝나 있음
fetch(presignedUrl, { body: blob })로 전송
- 파일 용량은 이미 커져 있고, 그대로 업로드됨

✅ 포맷별 용량 변화 테스트

포맷	원본 사이즈	fetch 이후	변화
HEIC	1.5MB	5.7MB	🔥 3.7배 증가
JPG	2.6KB	7.9KB	🔥 3배 증가
PNG	128KB	128KB	✅ 변화 없음

.heic, .jpg: UIImage로 디코딩 + JPEG 품질 1.0로 재압축됨 → 용량 증가
.png: 무손실 포맷이라 사이즈 거의 그대로 유지됨

해결 방법들

RNFetchBlob 사용 (wrap(filePath))

파일을 JS 메모리에 올리지 않고, 네이티브에서 스트림 방식으로 그대로 전송
UIImage로 처리되지 않음 → 용량 변화 없음

react-native-fs + axios/fetch로 직접 바이너리 업로드

readStream → Buffer → 서버 업로드 방식

파일 확장자를 .bin 등으로 바꾸고 fetch 사용

이미지로 인식되지 않으면 iOS가 UIImage로 디코딩하지 않음

실제 적용 예시: RNFetchBlob 사용

import RNFetchBlob from 'rn-fetch-blob';

await RNFetchBlob.fetch('PUT', presignedUrl, {
  'Content-Type': 'image/jpeg',
}, RNFetchBlob.wrap(uri.replace('file://', '')));

wrap()을 통해 파일 경로만 네이티브에 전달
파일을 디코딩하거나 재인코딩하지 않음
iOS에서도 HEIC → JPEG 변환 없이 원본 그대로 업로드 성공

장점

JS 메모리 사용 없음 (대용량 파일에도 안전)
파일 용량 증가 없음
HEIC → JPEG 자동 변환 방지
빠른 업로드 속도

배운 점

React Native에서 fetch(uri)는 플랫폼마다 동작이 다르며, 특히 iOS는 이미지 포맷에 민감하게 반응한다
JPEG/HEIC 파일을 UIImage로 자동 처리하면서 암묵적으로 용량이 증가할 수 있음
업로드 성능, 품질 유지, 네트워크 효율을 고려할 때, 네이티브 스트림 업로드가 훨씬 안전한 방식임을 체감

참고

React Native GitHub Issue - iOS fetch file re-encoding

RNFetchBlob 공식 문서

React Native fetch(file://...) 사용 시 이미지 업로드 용량이 3배 증가하는 이유