SDWebImageJPEGXLCoder

SDWebImageJPEGXLCoder is a coder plugin for SDWebImage, to supports JPEG-XL format.

See: Why JPEG-XL

This coder supports the HDR/SDR decoding, as well as JPEG-XL aniamted image.

Notes

1. This coder supports animation via UIImageView/NSImageView, no SDAnimatedImageView currently (Because the current coder API need codec supports non-sequential frame decoding, but libjxl does not have. Will remove this limit in SDWebImage 6.0)
2. Apple's ImageIO supports JPEGXL decoding from iOS 17/tvOS 17/watchOS 10/macOS 14 (via: WWDC2023), so SDWebImage on those platform can also decode JPEGXL images using SDImageIOCoder (but no animated JPEG-XL support)
3. From v0.2.0, this coder support JXL encoding, including HDR, static JXL, animated JXL encoding as well (a huge work...)

Requirements

• iOS 9.0
• macOS 10.11
• tvOS 9.0
• watchOS 2.0
• visionOS 1.0

Installation

CocoaPods

SDWebImageJPEGXLCoder is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'SDWebImageJPEGXLCoder'

Carthage

SDWebImageJPEGXLCoder is available through Carthage.

github "SDWebImage/SDWebImageJPEGXLCoder"

Note: You must use carthage build --use-xcframeworks for integration (because it supports 5 Apple platforms. You can limit platforms you need by using --platform iOS,visionOS)

Swift Package Manager

SDWebImageJPEGXLCoder is available through Swift Package Manager.

let package = Package(
    dependencies: [
        .package(url: "https://github.com/SDWebImage/SDWebImageJPEGXLCoder.git", from: "0.1.0")
    ]
)

Usage

Add Coder

Before using SDWebImage to load JPEGXL images, you need to register the JPEGXL Coder to your coders manager. This step is recommended to be done after your App launch (like AppDelegate method).

• Objective-C

// Add coder
SDImageJPEGXLCoder *JPEGXLCoder = [SDImageJPEGXLCoder sharedCoder];
[[SDImageCodersManager sharedManager] addCoder:JPEGXLCoder];

• Swift

// Add coder
let JPEGXLCoder = SDImageJPEGXLCoder.shared
SDImageCodersManager.shared.addCoder(JPEGXLCoder)

Loading

• Objective-C

// JPEG-XL online image loading
NSURL *JPEGXLURL;
UIImageView *imageView;
[imageView sd_setImageWithURL:JPEGXLURL];

• Swift

// JPEG-XL online image loading
let JPEGXLURL: URL
let imageView: UIImageView
imageView.sd_setImage(with: JPEGXLURL)

Note: You can also test animated JPEG-XL on UIImageView/NSImageView and WebImage (via SwiftUI port)

Decoding

• Objective-C

// JPEGXL image decoding
NSData *JPEGXLData;
UIImage *image = [[SDImageJPEGXLCoder sharedCoder] decodedImageWithData:JPEGXLData options:nil];

• Swift

// JPEGXL image decoding
let JPEGXLData: Data
let image = SDImageJPEGXLCoder.shared.decodedImage(with: data, options: nil)

Encoding

• Objective-c

// JPEGXL image encoding
UIImage *image;
NSData *JPEGXLData = [[SDImageJPEGXLCoder sharedCoder] encodedDataWithImage:image format:SDImageFormatJPEGXL options:nil];
// Encode Quality
NSData *lossyJPEGXLData = [[SDImageJPEGXLCoder sharedCoder] encodedDataWithImage:image format:SDImageFormatJPEGXL options:@{SDImageCoderEncodeCompressionQuality : @(0.1)}]; // [0, 1] compression quality

• Swift

// JPEGXL image encoding
let image: UIImage
let JPEGXLData = SDImageJPEGXLCoder.shared.encodedData(with: image, format: .jpegxl, options: nil)
// Encode Quality
let lossyJPEGXLData = SDImageJPEGXLCoder.shared.encodedData(with: image, format: .jpegxl, options: [.encodeCompressionQuality: 0.1]) // [0, 1] compression quality

Animated JPEG-XL Encoding

• Objective-c

// Animated encoding
NSMutableArray<SDImageFrames *> *frames = [NSMutableArray array];
for (size_t i = 0; i < images.count; i++) {
    SDImageFrame *frame = [SDImageFrame frameWithImage:images[i] duration:0.1];
    [frames appendObject:frame];
}
NSData *animatedData = [[SDImageJPEGXLCoder sharedCoder] encodedDataWithFrames:frames loopCount:0 format:SDImageFormatJPEGXL options:nil];

• Swift

// Animated encoding
var frames: [SDImageFrame] = []
for i in 0..<images.count {
    let frame = SDImageFrame(image: images[i], duration: 0.1)
    frames.append(frame)
}
let animatedData = SDImageJPEGXLCoder.shared.encodedData(with: frames, loopCount: 0, format: .jpegxl, options: nil)

Advanced jxl codec options

For advanced user who want detailed control like cjxl command line tool, you can pass the underlying encode options in

• Objective-C

NSDictionary *frameSetting = @{
    @(JXL_ENC_FRAME_SETTING_EFFORT) : @(10),
    @(JXL_ENC_FRAME_SETTING_BROTLI_EFFORT) : @(11)
};
NSData *data = [SDImageJPEGXLCoder.sharedCoder encodedDataWithImage:image format:SDImageFormatJPEGXL options:@{
    SDImageCoderEncodeJXLDistance : @(3.0), // jxl -distance
    SDImageCoderEncodeJXLFrameSetting : frameSetting, // jxl -effort
}];

• Swift

let frameSetting = [
    JXL_ENC_FRAME_SETTING_EFFORT.rawValue : 10,
    JXL_ENC_FRAME_SETTING_BROTLI_EFFORT.rawValue : 11
]
let data = SDImageJPEGXLCoder.shared.encodedData(with: image, format: .jpegxl, options: [
    .encodeJXLDistance : 3.0, // jxl -distance
    .encodeJXLFrameSetting : frameSetting, // jxl -effort
]);

Example

To run the example project, clone the repo, and run pod install from the root directory first. Then open SDWebImageJPEGXLCoder.xcworkspace.

This is a demo to show how to use JPEG-XL and animated JPEG-XL images via SDWebImageJPEGXLCoderExample target.

Screenshot

These JPEG-XL images are from JXL Art Gallery

Author

DreamPiggy

License

SDWebImageJPEGXLCoder is available under the MIT license. See the LICENSE file for more info.

Thanks

• libjxl