Media: img, ou video et resolution mobile

Salut,

Je réalise une appli hybrid html5 destinée aux mobiles (en mode portrait), et du coup je cherche à optimiser au maximum la taille des fichiers médias (img et videos) qui seront présents sur ce site.

pour me libérer de ça tout mon site utilise le format svg pour le css, mais quel format choisir pour les médias ?

dois je cibler ? la largeur physique du mobile le plus large (par ex galaxy note II) ?
le device-width le plus grand ou le viewport le plus grand ?

La notion de viewport reste vague pour moi, même après avoir lu et relu cet article
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

et cette réponse de raphael sur un autre post à terminé de m'achever
Attention, au final, l'iphone 3 et l'iphone 4 sont à traiter de la même manière :
- l'iphone 3 a une largeur physique de 320px, un device-width de 320px et un viewport de 980px
- l'iphone 4 a une largeur physique de 640px, un device-width de 320px et un viewport de 980px

Au final, la largeur à prendre en compte sera la même :
- soit le viewport de 980px si tu n'y touches pas
- soit la valeur de device-width si tu indiques une meta viewport dans le HTML

Bonjour,
Pour les tailles de mon responsive design, je me suis basé sur cette image que je trouve parlante.



Il y a 3 tailles majeures : 480px, 768px et 1024px. J'espère que cela t'aidera

Salut,

N'oubliez pas la variété des résolutions d'écran (écrans Retina et compagnie), comme le donnent à entendre les propos de Raphaël :

mercredi2 a écrit :
Attention, au final, l'iphone 3 et l'iphone 4 sont à traiter de la même manière :
- l'iphone 3 a une largeur physique de 320px, un device-width de 320px et un viewport de 980px
- l'iphone 4 a une largeur physique de 640px, un device-width de 320px et un viewport de 980px

merci semantic,
en effet le graphique est bien fait, ca aurait aidé à la créa

Victor, c'est bien ce qui me bloque.
Le graphique de Semantic, me laisse penser que je peux mettre toutes mes images à 768px de large puisque je cible tous les mobiles jusqu'au plus 'large'

mais que sous entend Raphael dans cette phrase justement ?
"Au final, l'iphone 3 et l'iphone 4 sont à traiter de la même manière
- l'iphone 3 a une largeur physique de 320px, un device-width de 320px et un viewport de 980px
- l'iphone 4 a une largeur physique de 640px, un device-width de 320px et un viewport de 980px"

Si je veux mettre une image pleine largeur sur l'iphone 3 et 4 et ce avec la même qualité d'image pour les 2, mon images devra avoir une largeur de 320px ou 980px? (sachant que mon site est responsive et que les images auront un max-width: 100%
qu'est ce qui importe au final pour avoir un rendu équivalent, le device width ou le viewport ?

J'ai l'impression d'être complétement débile car je pige vraiment rien.

Bonjour

mercredi2 a écrit :
J'ai l'impression d'être complétement débile car je pige vraiment rien.

Non je te rassure, ce n'est pas toi. C'est vraiment compliqué.

mercredi2 a écrit :

Si je veux mettre une image pleine largeur sur l'iphone 3 et 4 et ce avec la même qualité d'image pour les 2, mon images devra avoir une largeur de 320px ou 980px? (sachant que mon site est responsive et que les images auront un max-width: 100%
qu'est ce qui importe au final pour avoir un rendu équivalent, le device width ou le viewport ?

On pourrait répondre "ça dépend" à toutes ces questions.

On va essayer d'avancer point par point...

1- Par défaut, les valeurs de largeur des iPhones 3, 4, 5 sont :
- viewport (= width) = 980px
- device-width = 320px

2- Si on applique une meta viewport (width=device-width; initial-scale=1.0), alors les valeurs deviennent :
- viewport (= width) = 320px
- device-width = 320px

Cela signifie que, quel que soit la version d'iPhone :
- dans le cas n°1, une image de 320px de large occupera 1/3 de l'écran
- dans le cas n°2, une image de 320px de large occupera la totalité de l'écran.

3- Si tu souhaites une image de qualité équivalente, ça se complique, car :
- l'iPhone 3 (non retina) a une matrice physique de 320px de large
- l'iPhone 4 et 5 (retina) ont une matrice physique de 640px de large
Donc avec une image de 320px de large (qui occupe toute la surface, rappelons-le, quel que soit l'iPhone), l'iPhone 4 sera "en manque" de pixels pour remplir sa matrice. Il va donc (mal) interpoler les pixels manquants à l'image et... elle sera un peu floue. Un comble pour un écran rétina.

Il faudra donc, pour remplir tous les pixels de la matrice, proposer une image de 640px de large, mais là c'est le drame... puisque seul 320px vont rentrer dans sa largeur qu'il pense avoir, soit 320px. Tu me suis encore ?

Et c'est là qu'on en arrive à l'aberration suivante :
- pour l'iPhone 3 (non retina = pixel-ratio 1), il faut une image de 320px de large
- pour l'iPhone 4 et 5 (retina = pixel-ratio 2), il faut une image de 640px de large que l'on devra déclarer à "width=320" (ou utiliser max-width: 100%). Elle sera alors parfaite pour lui et sa matrice physique de 640px

Si tu as tenu jusqu'au bout, bravo !
Modifié par Raphael (15 May 2014 - 17:27)

Mercredi est malheureusement décédé devant son ordinateur.

Donc d'après cette page
http://www.canbike.ca/CSSpixels/

je prend le tel ayant le device-width le plus large aujourd'hui, je le multiplie à son pixel ratio
et j'obtiens la taille de l'image max pour cibler tous les portables

si ma référence max est donc le Samsung Galaxy Note 3
mes images devront faire 1080px de large
mais je n'optimise pas le temps de téléchargement en fonction du tel

mercredi2 a écrit :
Donc d'après cette page
http://www.canbike.ca/CSSpixels/

je prend le tel ayant le device-width le plus large aujourd'hui, je le multiplie à son pixel ratio
et j'obtiens la taille de l'image max pour cibler tous les portables

si ma référence max est donc le Samsung Galaxy Note 3
mes images devront faire 1080px de large
mais je n'optimise pas le temps de téléchargement en fonction du tel

Ah ben je préfère ce site : http://mydevice.io/devices/

mercredi2 a écrit :
si ma référence max est donc le Samsung Galaxy Note 3
mes images devront faire 1080px de large

Oui, en disant qu'elles font 360px

mercredi2 a écrit :
mais je n'optimise pas le temps de téléchargement en fonction du tel

Oui, et c'est un problème qui me semble bien plus important.

Il est possible voire conseillé de détecter la connectivité avant de balancer de grosses images : http://goetter.fr/lab/mobile/media/detect/

e crois que ça commence à monter doucement à mon cerveau

merci beaucoup pour le temps que tu as pris !!
et merci pour le lien
je reviendrai vous embêter dans pas longtemps je sens

Salut,

Je complète les propos de Raphaël.

Raphael a écrit :
Et c'est là qu'on en arrive à l'aberration suivante :
- pour l'iPhone 3 (non retina = pixel-ratio 1), il faut une image de 320px de large
- pour l'iPhone 4 et 5 (retina = pixel-ratio 2), il faut une image de 640px de large que l'on devra déclarer à "width=320" (ou utiliser max-width: 100%). Elle sera alors parfaite pour lui et sa matrice physique de 640px

Là encore, ça dépend : cela est valable si le format de l'image n'est pas vectoriel (Jpeg, PNG) ; en revanche, si l'on sert une image en SVG, pas besoin d'en multiplier les versions de taille différente.

Et tu n'as pas encore tout vu avec les images d'arrière-plan…
Modifié par Victor BRITO (15 May 2014 - 18:38)

j'avais eu la bonne idée de faire la base du site, tout le coté css en vectoriel,
pour me simplifier la vie.

je suis content de l'avoir fait quand je vois la galère