Improve decoding full-sized images in RCTImageLoader (#54184)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/54184

In Expo, someone reported (https://github.com/expo/expo/issues/40158) that `expo-image-manipulator` causes memory crashes when processing large images (> 30MB).
Image manipulator uses `RCTImageLoader` to load and decode images. As opposed to the Image component, it always requests for images in full size. For large images it may crash at `CGImageSourceCreateThumbnailAtIndex` which in the provided repro slowly increases memory usage until it finally crashes after a few seconds of running.
I figured out that not including the `kCGImageSourceThumbnailMaxPixelSize` option works much better, but using `CGImageSourceCreateImageAtIndex` instead of `CGImageSourceCreateThumbnailAtIndex` works even better – it's faster and consumes less memory during decoding. This is more or less what `SDWebImage` library does, see [`SDImageIOAnimatedCoder`](https://github.com/SDWebImage/SDWebImage/blob/master/SDWebImage/Core/SDImageIOAnimatedCoder.m#L488-L509).
With the proposed changes, it's still crashing but only for the largest image (64MB), other images (40MB and 50MB) are now working fine. Obviously, it cannot be fixed entirely and it's not recommended to load such big images without downscaling them.

## Changelog:

[IOS] [CHANGED] - Use `CGImageSourceCreateImageAtIndex` instead of `CGImageSourceCreateThumbnailAtIndex` to decode full-sized images

Pull Request resolved: https://github.com/facebook/react-native/pull/54127

Test Plan: I've tested the examples of the `Image` component in RNTester as well as the repro provided in https://github.com/expo/expo/issues/40158

Reviewed By: javache

Differential Revision: D84835416

Pulled By: cipolleschi

fbshipit-source-id: a182dd00f00194f0463ad4f583cc695647414fca
This commit is contained in:
Tomasz Sapeta
2025-10-17 09:00:45 -07:00
committed by meta-codesync[bot]
parent 269b0bd877
commit be4fcdafb1
@@ -293,18 +293,31 @@ UIImage *__nullable RCTDecodeImageWithData(NSData *data, CGSize destSize, CGFloa
// Calculate target size
CGSize targetSize = RCTTargetSize(sourceSize, 1, destSize, destScale, resizeMode, NO);
CGSize targetPixelSize = RCTSizeInPixels(targetSize, destScale);
CGFloat maxPixelSize =
fmax(fmin(sourceSize.width, targetPixelSize.width), fmin(sourceSize.height, targetPixelSize.height));
CGImageRef imageRef;
BOOL createThumbnail = targetPixelSize.width != 0 && targetPixelSize.height != 0 &&
(sourceSize.width > targetPixelSize.width || sourceSize.height > targetPixelSize.height);
NSDictionary<NSString *, NSNumber *> *options = @{
(id)kCGImageSourceShouldAllowFloat : @YES,
(id)kCGImageSourceCreateThumbnailWithTransform : @YES,
(id)kCGImageSourceCreateThumbnailFromImageAlways : @YES,
(id)kCGImageSourceThumbnailMaxPixelSize : @(maxPixelSize),
};
if (createThumbnail) {
CGFloat maxPixelSize = fmax(targetPixelSize.width, targetPixelSize.height);
// Get a thumbnail of the source image. This is usually slower than creating a full-sized image,
// but takes up less memory once it's done.
imageRef = CGImageSourceCreateThumbnailAtIndex(
sourceRef, 0, (__bridge CFDictionaryRef) @{
(id)kCGImageSourceShouldAllowFloat : @YES,
(id)kCGImageSourceCreateThumbnailWithTransform : @YES,
(id)kCGImageSourceCreateThumbnailFromImageAlways : @YES,
(id)kCGImageSourceThumbnailMaxPixelSize : @(maxPixelSize),
});
} else {
// Get an image in full size. This is faster than `CGImageSourceCreateThumbnailAtIndex`
// and consumes less memory if only the target size doesn't require downscaling.
imageRef = CGImageSourceCreateImageAtIndex(
sourceRef, 0, (__bridge CFDictionaryRef) @{
(id)kCGImageSourceShouldAllowFloat : @YES,
});
}
// Get thumbnail
CGImageRef imageRef = CGImageSourceCreateThumbnailAtIndex(sourceRef, 0, (__bridge CFDictionaryRef)options);
CFRelease(sourceRef);
if (!imageRef) {
return nil;