maximal optimal image dimensions for mobile

Question

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.

Answer 1

Like you correctly write on your example page, the optimal (or minimal, dependent on device) image size for mobile device should be at least the monitor width (320 px width).

Thumbnails should be, i would say, like a one third of the mobile monitor width, but after double tap on mobile screen the image should get the monitor width, not bigger, not smaller.

i would use here something like media queries and load different image for each monitor width, like

/* For width smaller than 400px: */

    body {
        background-image: url('img_smallflower.jpg'); 
    }

    /* For width 400px and larger: */
    @media only screen and (min-width: 400px) {
        body { 
            background-image: url('img_flowers.jpg'); 
        }
    }

Here are some insightful pages:

• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• http://cssmediaqueries.com/
• https://timkadlec.com/2012/04/media-query-asset-downloading-results/