Lossy images for retina iPads - JPEG vs WebP
TL;DR: If you overcompress your images, you can get a typical 1.5M JPEG file down to 245kb using WebP and it’ll look fine on retina, at 1/6th the size!
Retina laptops and iPads are common now, and we need to re-think our image compression - JPEG’s at default quality (70) are massive overkill these days, and are slowing down our apps/websites. Screens are improving faster than our mobile internet infrastructure is, that’s for sure!
So, I grabbed an image, sized it to a full-screen iPad retina images, and ran a bunch of tests, compressing and over-compressing the image on JPEG and WebP, to see what I could come up with as a reasonable tradeoff between file-size and quality. Here’s the original image:
http://interfacelift.com/wallpaper/details/3359/goat_at_mount_pilatus.html
I used this image because it’s a nice combo of smooth sky areas and detailed rocky areas, and the contrast of the detailed horns against the smooth grass.
It’s worth noting there are a few other options too: Jpeg2000, JPEG XR, and HEVC-MSP. JPEG 2000 is great, but is really slow to decode so not really ideal for mobile (fine for desktop though). JPEG XR is good too, especially on the high-end of the quality scale. But we’re interested in the low-end of the quality scale in this article, what with over-compressing our images for retina and all, so i’ll leave it. And HEVC-MSP is great according to the Mozilla study linked later on, but it’s not finished yet AFAIK so i’ll revisit it when it’s released and there’s a good standard library for it.
So, my findings:
JPEG
I’m using Acorn’s JPEG functionality for these tests.
70 - This seems to be the typical JPEG quality setting. Looks great, but it’s 1.5MB. You better hope your poor user isn’t downloading this bad-boy over 3G while they’re sweating it out on the train.
20 - goat horns look fine, sky starts looking noticeably not great. I think you could get away with this, in retina. 500kb.
15 - Even in retina, the sky looks bad. Still, horns and mountains look fine. Avoid, for images with smooth parts.
10 - Same as 15: Detailed areas - horns and mountains - look fine. 401k.
5 and 0 - Both fine in the detailed areas. File isn’t much smaller anyway (356 vs 401k) so it’s not worth it unless you’re desperate.
So: My recommendation, for retina: You can generally get down to 20. Or 10 if you really don’t care all that much, or if there are no ‘smooth’ areas (eg sky) in your photo.
WebP
I’m using the ‘libwebp-0.3.1-mac-10.8’ command line tools for these tests.
80 - This is the default setting. Looks great, and it’s 916kb. So right off the bat, it’s killing JPEG.
60,50,40,30 - All good. Getting down to 414kb.
20 - Starting to be noticeably dropping quality if you look close. I doubt you’d notice on retina unless you’re an eagle-eye. 334KB.
15 - Same comments as 20. 301k
10 - This is as low as i’d go personally. Kindof the opposite of JPEG: smooth areas (sky) look great, detailed areas (mountain) not so great. Horns still look great though. 245kb.
5 - I’m on the fence about whether or not this is acceptable, to be honest. Wow the file size is temptingly small, though: 192kb.
0 - Yuck. Avoid. 87kb.
WebP has the big advantage that its artefacts are much nicer to the eye, even when they become visible. So I think you can push it further into ‘visible artefacts’ territory than you can with JPEG.
If i were you, i’d go with WebP at quality 10, at 245kb. Compared to the smallest nice-looking JPEG (Q20, 500kb) - it’s half the size!
Summary
So, if you’re anything like me, you’re probably currently naively using quality 70 JPEG, which is 1.5MB for a typical full-screen iPad retina image.
With some over-compression that wouldn’t really be noticeable on retina, you can get that down to 500k and stick with JPEG (certainly worth doing if this whole WebP thing is a bit too much effort for you). That’s a third the size already!
And if you switch to WebP, you can arguably get that down to 245kb - that’s 1/6th the original size! That’s a massive performance win for anyone trying to download your assets over 3G.
Keep in mind that most people use apps on the train or bus, where the cell towers are being inundated by stacks of users. I’m sure they’d rather get a ‘looks almost perfect’ image in, say, 10 seconds; versus an image that looks a tiny bit better, but takes a minute to download.
Note: This is a very subjective article! Take it with a grain of salt. This is all my opinion, comparing what ‘looks good’ to my eyes. Oh, and i didn’t include any screenshots, because you’re probably reading this on a non-retina desktop screen like I am, so I don’t think it worth the effort.
Relevant studies:
Worth a read if you’re super keen. But I still think it’s all subjective, you should play with quality settings and choose what you think looks best. Here you go:
http://people.mozilla.org/~josh/lossy_compressed_image_study_october_2013/
https://developers.google.com/speed/webp/docs/webp_study
Thanks for reading! And if you want to get in touch, I'd love to hear from you: chris.hulbert at gmail.
Chris Hulbert
(Comp Sci, Hons - UTS)
Software Developer (Freelancer / Contractor) in Australia.
I have worked at places such as Google, Cochlear, Assembly Payments, News Corp, Fox Sports, NineMSN, FetchTV, Coles, Woolworths, Trust Bank, and Westpac, among others. If you're looking for help developing an iOS app, drop me a line!
Get in touch:
[email protected]
github.com/chrishulbert
linkedin
