Optimize Images to Make Your Website Load Faster: Finding a Balance Between Photo Quality and File Size
There is one thing I’ve been working on recently, which is making my website load faster. With more people using their mobile devices to access websites these days, Google now uses page loading speed as one of the search engine ranking factors, and has introduced Google PageSpeed Insights where they give your website a score based on how fast the page loads. As of writing, my score stands at 59/100 for mobile and 63/100 for desktop.
Easiest Way to Make Your Website Load Faster and Improve Google Pagespeed Insights Score
That said, we’re all photographers, and it’s hard for any photography website to get a good score for an obvious reason, i.e. our websites have a lot of photos to be loaded! Also, we can’t compress the photos too much just to load faster. If we did, all the photos would look crappy (like those uploaded on Facebook)!
Finding a Balance Between Photo Quality and File Size
Let me go back to 2014 when I started this website. Back then, I saved all my photos as PNG (PNG-24), the highest quality image format that uses “lossless” compression cos I didn’t want to compromise quality for anything (you know how perfectionist I am!). But this in turn resulted in large file size and slow page loading time.
Since then, I’ve tried to find a right balance between photo quality and file size, replacing all the photos on my websites a few times by re-saving as JPEG 100 quality first (using “Save for Web” function in Adobe Photoshop), then downgrading to JPEG 80, and JPEG 70 most recently.
These are 100% crop images (230 x 230 pixels) from a 1280 x 854 pixels image of Merlion (Singapore’s iconic landmark), saved with “Save for Web” function in Photoshop.
1. Saved as PNG (1.5 MB for 1280 x 854 px)
By far the highest quality image format for web, but the file size is way too large.
2. Saved as JPEG 100 (799 KB for 1280 x 854 px)
Almost halved the file size without any noticeable drop in image quality.
3. Saved as JPEG 80 (346 KB for 1280 x 854 px)
Once again reduced the file size by more than half. The drop in image quality is hardly visible by the human eye.
4. Saved as JPEG 70 (255 KB for 1280 x 854 px)
This is what I use for my photos in Top 50 Photo Gallery. For me, it appears to be the most balanced choice between photo quality and file size.
5. Saved as JPEG 60 (201 KB for 1280 x 854 px)
The file size is further reduced, but JPEG artifacts (i.e. visible block structure and halos around edges) get more visible (although hard to see in this resized image). If you’d like to pixel-peep, download the full size image (1280 x 854 px) to see JPEG artifacts appearing around the top edges of buildings and Merlion’s head.
Surprisingly, there is no noticeable difference in image quality (at least for the human eye) between PNG and JPEG 100, JPEG 80 or even JPEG 70 while the file size was reduced to one-fifth (by comparing 1.5 MB for PNG to 255 KB for JPEG 70). For me, JPEG 70 is the lowest quality acceptable cos you start to see more of “JPEG artifacts” (i.e. visible block structure and halos around edges caused by compression) at JPEG 60 and lower.
N.B. I always save my photos as 1280 pixels wide (for landscape-oriented) and 1080 pixels wide (for portrait-oriented) for web use. Making the dimension smaller does decrease the file size, but my currently-used dimension seems most appropriate for me (Tumblr, my only active social media platform, also uses a maximum width of 1280 pixels for uploaded photos, by the way). As always, feel free to Contact Me for any questions. ;)