I'm trying to figure out the maximum image dimensions I should use for my primary image on each image page on my site when it comes to mobile. I already used image compression and that lowered the quality down to 66%. Any lower and I might disappoint users.
I tested the URL http://pictures.m.clubcatcher.com/efs/2014jul25/1 at W3C mobile tester, and I also tested other image pages as well. The only issue out of the three they present is the third one. For the page I mentioned here, it states:
The total size of the page (28.8KB) exceeds 20 kilobytes (Primary document: 9.6KB, Images: 19.2KB, Style sheets: 0)
When I looked at the resource section for the test, it shows:
17.3KB image http://i.clubcatcher.com/fs5298-2-375-568-q66-u1417582800 9.6KB document Resource under test 1.9KB image http://i.clubcatcher.com/mD
First column is the size. For all image pages, the last two numbers in each test will be relatively consistant. Roughly 9.6KB and 1.9KB since I use the same image header across all pages.
Now my question is what are the optimal maximum image dimensions I should use to make at least some of my mobile URLs have grand download totals of under 20KB with images included?
Remember, I don't really want to decrease quality to lower than 66% without a good reason, so my only option I feel I have is to reduce image size, but I don't want to reduce it too small to the point where no one can see it.
Is there a standard that defines the minimum acceptable photo size for mobile? maybe I can start from that and slowly increase image size until I break the 20K limit.
I'm open to suggestions.