1485 sujets

Web Mobile et responsive web design

Quelle taille d'images pour du mobile ?

Bonjour,

Je suis amené à travailler sur des sites mobiles avec des listes de résultats où les images prendront toute la largeur de l'écran.

C'est à dire que les images feront 100% de la largeur, aussi bien en version portrait qu'en version paysage. Et avec toutes les résolutions d'écrans des mobiles, de plus en plus grande, quelle taille d'image demandée ?

En gros faut-il demander à ce que les images desktop de 800px de large soit toutes regénérées en 640px de large, en 480px ou en 320px ou en une autre taille ?

L'idée est d'avoir l'image la plus petite possible et ne pas charger une image de 400px de large si on affiche juste 320px à l'écran.

Comment procédé vous quand vous devez faire un site mobile ?

Merci d'avance,
c'est une problématique dont je ne trouve rien de vraiment concret sur le web alors que le soucis doit pourtant être général. =/
D'après ce que je comprends, ce serait le device-width le plus important. Car si on fait une page html de la taille du device-width ou plus grand, ça l'adaptera pour afficher le site de la taille du device-width.

Donc autant avoir des images de cette taille maximale ?
En ce qui me concerne, je style les images avec max-width:100%.
Selon la taille relative de l'image et de l'écran (ou de la zone de l'écran qui contient l'image, <div ou autre) l'image sera la plus grande possible en fonction du contexte: elle ne sera jamais pixelisée sur grand écran comme si je mettais "width:100%", et elle ne mettra pas le navigateur du mobile en situation de devoir réduire l'apparence de la page comme si j'avais mis width: 800px;
PapyJP a écrit :
En ce qui me concerne, je style les images avec max-width:100%.
Selon la taille relative de l'image et de l'écran (ou de la zone de l'écran qui contient l'image, &lt;div ou autre) l'image sera la plus grande possible en fonction du contexte: elle ne sera jamais pixelisée sur grand écran comme si je mettais "width:100%", et elle ne mettra pas le navigateur du mobile en situation de devoir réduire l'apparence de la page comme si j'avais mis width: 800px;


Merci pour ta réponse. C'est effectivement ce que j'utilise. Mais du coup si l'image chargée fait 1250px, elle sera super lourde alors que sur un navigateur de mobile, une image de 600px aurait peut être suffit pour prendre pour la largeur de l'appareil sans être trop lourde.

Mais le problème c'est si je prend une image de 320px par exemple, sur les gros smartphones et en paysage, alors elle sera étirée car trop petite.

Du coup j'aimerai connaitre la taille max idéale d'une image qui ferait toute la largeur du mobile peut importe sa résolution. :o

Après je me renseigne aussi sur les images qui peuvent être chargé en fonction de la résolution de l'appareil, genre une de 320px pour les petits terminaux et une de 640px pour les autres.

Compliqué tout ça !
Modérateur
Du coup j'aimerai connaitre la taille max idéale d'une image qui ferait toute la largeur du mobile peut importe sa résolution. :o

1920 pixels?

Mais «mobile» c'est vaste. avec beaucoup de formats et de tailles physiques très différentes, ce n'est pas forcément correct de leur attribuer à tous le même visuel.

une liste d'image sur toute la largeur c'est parfait sur un petit appareil en portrait. En paysage cela devient déjà pas terrible (suivant le format de l'image et du mobile, impossible de la voir en entier, et cela fait des pages au scroll monstrueux).

La meilleure solution est donc sans doute de ne pas faire ça Smiley smile

Si cela semble quand même obligatoire, passer par des solutions de chargement de multiples images.
un écran mobile est normalement tenu en mode "portrait" donc le mot largeur signifie orientation horizontal ( width)? .......cela me fait penser aux unités vh vw qui n a pas la même valeur selon l orientation et au concept de largeur longueur . En mode portrait la largeur est la distance de gauche a droite de l'écran , en mode paysage , la largeur ( plus petit coté ?! ) est la distance de haut en bas . Maintenant le width du css est toujours horizontal et l'utilisation du mot device-width est claire ( horizontal) !!


https://www.sitepoint.com/media-queries-width-vs-device-width/

Il y a des statistiques sur le type de navigateur utilisé ; y a t il des statistiques plus précise sur cette sur cette valeur ?

pour moi tout ça est du domaine de l optimisation lorsque le site est fait .

Que faire si l'écran est HD et le débit mauvais , faire attendre le client 5 secondes avant que l image de fond apparait ?
IL existe des optimiseurs pour les images (GTMetric vous informe sur ce paramètre) , si la différence en taille entre une image HD et SD est peu importante , pourquoi ne pas choisir la HD ?
Ai vue sur internet le code javacript qui download un fichier image "de test" qui vous permet de connaitre le débit de la ligne entre le serveur et le client . Il ne reste plus qu'a détecter la résolution et la taille de l'écran du client pour choisir le groupe d images adéquat !! ( change le path dynamiquement ou prefix dans body adapté avec le css) .

Les images du fond changent t elles ( slider image) ?
Les images du fond ont elles pour hauteur celui de la partie visible du navigateur ?
http://dinbror.dk/blog/blazy/

sinon lire lazyload / changelog ( pas de support de l orientation et des slider et affiche que si image visible lors du scroll , support background image et cdn )
adaptive-images permet de créer et retourner des images sur le serveurs en fonction des caractéristiques du client .

cordialement
Modifié par 75lionel (21 Jul 2016 - 11:59)
Merci pour toutes ses informations !

J'ai de nombreuses pistes pour bosser sur le sujet. Effectivement je suis contraint par la DA de faire des images de largeur de l'appareil. C'est une contrainte avec laquelle je dois composer. Il y a aussi des sliders, etc.

Je leur ai prévenu que le rendu dépendrait également des appareils (car évidemment les maquettes sont uniquement en portrait et en une seule résolution). Comme si le mobile c'était un appareil standard.

Merci encore
Je me demande si pour cela il ne faudrait pas utiliser du PHP. Préparer ses images aux différentes tailles (pc/tablette/portable). Et comme PHP fonctionne avec des conditionnelles, lui faire dire : si l'écran est de telle taille, utilise telle image, sinon, celle-ci, sinon si, utilise celle-là... (encore qu'une grosse image est moins compliquée à afficher sur une tablette que sur nos téléphones).
Je sais que le sujet date un peu, mais je pense qu'on se pose tous plus ou moins la question, et que l'on cherche des solutions afin d'éviter au navigateur de ramer pour afficher nos images.
Edit: zut j'avais pas vu que le sujet était vieux ^^
La solution PHP peut être pas mal avec la librairie GD qui peut redimensionner des images à la volée. C'est pas dit en revanche que question poids ça soit mieux optimisé qu'en ayant ses images en fixe.
Par contre à ma connaissance php ne peut pas connaitre les dimensions de l'écran du client. Javascript doit donc transmettre l'info en GET

Si tu veux pas trop t'embeter à avoir 50 tailles d'image, tu peux diviser en 2 ou 3 catégories de taille d'écran, et avec les media queries tu changes tes liens de background image selon la largeur de l'écran.

Exemple :
body {
  background-image: url('imageFull.png');
}



@media screen and (max-width: 600px) {
  body {
    background-image: url('image600px.png');
  }
}

@media screen and (max-width: 1440px) {
  body {
    background-image: url('image1440px.png');
  }
}



Je viens de penser que ça peut avoir un effet néfaste. Si en mode portrait max width correspond à 600px; ça charge une première image.
L'utilisateur bascule en mode landscape, il va devoir charger une nouvelle image...
Ca fait plus de bande passante pour le serveur, plus de Ko à télécharger pour le client...
Modifié par taspeur (14 Dec 2017 - 13:34)
Sujet clos
Aller à