1

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.

  • I think you should not worry about it anymore. As data connections are getting faster, few KB does not really matter. I just checked your page and I found it pretty good optimized. W3C mobile tester and others usually also check for low end mobile phones and I am sure most of your traffic is from larger screen/smart phones. – Robert hue Nov 27 '15 at 6:58
0

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:

  • I might as well accept this because there might not be another answer and as much as a pain it is to have to double-tap to see the full picture at full width, it does make me think of some ideas. I just hope my mobile base won't decide to complain, but nevertheless I'm still optimizing. – Mike Nov 28 '15 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.