web-dev-qa-db-fra.com

Quelle taille mes images doivent-elles avoir pour un site mobile

Nous concevons un modèle pour un site mobile et nous sommes arrivés au problème où nous ne savons pas quelle taille doit avoir un logo, ni l'arrière-plan, etc.

Nous allons utiliser l'API mobile Jquery et HTML5/CSS3, ce qui nous permet en principe de créer toute l'architecture du site sans se soucier des dimensions, mais en termes d'actifs externes tels que les arrière-plans et les images, nous ne savons pas quelle est la meilleure taille afin d'être plus compatible avec la plupart des appareils.

html5css3mobilejquery-mobile
9
multimediaxp

L'iPhone 4S/5 dispose d'un écran haute résolution de 640 pixels de large. De nombreux smartphones Android débordent de 720 pixels de large, bien que certains atteignent 800 pixels. Tout ce qui est dessus est probablement considéré comme une tablette.

La meilleure chose à faire pour une compatibilité étendue est donc un style CSS unique:

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

Cela garantira que, quelle que soit la résolution de l'écran, vos images ne seront pas plus grandes que l'élément qui le contient. (Lorsque vous créez un site responsive avec les utilisateurs mobiles à l'esprit, la largeur, les marges et le remplissage des éléments doivent tous être calculés en pourcentage, dans la mesure du possible.) Cela signifie également que vous téléchargez plus de données d'images que de nombreux téléphones, Il s’agit de logos bicolores, la différence n’est pas grande. Comme toujours, gardez vos images aussi petites et aussi petites que possible.

De plus, si vous n'avez pas affaire à des photos, vous devriez regarder les images SVG. Étant donné qu’ils sont basés sur des vecteurs, ils se redimensionnent parfaitement à n’importe quelle résolution et ils sont compatibles avec pratiquement tous les navigateurs sauf IE8 et Android 2.x . 

12
Blazemonger

Je suis sûr que la taille de l'image ne devrait normalement pas ressembler davantage à celle qui définit le standard de requête de média CSS.

Voici une liste succincte des requêtes de médias CSS pour les appareils les plus populaires de 2015-2016.

Il suffit d’ajouter dans cette liste les questions relatives aux supports pour les nouveaux appareils si vous en avez besoin. 

/* 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 */
}

Et regardez aussi les anciennes listes https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ et https://Gist.github.com/ hs0ucy/3762901

2
Academy of Programmer

Considérez le code html suivant:

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

En prenant cet exemple, nous aurions besoin de plusieurs images en fonction de la taille de l'écran. Comme la plupart des navigateurs consultent d'abord le document HTML et préchargent les images avant de charger Javascript, Javascript n'est pas une solution parfaite.

C'est pourquoi: utilisez un serveur d'images réactif!

J'ai utilisé Sencha.io Src, qui va déterminer l'écran de l'appareil et réduire (il seulement réduit les images) de votre image pour l'adapter à ses contraintes de taille. Sencha.io utilise la chaîne useragent du navigateur pour rechercher le périphérique dans sa base de données. Ensuite, votre image est réduite à la largeur maximale de votre appareil et stockée dans une mémoire cache qui sera disponible pendant 30 minutes.

Utilisez-le comme ça:

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

PS: Il comporte également des inconvénients: il repose sur la détection de périphérique et vous oblige à acheminer toutes vos images par un tiers. Mais comme ce ne sont pas de bonnes solutions pour le moment (même avec des requêtes multimédia, vous devrez faire face à des navigateurs qui téléchargent des ressources dans une requête multimédia qui ne s'applique pas) - j'espère que cela vous aidera!

1
Chris Conway

Vous devez utiliser les requêtes de média CSS pour cela . Consultez cet article ici: http://davidwalsh.name/image-max-width

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      img { max-width: 100%; }
}
0
John Skoumbourdis