What size should my images be for a mobile site

Question

We are designing a template for a mobile site and we got to the problem where we don't know what size a logo should be, or the background, etc.

We will use the Jquery mobile API and HTML5 / CSS3 which basically allows us to create the whole architecture of the site without worrying about the dimensions, but in terms of external assets like backgrounds and images we don't know what is the best size in order to be more compatible with most devices.

Answer 1

The iPhone 4S/5 has a high-resolution screen that's 640 pixels wide. Many Android smartphones top out at 720px wide, although some go up to 800px. Anything over that is probably considered a tablet.

The best thing you can do as far as wide compatibility, then, is a single CSS style:

img { max-width: 100%; height: auto; }

This will ensure that no matter what resolution the screen is, your images will be no larger than the element containing it. (When building a responsive site with mobile users in mind, your element widths, margins and padding should all be computed as percentages whenever possible.) Obviously it also means that you're downloading more image data than many phones will need, but if you're dealing with two-color logos, it's not much of a difference. As always, keep your images as few and as small as possible.

In addition, if you're not dealing with photos, you should look at SVG images. Since they're vector-based, they resize perfectly at any resolution, and they're compatible with pretty much every browser except IE8 and Android 2.x.

Answer 2

I am sure that the image size normally should not be more like it defines CSS media query standart.

This is a short list of CSS media query for the most popular devices of 2015-2016.

Just add into this list media quieres for new devices if you need.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

And also take a look at the older lists https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and https://gist.github.com/hs0ucy/3762901

Answer 3

Consider following html code:

<img src="images/myimage.jpg" alt="image">

Taking a look at that example, we would need multiple images depending on the screen size. As most browsers look at the HTML document first and preload images before they load Javascript, Javascript wouldn't be a perfect solution.

That's why: use a responsive image server!

I've used Sencha.io Src, which will figure out the device screen and shrink (it only shrinks images) your image to fit its screensize constraints. Sencha.io uses the browsers useragent string to look up the device in it's database. Than it shrinks your image to the maximum width of your device and stores it in a cache which will be available for 30 minutes.

Use it like that:

<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image">

PS: It also has it shortcomes: it relies on device detection and requires you to route all your images through a third party. But as they are no great solutions at the moment (even with media queries you'll have to deal with browsers, which download resources inside a media query that doesn't apply) - I hope that this will help you out!