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.