Improving Image Compression – What We’ve Learned from Whatsapp
2015-11-06 10:35
387 查看
Toggle navigation
PRODUCTS
Built.io Backend
Built.io Contentstack
Built.io Flow
SERVICES
Development Services
Dev Ops Services
Design Services
Blog
ABOUT
Company
News & Awards
Events
Careers
Partners
Contact
Login
Sign up
by akshay
Anyone who has used
Whatsapp has observed how quickly images can be shared even if they are large files.
By large files, I mean high resolution images often ranging from 1-4 MB. For example, the iPhone 4S, with an 8MP camera takes fairly large photos: 3264×2448 pixels (8MP means 8 million pixels). But when you share these images through Whatsapp, it compresses
the images which allows for incredibly fast sharing.
I was playing around with a wide variety of image sizes to learn how Whatsapp compresses them.
For example, an image with dimensions 3264×2448 (3 MB) is converted to an image with dimensions 800×600 (~70KB).
When compressing images, the aspect ratio is maintained. i.e the resulting compressed image has same aspect ratio as the original image. In the above case, an aspect ratio of 4:3.
I tried images with different dimensions: 3264×2448, 1280×720, 1280×1024, 1024×768, 480×360, and 400×300.
One thing that I noticed was the images with dimensions greater than 800×600 were scaled down to a maximum resolution of 800×600 (smaller images weren’t scaled).
This chart outlines the results:
It is clear from the last three entries that in addition to being scaled down, images are compressed by Whatsapp when they’re saved to JPG.
After playing around a bit with
50% or a factor 0.5.
With some assistance from
stackoverflow, I was able to construct a function in Objective-C that compresses the images exactly like Whatsapp does. I even compared the results with Whatsapp compressed images and they were identical.
Here’s the function I created:
You can find the above code on
GitHub.
This entry was posted in
iOS,
Learning,
Mobile,
Tools by akshay. Bookmark the
permalink.
← PreviousNext
→
Richi on
May 29, 2013 at 7:28 am said:
good analysis !!
thx !
Reply
↓
patro on
September 25, 2013 at 1:47 pm said:
your effort answer to a question i had. so this is why pix shared by whatsapp are just shit when you view them as shared media on ipad…
they could make a function that let choose the receiver how the pic must look, like original or resized..
if in good resolution like 3Mg pixel just hold them for 24h before to delete them.
Reply
↓
Ilo on
March 7, 2014 at 12:16 pm said:
Totally agree with you bro! They need an option to send the ORIGINAL file
Reply
↓
ashwini on
August 10, 2015 at 4:03 am said:
yes absolutely rite..they have to do some changes with watsapp as orginal pics are getting bully if they do so everyone’s pics will show with high quality.
Reply
↓
Jesus on
December 10, 2013 at 10:38 am said:
Dude, i fucking love you! Your code just solved a problem i had in my app, to send a pic to the server.
Reply
↓
pooja on
January 20, 2014 at 10:24 pm said:
can you tel what is the advantage of maintaining the same aspect ratio while compressing??
Reply
↓
jake on
April 9, 2014 at 1:32 am said:
Seriously?? Isn’t that obvious?? If aspect ratio is not kept same the whole pic would look either compressed from sides or elongated..
Reply
↓
Pierluca on
March 6, 2014 at 3:15 am said:
Hi man!! Nice work!! But just a question, do you know where can a try to find something to modify the whatsapp compression on iOS app. Thanks a lot
Reply
↓
Matthew on
April 1, 2014 at 10:41 am said:
Thank you so much for this one! Saved me a lot of time reproducing WhatsApp compressing method!
Reply
↓
stefano on
April 26, 2014 at 11:16 am said:
I heard that telegram sends images without scaling them.
Reply
↓
btkh95 on
June 12, 2014 at 8:26 am said:
So that means I can get into whatsapp scripting to alter the compression to have no compression at all? If so, pls tell me how to find the pathway thanks
Reply
↓
prathamesh on
October 7, 2014 at 4:23 am said:
How to get selected image from gallery in android app??
Please reply..
Reply
↓
Rajesh on
December 5, 2014 at 12:18 am said:
Demo Please
Reply
↓
Vega on
January 22, 2015 at 4:10 am said:
What namespace can be used?
Reply
↓
peter on
May 14, 2015 at 9:53 pm said:
This code is awesome thank you: below is the code in swift:
@IBAction func signUp(sender: AnyObject) {
let imageData = UIImagePNGRepresentation(self.profilePic.image)
let image = UIImage(data: imageData)
func compressImage(image:UIImage) -> NSData {
// Reducing file size to a 10th
var actualHeight : CGFloat = image.size.height
var actualWidth : CGFloat = image.size.width
var maxHeight : CGFloat = 1136.0
var maxWidth : CGFloat = 640.0
var imgRatio : CGFloat = actualWidth/actualHeight
var maxRatio : CGFloat = maxWidth/maxHeight
var compressionQuality : CGFloat = 0.5
if (actualHeight > maxHeight || actualWidth > maxWidth){
if(imgRatio maxRatio){
//adjust height according to maxWidth
imgRatio = maxWidth / actualWidth;
actualHeight = imgRatio * actualHeight;
actualWidth = maxWidth;
}
else{
actualHeight = maxHeight;
actualWidth = maxWidth;
compressionQuality = 1;
}
}
var rect = CGRectMake(0.0, 0.0, actualWidth, actualHeight);
UIGraphicsBeginImageContext(rect.size);
image.drawInRect(rect)
var img = UIGraphicsGetImageFromCurrentImageContext();
let imageData = UIImageJPEGRepresentation(img, compressionQuality);
UIGraphicsEndImageContext();
return imageData;
}
let compressedImage = compressImage(image!)
let picture = PFFile(name: “image.png”, data: compressedImage)
PFUser.currentUser()!.setObject(picture, forKey: “profilePic”)
PFUser.currentUser()!.saveInBackgroundWithBlock {
(success: Bool, error: NSError?) -> Void in
if (success) {
println(“image has been saved”)
} else {
println(“image failed”)
}
}
}
Reply
↓
Hank 72 on
June 1, 2015 at 2:49 pm said:
Does Whatsapp compress all video files as well?
Reply
↓
rendl42 on
June 2, 2015 at 9:48 am said:
Any idea if this is still true after the introduction of retina and other HD devices?
Reply
↓
rendl42 on
June 2, 2015 at 9:48 am said:
By the way, thanks heaps for this research and the code. Very useful!!!
Reply
↓
Compress.Photo on
July 28, 2015 at 11:33 pm said:
There are many online tools like compress.photos where you can compress the images without loosing the quality of image.
Reply
↓
Pingback:
How to compress - Resize image on iOS - BlogoSfera
carmelito on
August 16, 2015 at 6:23 pm said:
Great tutorial! Solved my problem with my app! Continue Helping!
I converted it to swift:
func compressImage(image: UIImage) -> UIImage {
var actualHeight : CGFloat = image.size.height
var actualWidth : CGFloat = image.size.width
var maxHeight : CGFloat = 600.0
var maxWidth : CGFloat = 800.0
var imgRatio : CGFloat = actualWidth/actualHeight
var maxRatio : CGFloat = maxWidth/maxHeight
var compressionQuality : CGFloat = 0.5 //50 percent compression
if ((actualHeight > maxHeight) || (actualWidth > maxWidth)){
if(imgRatio maxRatio){
//adjust height according to maxWidth
imgRatio = maxWidth / actualWidth;
actualHeight = imgRatio * actualHeight;
actualWidth = maxWidth;
}
else{
actualHeight = maxHeight;
actualWidth = maxWidth;
}
}
var rect = CGRectMake(0.0, 0.0, actualWidth, actualHeight)
UIGraphicsBeginImageContext(rect.size)
image.drawInRect(rect)
var img : UIImage = UIGraphicsGetImageFromCurrentImageContext()
var imageData = UIImageJPEGRepresentation(img, compressionQuality)
UIGraphicsEndImageContext()
return UIImage(data: imageData)!
}
Reply
↓
natahorchata on
August 20, 2015 at 9:47 am said:
Best app to share stickers in whatsapp!!
https://play.google.com/store/apps/details?id=com.whatsappsmileys.stickers&hl=en
Reply
↓
*
Name *
Email *
Website
Comment
Flow Democratizes Integration at Integrate 2015
The Built.io team was out in full force at the Integrate 2015 Conference last week, demonstrating how Built.io Flow brings the…
Read more…
Published on October 7, 2015
Efficiently
scale down instances using AWS Lambda, CloudWatch, and SNS
Within Amazon Web Services, EC2 instances can be scaled up easily based on various metrics using auto-scaling. You can use…
Read more…
Published on October 6, 2015
Built.io
Flow Makes Big Dreams Come True at Dreamforce
Last week, Built.io showcased Built.io Flow, our new integration Platform-as-a-Sevice (iPaaS) offering, at Dreamforce in downtown San Francisco. Built.io Flow…
Read more…
Published on September 22, 2015
We’re
Democratizing Integration with Built.io Flow Integration Platform-as-a-Service (iPaaS)
For the last eight years, we’ve made it our mission to democratize integration. We believe that enterprise integration across software…
Read more…
Published on September 10, 2015
Introducing Markdown in
Built.io Contentstack
The latest Built.io Contentstack upgrade brings you the most-awaited feature: a full-featured Markdown Editor. This Markdown Editor allows you to add…
Read more…
Published on September 9, 2015
Built.io Backend
Built.io Contentstack
Built.io Flow
SERVICES
Development Services
Dev Ops Services
Design Services
Blog
ABOUT
Company
News & Awards
Events
Careers
Partners
Contact
Login
Sign up
Improving Image Compression – What We’ve Learned from Whatsapp
Posted on March 4, 2013by akshay
Anyone who has used
Whatsapp has observed how quickly images can be shared even if they are large files.
By large files, I mean high resolution images often ranging from 1-4 MB. For example, the iPhone 4S, with an 8MP camera takes fairly large photos: 3264×2448 pixels (8MP means 8 million pixels). But when you share these images through Whatsapp, it compresses
the images which allows for incredibly fast sharing.
I was playing around with a wide variety of image sizes to learn how Whatsapp compresses them.
For example, an image with dimensions 3264×2448 (3 MB) is converted to an image with dimensions 800×600 (~70KB).
When compressing images, the aspect ratio is maintained. i.e the resulting compressed image has same aspect ratio as the original image. In the above case, an aspect ratio of 4:3.
I tried images with different dimensions: 3264×2448, 1280×720, 1280×1024, 1024×768, 480×360, and 400×300.
One thing that I noticed was the images with dimensions greater than 800×600 were scaled down to a maximum resolution of 800×600 (smaller images weren’t scaled).
This chart outlines the results:
| Original Resolution (size) | Compressed Resolution (size) |
|---|---|
| 1280×720 (421 KB) | 800×450 (45 KB) |
| 1280×1024 (153 KB) | 800×640 (84 KB) |
| 1024×768 (137 KB) | 800×600 (64 KB) |
| 3264×2448 (3 MB) | 800×600 (69 KB) |
| 800×600 (226 KB) | 800×600 (68 KB) |
| 480×360 (30 KB) | 480×360 (21 KB) |
| 400×300 (24 KB) | 400×300 (22 KB) |
After playing around a bit with
UIImageJPEGRepresentation ( UIImage *image, CGFloat compressionQuality), I found that the compressionQuality was
50% or a factor 0.5.
With some assistance from
stackoverflow, I was able to construct a function in Objective-C that compresses the images exactly like Whatsapp does. I even compared the results with Whatsapp compressed images and they were identical.
Here’s the function I created:
(UIImage *)compressImage:(UIImage *)image{
float actualHeight = image.size.height;
float actualWidth = image.size.width;
float maxHeight = 600.0;
float maxWidth = 800.0;
float imgRatio = actualWidth/actualHeight;
float maxRatio = maxWidth/maxHeight;
float compressionQuality = 0.5;//50 percent compression
if (actualHeight > maxHeight || actualWidth > maxWidth){
if(imgRatio < maxRatio){
//adjust width according to maxHeight
imgRatio = maxHeight / actualHeight;
actualWidth = imgRatio * actualWidth;
actualHeight = maxHeight;
}
else if(imgRatio > maxRatio){
//adjust height according to maxWidth
imgRatio = maxWidth / actualWidth;
actualHeight = imgRatio * actualHeight;
actualWidth = maxWidth;
}
else{
actualHeight = maxHeight;
actualWidth = maxWidth;
}
}
CGRect rect = CGRectMake(0.0, 0.0, actualWidth, actualHeight);
UIGraphicsBeginImageContext(rect.size);
[image drawInRect:rect];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
NSData *imageData = UIImageJPEGRepresentation(img, compressionQuality);
UIGraphicsEndImageContext();
return [UIImage imageWithData:imageData];
}You can find the above code on
GitHub.
This entry was posted in
iOS,
Learning,
Mobile,
Tools by akshay. Bookmark the
permalink.
← PreviousNext
→
Richi on
May 29, 2013 at 7:28 am said:
good analysis !!
thx !
Reply
↓
patro on
September 25, 2013 at 1:47 pm said:
your effort answer to a question i had. so this is why pix shared by whatsapp are just shit when you view them as shared media on ipad…
they could make a function that let choose the receiver how the pic must look, like original or resized..
if in good resolution like 3Mg pixel just hold them for 24h before to delete them.
Reply
↓
Ilo on
March 7, 2014 at 12:16 pm said:
Totally agree with you bro! They need an option to send the ORIGINAL file
Reply
↓
ashwini on
August 10, 2015 at 4:03 am said:
yes absolutely rite..they have to do some changes with watsapp as orginal pics are getting bully if they do so everyone’s pics will show with high quality.
Reply
↓
Jesus on
December 10, 2013 at 10:38 am said:
Dude, i fucking love you! Your code just solved a problem i had in my app, to send a pic to the server.
Reply
↓
pooja on
January 20, 2014 at 10:24 pm said:
can you tel what is the advantage of maintaining the same aspect ratio while compressing??
Reply
↓
jake on
April 9, 2014 at 1:32 am said:
Seriously?? Isn’t that obvious?? If aspect ratio is not kept same the whole pic would look either compressed from sides or elongated..
Reply
↓
Pierluca on
March 6, 2014 at 3:15 am said:
Hi man!! Nice work!! But just a question, do you know where can a try to find something to modify the whatsapp compression on iOS app. Thanks a lot
Reply
↓
Matthew on
April 1, 2014 at 10:41 am said:
Thank you so much for this one! Saved me a lot of time reproducing WhatsApp compressing method!
Reply
↓
stefano on
April 26, 2014 at 11:16 am said:
I heard that telegram sends images without scaling them.
Reply
↓
btkh95 on
June 12, 2014 at 8:26 am said:
So that means I can get into whatsapp scripting to alter the compression to have no compression at all? If so, pls tell me how to find the pathway thanks
Reply
↓
prathamesh on
October 7, 2014 at 4:23 am said:
How to get selected image from gallery in android app??
Please reply..
Reply
↓
Rajesh on
December 5, 2014 at 12:18 am said:
Demo Please
Reply
↓
Vega on
January 22, 2015 at 4:10 am said:
What namespace can be used?
Reply
↓
peter on
May 14, 2015 at 9:53 pm said:
This code is awesome thank you: below is the code in swift:
@IBAction func signUp(sender: AnyObject) {
let imageData = UIImagePNGRepresentation(self.profilePic.image)
let image = UIImage(data: imageData)
func compressImage(image:UIImage) -> NSData {
// Reducing file size to a 10th
var actualHeight : CGFloat = image.size.height
var actualWidth : CGFloat = image.size.width
var maxHeight : CGFloat = 1136.0
var maxWidth : CGFloat = 640.0
var imgRatio : CGFloat = actualWidth/actualHeight
var maxRatio : CGFloat = maxWidth/maxHeight
var compressionQuality : CGFloat = 0.5
if (actualHeight > maxHeight || actualWidth > maxWidth){
if(imgRatio maxRatio){
//adjust height according to maxWidth
imgRatio = maxWidth / actualWidth;
actualHeight = imgRatio * actualHeight;
actualWidth = maxWidth;
}
else{
actualHeight = maxHeight;
actualWidth = maxWidth;
compressionQuality = 1;
}
}
var rect = CGRectMake(0.0, 0.0, actualWidth, actualHeight);
UIGraphicsBeginImageContext(rect.size);
image.drawInRect(rect)
var img = UIGraphicsGetImageFromCurrentImageContext();
let imageData = UIImageJPEGRepresentation(img, compressionQuality);
UIGraphicsEndImageContext();
return imageData;
}
let compressedImage = compressImage(image!)
let picture = PFFile(name: “image.png”, data: compressedImage)
PFUser.currentUser()!.setObject(picture, forKey: “profilePic”)
PFUser.currentUser()!.saveInBackgroundWithBlock {
(success: Bool, error: NSError?) -> Void in
if (success) {
println(“image has been saved”)
} else {
println(“image failed”)
}
}
}
Reply
↓
Hank 72 on
June 1, 2015 at 2:49 pm said:
Does Whatsapp compress all video files as well?
Reply
↓
rendl42 on
June 2, 2015 at 9:48 am said:
Any idea if this is still true after the introduction of retina and other HD devices?
Reply
↓
rendl42 on
June 2, 2015 at 9:48 am said:
By the way, thanks heaps for this research and the code. Very useful!!!
Reply
↓
Compress.Photo on
July 28, 2015 at 11:33 pm said:
There are many online tools like compress.photos where you can compress the images without loosing the quality of image.
Reply
↓
Pingback:
How to compress - Resize image on iOS - BlogoSfera
carmelito on
August 16, 2015 at 6:23 pm said:
Great tutorial! Solved my problem with my app! Continue Helping!
I converted it to swift:
func compressImage(image: UIImage) -> UIImage {
var actualHeight : CGFloat = image.size.height
var actualWidth : CGFloat = image.size.width
var maxHeight : CGFloat = 600.0
var maxWidth : CGFloat = 800.0
var imgRatio : CGFloat = actualWidth/actualHeight
var maxRatio : CGFloat = maxWidth/maxHeight
var compressionQuality : CGFloat = 0.5 //50 percent compression
if ((actualHeight > maxHeight) || (actualWidth > maxWidth)){
if(imgRatio maxRatio){
//adjust height according to maxWidth
imgRatio = maxWidth / actualWidth;
actualHeight = imgRatio * actualHeight;
actualWidth = maxWidth;
}
else{
actualHeight = maxHeight;
actualWidth = maxWidth;
}
}
var rect = CGRectMake(0.0, 0.0, actualWidth, actualHeight)
UIGraphicsBeginImageContext(rect.size)
image.drawInRect(rect)
var img : UIImage = UIGraphicsGetImageFromCurrentImageContext()
var imageData = UIImageJPEGRepresentation(img, compressionQuality)
UIGraphicsEndImageContext()
return UIImage(data: imageData)!
}
Reply
↓
natahorchata on
August 20, 2015 at 9:47 am said:
Best app to share stickers in whatsapp!!
https://play.google.com/store/apps/details?id=com.whatsappsmileys.stickers&hl=en
Reply
↓
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked*
Name *
Email *
Website
Comment
Latest Posts
Built.ioFlow Democratizes Integration at Integrate 2015
The Built.io team was out in full force at the Integrate 2015 Conference last week, demonstrating how Built.io Flow brings the…
Read more…
Published on October 7, 2015
Efficiently
scale down instances using AWS Lambda, CloudWatch, and SNS
Within Amazon Web Services, EC2 instances can be scaled up easily based on various metrics using auto-scaling. You can use…
Read more…
Published on October 6, 2015
Built.io
Flow Makes Big Dreams Come True at Dreamforce
Last week, Built.io showcased Built.io Flow, our new integration Platform-as-a-Sevice (iPaaS) offering, at Dreamforce in downtown San Francisco. Built.io Flow…
Read more…
Published on September 22, 2015
We’re
Democratizing Integration with Built.io Flow Integration Platform-as-a-Service (iPaaS)
For the last eight years, we’ve made it our mission to democratize integration. We believe that enterprise integration across software…
Read more…
Published on September 10, 2015
Introducing Markdown in
Built.io Contentstack
The latest Built.io Contentstack upgrade brings you the most-awaited feature: a full-featured Markdown Editor. This Markdown Editor allows you to add…
Read more…
Published on September 9, 2015
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android的AlertDialog点击确认键dialog不消失
- Whatsapp like Image Compression in Android with demo Ambalika Saha June 28, 2013
- GCD
- android 图片高斯模糊
- [iOS9][Xcode7]图片base64上传到服务器后，服务器上的图片损坏问题
- Android内存控制
- 《从零开始学Swift》学习笔记（Day 32）——计算属性
- iOS CoreMotion 纪录步数
- Unity获取安卓电量和时间
- IOS中获取各种文件的目录路径的方法
- unity中的碰撞检测
- Ubuntu下安装Android Studio全过程（2015.01.27）
- Android Studio Tips -- 自定义Logcat
- Android Studio导入工程报错 Error:Cause: peer not authenticated 解决方案
- 从投票应用说起，功能才不是轻社交App的核心呢！
- android 图像处理
- 创业或做App时,如何寻找一家靠谱的2B服务商
- Android Studio系列教程六--Gradle多渠道打包
- 6个值得推荐的Android开源框架简介
- iOS推送详细步骤