I have been hosting my photographs on my personal website for a long time. However, it is not quite possible to host the original photographs because of their large file sizes. So I usually resized the original photographs to a smaller resolution, typically from 50 Megapixels (8640x5760) to 3 Megapixels (2160x1440), and the JPEG file size would reduce from around 20-30 MB to around 2-3 MB.
I felt that those photographs hosted on my website do not look sharp enough on my high resolution 4K (3840x2560) monitor. But I was not able to further increase the resolution because the larger file size will slow down the website loading too much. There is also an additional option to reduce the photograph file size by reducing the JPEG quality, but I did not even try that because I was afraid that the resulting photographs will look bad.
It turns out that I was wrong. By balancing the resolution and JPEG quality, the photographs could look much better than what I had on my website and the file sizes will remain almost the same. In this blog post, I would like to share some of my experiment results on one of my original photographs.
Image Processing Priorities: Resolution VS Quality
$ ls -lh total 135M -rw-rw-r-- 1 leimao leimao 22M Oct 11 07:14 DSC09742.JPG -rw-rw-r-- 1 leimao leimao 169K Oct 12 15:59 DSC09742_resized_2160x1440_10.JPG -rw-rw-r-- 1 leimao leimao 208K Oct 12 15:59 DSC09742_resized_2160x1440_20.JPG -rw-rw-r-- 1 leimao leimao 239K Oct 12 15:59 DSC09742_resized_2160x1440_30.JPG -rw-rw-r-- 1 leimao leimao 264K Oct 12 15:59 DSC09742_resized_2160x1440_40.JPG -rw-rw-r-- 1 leimao leimao 288K Oct 12 15:59 DSC09742_resized_2160x1440_50.JPG -rw-rw-r-- 1 leimao leimao 315K Oct 12 15:59 DSC09742_resized_2160x1440_60.JPG -rw-rw-r-- 1 leimao leimao 355K Oct 12 15:59 DSC09742_resized_2160x1440_70.JPG -rw-rw-r-- 1 leimao leimao 425K Oct 12 15:59 DSC09742_resized_2160x1440_80.JPG -rw-rw-r-- 1 leimao leimao 609K Oct 12 15:59 DSC09742_resized_2160x1440_90.JPG -rw-rw-r-- 1 leimao leimao 868K Oct 12 15:59 DSC09742_resized_2160x1440_95.JPG -rw-rw-r-- 1 leimao leimao 1.6M Oct 12 15:59 DSC09742_resized_2160x1440_99.JPG -rw-rw-r-- 1 leimao leimao 317K Oct 12 15:59 DSC09742_resized_4320x2880_10.JPG -rw-rw-r-- 1 leimao leimao 439K Oct 12 15:59 DSC09742_resized_4320x2880_20.JPG -rw-rw-r-- 1 leimao leimao 531K Oct 12 15:59 DSC09742_resized_4320x2880_30.JPG -rw-rw-r-- 1 leimao leimao 607K Oct 12 15:59 DSC09742_resized_4320x2880_40.JPG -rw-rw-r-- 1 leimao leimao 680K Oct 12 15:59 DSC09742_resized_4320x2880_50.JPG -rw-rw-r-- 1 leimao leimao 760K Oct 12 15:59 DSC09742_resized_4320x2880_60.JPG -rw-rw-r-- 1 leimao leimao 897K Oct 12 15:59 DSC09742_resized_4320x2880_70.JPG -rw-rw-r-- 1 leimao leimao 1.2M Oct 12 15:59 DSC09742_resized_4320x2880_80.JPG -rw-rw-r-- 1 leimao leimao 1.8M Oct 12 15:59 DSC09742_resized_4320x2880_90.JPG -rw-rw-r-- 1 leimao leimao 2.8M Oct 12 15:59 DSC09742_resized_4320x2880_95.JPG -rw-rw-r-- 1 leimao leimao 5.6M Oct 12 15:59 DSC09742_resized_4320x2880_99.JPG -rw-rw-r-- 1 leimao leimao 662K Oct 12 15:58 DSC09742_resized_7680x5120_10.JPG -rw-rw-r-- 1 leimao leimao 936K Oct 12 15:58 DSC09742_resized_7680x5120_20.JPG -rw-rw-r-- 1 leimao leimao 1.2M Oct 12 15:58 DSC09742_resized_7680x5120_30.JPG -rw-rw-r-- 1 leimao leimao 1.4M Oct 12 15:58 DSC09742_resized_7680x5120_40.JPG -rw-rw-r-- 1 leimao leimao 1.6M Oct 12 15:58 DSC09742_resized_7680x5120_50.JPG -rw-rw-r-- 1 leimao leimao 1.8M Oct 12 15:59 DSC09742_resized_7680x5120_60.JPG -rw-rw-r-- 1 leimao leimao 2.2M Oct 12 15:59 DSC09742_resized_7680x5120_70.JPG -rw-rw-r-- 1 leimao leimao 3.0M Oct 12 15:59 DSC09742_resized_7680x5120_80.JPG -rw-rw-r-- 1 leimao leimao 5.1M Oct 12 15:59 DSC09742_resized_7680x5120_90.JPG -rw-rw-r-- 1 leimao leimao 8.0M Oct 12 15:59 DSC09742_resized_7680x5120_95.JPG -rw-rw-r-- 1 leimao leimao 16M Oct 12 15:59 DSC09742_resized_7680x5120_99.JPG -rw-rw-r-- 1 leimao leimao 781K Oct 12 15:58 DSC09742_resized_8640x5760_10.JPG -rw-rw-r-- 1 leimao leimao 1.1M Oct 12 15:58 DSC09742_resized_8640x5760_20.JPG -rw-rw-r-- 1 leimao leimao 1.4M Oct 12 15:58 DSC09742_resized_8640x5760_30.JPG -rw-rw-r-- 1 leimao leimao 1.6M Oct 12 15:58 DSC09742_resized_8640x5760_40.JPG -rw-rw-r-- 1 leimao leimao 1.9M Oct 12 15:58 DSC09742_resized_8640x5760_50.JPG -rw-rw-r-- 1 leimao leimao 2.2M Oct 12 15:58 DSC09742_resized_8640x5760_60.JPG -rw-rw-r-- 1 leimao leimao 2.7M Oct 12 15:58 DSC09742_resized_8640x5760_70.JPG -rw-rw-r-- 1 leimao leimao 3.7M Oct 12 15:58 DSC09742_resized_8640x5760_80.JPG -rw-rw-r-- 1 leimao leimao 6.3M Oct 12 15:58 DSC09742_resized_8640x5760_90.JPG -rw-rw-r-- 1 leimao leimao 10M Oct 12 15:58 DSC09742_resized_8640x5760_95.JPG -rw-rw-r-- 1 leimao leimao 20M Oct 12 15:58 DSC09742_resized_8640x5760_99.JPG
Original Image
This is the original photograph of resolution 8640x5760 that we will process.
Resolutions
On a 4K, 3840x2560 monitor, I noticed some details are lost due to interpolation when the photograph is resized to 2160x1440. For photographs whose resolution is higher than the monitor resolution, I could not tell if there is any difference between the original and the processed photographs. The processed photograph of resolution 4320x2880 and JPEG quality 99 has a file size of 5.6 MB.
JPEG Qualities
I noticed that the JPEG quality does not affect the details of the subject at all. It mostly affects the color accuracy, especially the background colors. But the difference is hardly noticeable until I reduced the JPEG quality to 50 or below. The processed photograph of resolution 8640x5760 and JPEG quality 60 has a file size of 2.2 MB.
The Sweet Spots
The existing processed photograph I used has a resolution of 2160x1440, JPEG quality of 99 (ImageMagick default), and a file size of 1.6 MB.
The new processed photograph I want to use should have a file size close to 1.6 MB as well and should look better than the existing one. I found two sweet spots that meet the requirements. One has a resolution of 4320x2880, JPEG quality of 80, and a file size of 1.2 MB. The other has a resolution of 7680x5120, JPEG quality of 50, and a file size of 1.6 MB. I could hardly tell the difference between these two photographs and the original one on my 4K monitor.
Image Processing Priorities: Resolution VS Quality