How to load a webp image with SDWebImage?

Question

I'm using SDWebImage to load images in my iOS app and I now want to use the webp format.

Here's my first try :

NSURL *url = [NSURL URLWithString:@"http://www.gstatic.com/webp/gallery/2.webp"];

[self.imageView setImageWithURL:url
               placeholderImage:nil
                        options:SDWebImageProgressiveDownload
 completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {

     if (error) {

         UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"Error" message:error.localizedDescription delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];

         [av show];
     }
 }];

It would work perfectly if the image was a jpeg (I tried) but with a webp it doesn't. The first time I call this code the error is :

Downloaded image has 0 pixels

Then the error turns to :

The operation couldn't be completed. (NSURLErrorDomain error -1100.)

What's wrong?

Answer 1

Actually the code above should work but the webp support is disabled by default in the library.

Adding SD_WEBP=1 in the preprocessor macros of the sdwebimage target (in build settings) will enable webp support

Answer 2

Add

pod 'SDWebImage/WebP'

into your podfile and then hit pod install. Cocoapods is gonna take care of the preprocessor flag as well.

From SDWebImage github page

There are 3 subspecs available now: Core, MapKit and WebP (this means you can install only some of the SDWebImage modules. By default, you get just Core, so if you need WebP, you need to specify it).

Answer 3

I have searched many posts that finally lead to here. And here is my solution after asking in github.

https://github.com/rs/SDWebImage/issues/1122

Steps:

1: Clone and add WebP.framework

clone the repository using git clone --recursive https://github.com/rs/SDWebImage.git

add full folder of SDWebImage and WebP.framework into your project.

2: in Build Settings -- Preprocessor Macros , add SD_WEBP=1.

ps:If using CocoaPods, I don't konw how to add WebP.framework into SDWebImage, so I choose add files into my project.

Answer 4

Swift 5 and Xcode 11

Use pod in podfile

pod 'SDWebImageWebPCoder'

Import this Library

import SDWebImageWebPCoder

Use this code under AppDelegate 'didFinishLaunchingWithOptions'

let WebPCoder = SDImageWebPCoder.shared
SDImageCodersManager.shared.addCoder(WebPCoder)

use this code under ViewController 'viewDidLoad'

@IBOutlet weak var imageView: UIImageView!
override func viewDidLoad() {
    super.viewDidLoad()

    //load from server
    let onlineFileUrl = URL(string: "http://www.gstatic.com/webp/gallery/2.webp")
     //load from project directory
        let loaclFileUrl = Bundle.main.url(forResource: "2", withExtension: "webp")
    DispatchQueue.main.async {
        self.imageView.sd_setImage(with: onlineFileUrl)
    }

}

Answer 5

Objective-C

Use pod in podfile

pod 'SDWebImageWebPCoder'

Import this Library

#import <SDWebImageWebPCoder.h>

Use this code under AppDelegate 'didFinishLaunchingWithOptions'

SDImageWebPCoder *WebPCoder = [SDImageWebPCoder sharedCoder];
[[SDImageCodersManager  sharedManager] addCoder:WebPCoder];

to download image

[self.yourImage sd_setImageWithURL:[NSURL URLWithString:@"your_url_webp" placeholderImage:[UIImage imageNamed:@"placeholder"]];