: Maximal optimal image dimensions for mobile 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
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 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 i.clubcatcher.com/fs5298-2-375-568-q66-u1417582800 9.6KB document Resource under test
1.9KB image 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.
More posts by @Annie201
1 Comments
Sorted by latest first Latest Oldest Best
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:
css-tricks.com/snippets/css/media-queries-for-standard-devices/ cssmediaqueries.com/ timkadlec.com/2012/04/media-query-asset-downloading-results/
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.