Lomorage is free private photo cloud solution that puts you in control of your photos and videos. To get best user experience among different platforms, such as iOS, Android, web, it utilizes smaller size thumbnail image to allow the clients to load image faster initially.
At the same time, unlike desktop applications, mobile clients have limited storage, and a good mobile application should take it into consideration and provide better user experience while require system resources as little as possible. Thus, we need a image format which has better compression performance and is widely adopted by majority browsers and native clients.
Many blogs did comparison between JPEG and Webp, but either the number of samples are less, or reports are not focus on smaller size images. In addition, not many blogs compare the performance of Mozilla’s improved MozJPEG encoder. Thus, we decided to run the comparison by ourselves based on our own personal image datasets.
All thumbnails are generated by keeping same aspect ratio. 320 is selected as default width for the sake of tradeoff between image size and quality.
From the chart, we can see the MzJPG codec has more improvement than regular IJG codec, and similar as Webp codec. It is understandable because of the small image size.
This chart is saving percentage comparision between 2 JPEG codec and webp.
For larger size image, webp has even better performance than regular IJG codec, also better than Mozillar enhanced version.
Below table gives the summary average size in Byte, and average saving percentage if using webp, which is average((JPG size - Webp size) / Webp size).
|Width||Average Byte (IJG)||Average Byte (MzJPG)||Average Byte (Webp)||Saving % (IJG)||Saving % (MzJPG)|
Assuming 10,000 images, total storage needed for different size thumbnail would be as below
|Width||Total MB (IJG)||Total MB (MzJPG)||Total MB (Webp)||Saving MB (MzJPG/IJG)||Saving MB (Webp/IJG)||Saving MB (Webp/MzJPG)|
This post is mainly focus on file size compression. We’ll run some image virual quality benchmark among 3 codec, such as SSIM, BRISQUE, PSNR, etc, and make another post to show the difference. Thanks!