Image Testing for Websites

One of the biggest problems I have had while developing my website is images.  How to optimize them for responsiveness and maximum speed when loading at desktop versus mobile, etc.  I have read a number of article, etc. but it is not intuitive for me.  

I decided to do an unscientific test and this page is the result.  

I have four options to save pictures from my Apple Photos software for JPEG quality - Low, Medium, High and Maximum

I also have four options for the size of the image - Small, Medium, Large and Full.  

I decided to save pictures at each JPEG quality setting for each of the sizes.  That is 16 total images.

After exporting a photo at each setting, I then run each photo through ImageOptim software to remove extraneous data and compress them before loading to my media library.  The images below show the settings I used.  Lastly, when I added images to my media library, I am assuming each image was also Smushed but SMUSH software.  

Further below, I have added each image to see how the quality works as I look at them on all my devices (iPhone 7, iPad, iMac).  I also ran GTmetrix testing just to see how it does from a speed standpoint.  I expect it to be poor for the page but want to see what it recommends for individual images, etc.  That result is at the bottom of the page.  

Original Sizes Exported from Photos

Sizes After Running Through OptimImage

JPEG Quality

Low

Saved Size

Small - 9KB

JPEG Quality

Low

Saved Size

Medium - 34KB

JPEG Quality

Low

Saved Size

Large - 150KB

JPEG Quality

Low

Saved Size

Full - 899KB

JPEG Quality

Medium

Saved Size

Small - 20KB

JPEG Quality

Medium

Saved Size

Medium - 79KB

JPEG Quality

Medium

Saved Size

Large 330KB

JPEG Quality

Medium

Saved Size

Full - 2MB

JPEG Quality

High

Saved Size

Small - 35KB

JPEG Quality

High

Saved Size

Medium - 135KB

JPEG Quality

High

Saved Size

Large - 550KB

JPEG Quality

High

Saved Size

Full - 3.4MB

JPEG Quality

Max

Saved Size

Small - 124KB

JPEG Quality

Max

Saved Size

Medium - 475KB

JPEG Quality

Max

Saved Size

Large - 1.9MB

JPEG Quality

Max

Saved Size

Full - 9.7MB

I think these 3 images were the best.  I went with the Medium JPEG Quality and Large Size for all my exports. 

JPEG Quality

Medium

Saved Size

Large 330KB

JPEG Quality

High

Saved Size

Large - 550KB

JPEG Quality

Max

Saved Size

Medium - 475K

Copyright © 2016 - 2020 | Mark 'Outback' Smith | All Rights Reserved