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.