• Shaving Our Image Size
  • The Nuggets translation Project
  • Translator: circlelove
  • Proofreader: Rockzhai, LDHlfzysys

Use webP to reduce the size of images

Pictures are our tool to show our products to our users. As the old saying goes, “A picture is worth a thousand words”! Images often convey meanings that words cannot. Of course, graphics also presents a number of outstanding technical challenges due to bandwidth and resource constraints on mobile devices.

The technical challenge we face at DSC is the need for transparent alpha channels in product images. We already have a beautiful faux wood background on the app, and we need a format with a transparent alpha channel. The most common image format on ios is PNG. PNG looks great, loads fast and supports native iOS. One major drawback is that our high fidelity product picture sizes are large. Many of these product images are megabytes in size, and our application has hundreds of images.

We developed a WebP view control for iOS applications to view images. You can find it at On Github.

A little background

We need to upload or download these large PNG images when submitting an APP to the APP store and when downloading an APP from the APP store. These show different scenarios. One requires us to decompress before presentation, the other may require us to download hundreds of megabytes of resource images over a slow Internet connection. We finally decided to choose compression for our first release. Of course, this saves a lot of bandwidth, but it still leaves the APP 230 MB in size after installation. Fortunately, the story doesn’t end there. We can also reduce the size of the image.

Cut size

We need an image format that supports transparent alpha channels and is smaller than PNG. I stumbled upon Google’s WebP. Our tests show that WebP formatted images are only one-tenth the size of the original PNG reference version, and they also support transparent alpha channels. This saves bandwidth and disk space when new images are downloaded and cached. The main drawback is that WebP images require longer decoding, which is not supported by iOS native systems. We felt that the reduction in image size was worth decoding longer, so we worked on building a WebP image viewer for iOS.

We started developing the C source code for WebP as a framework (actually more like the Swift framework). This is then coupled to an Object-C class using the WebP C API (a Swift version is in the works!). To create a class called WebPImage. And then using WebPImage is more like using the standard UIImage class. The main difference is that WebPImage addresses the slow asynchronous decoding of WebP image data. It also supports all native iOS formats like PNG and JPEG, as well as non-standard ones like animated GIfs and WebP image data, because we have amazing animated images in our app.

WebPImageView *imgView = [[WebPImageView alloc] initWithFrame:CGRectMake(0, 30, 300, 300)];
[self.view addSubview:imgView];
imgView.url = [NSURL URLWithString:@"https://yourUrl/[email protected]"];

// Add the loading View.
WebPLoadingView *loadingView = [[WebPLoadingView alloc] init];
loadingView.lineColor = [UIColor orangeColor];
loadingView.lineWidth = 8;

// Add the loading view to the imageView.
imgView.loadingView = loadingView;

// If you want to add some inset on the image.
CGFloat pad = 20;
imgView.loadingInset = UIEdgeInsetsMake(pad, pad, pad*2, pad*2);
Copy the code

You can find the above code on Github

And then we created a WebPImageView, which is a UIImageView with upgraded functionality. It provides a remote cache of images and a URL to download the decoded progress bar. This way we can replace all UIImageViews with our WebPImageView, taking full advantage of the WebP format for “web-available” image viewing.

conclusion

At the time of writing, we were able to reduce the initial release of the app from 230 MB to just 30 MB and include more images. The result is seven times more compression using WebP format. This required us to copy and commit some existing iOS UI components and create a PNG conversion to WebP expansion process, but we believe the results speak for themselves. We can provide iOS users with a great experience that meets their data plan and respects their storage needs. Dollar Shave Club, Reduce images to reduce the world.