@3x이미지의 높이가 6000px일때 픽셀이 깨져보이는 문제가 발생했습니다.
이유를 찾아보니 이에대한 토론도 굉장히 활성화되어있었고, facebook에서 만든 fresco와 react native팀과의 충돌 문제가 있었습니다.
https://github.com/facebook/react-native/issues/21301
결국은 큰 이미지는 당장 해결할 수 있는 방법은 없어보였습니다.
fresco
Facebook에서 만든 Android용 이미지 라이브러리입니다.
이미지 로딩과 출력을 처리하기 때문에 이 기능을 위한 추가적인 처리를 할 필요없는 라이브러리입니다.
rn의 이미지를 꺠트린 원인은 fresco에서 하는 downsampling으로 인해 생긴 문제입니다.
https://github.com/facebook/fresco/issues/2397#issuecomment-529093406
이 코멘트에서는 fresco안에 2024px이상일때 downsampling을 하도록 하드코딩 되어있음을 확인할수 있다.
https://github.com/facebook/fresco/blob/d30c46b12cab5ddb001c0653164ba51b79c0e0e5/imagepipeline-base/src/main/java/com/facebook/imageutils/BitmapUtil.java#L39
원인은 파악했으니 react native에서는 fresco를 다룰수 있는 방법이 없을까 하고 공식문서를 찾아보았습니다.
Image - resizeMethod
Image 컴포넌트에는 fresco 설정을 할수 있는 resizeMethod 라는 요소가 있습니다.
resize는 이미지가 클때, scale은 이미지가 작을때나 조금 클때 빠르게 렌더링 할수 있습니다.
auto는 resize, scale중 적절하게 선택하는것입니다.
이 세가지 모두 결국은 fresco를 통해 이미지를 렌더링 하기 때문에 하드코딩된 fresco를 피할 방법은 없었습니다.
https://reactnative.dev/docs/0.67/image#resizemethod-android
FastImage
이 문제를 해결하기 위한 방법중 react-native-fast-image를 쓰라는 이야기가 많았습니다.
react-native-fast-image는 fresco를 써서 이미지를 렌더링하는게 아닌 이미지에 데이터 캐싱으로 보여주는 방식이라 다운샘플링을 피할수 있을거라 예상했지만, fast image는 이미지가 큰 경우 처음에는 흐린 이미지를 보여주는 이슈가 있었습니다..
https://github.com/DylanVann/react-native-fast-image/issues/545
fresco 다운샘플링 피하기
fresco는 이미지가 한면이 2024px 이상인 경우 downsampling을 합니다.
해결방법은 @3x일때 이미지 최대 크기가 2024px 미만이면 되지 않을까.. 생각해봤습니다.
디자이너분께 670px로 쪼개서 나눠달라고 해봐야 할것 같습니다.
하고 후기 남겨야징
https://github.com/DylanVann/react-native-fast-image
https://engineering.fb.com/2015/03/26/android/introducing-fresco-a-new-image-library-for-android/
