Servir des images en fonction du périphérique

bonjour,

en matière de RWD, ça devient de plus en plus compliqué, quand il s'agit de servir des images, au fur et à mesure que les petits périphériques (iPhone et consort) ont des résolutions de plus en plus élevées.

Par exemple, j'ai un slider d'images dans une page qui cible une largeur minimum de 1024px (via une media query).

Dans le cas d'un PC relié à internet, je peux servir des images de qualité normale, mais dans le cas d'un iphone i5 (640x1136) je voudrais servir des images plus légères.

Comment puis je faire, à ce jour pour faire la différence entre les deux périphériques puisque l'on déconseille désormais de sniffer l'user-agent..

merci

Un compromis est d'utiliser des images 1,5 ou 2 meilleure mais en basse qualité. Avantage : pas besoin de code ou scripts spéciaux.

Perso, j'avais créé un petit test mais avec adjonction de script. J'ai vu passer une technique où on utilise des content:before ou after plutôt que des spans dans le h1.

mon problème n'est pas relié au retina...

c'est que maintenant, pour ne même largeur d'écran on peut aussi bien avoir à faire à une smartphone, une tablette ou un pc, alors comment faire la différence sans passer par l'user-agent

Pour mon site je ne sniffe rien du tout, j'utilise uniquement les MQ. En 1024, 1280px ou plus, que ce soit sur tablettes ou desktop, la mise en page ne bouge pas (sauf en mode portrait qui est sur 1 colonne). En dessous de 500 px, 1 colonne.

Pour ce qui est des appareils hidpi (iPhone 4 et suivants) ça ne change rien puisque le device-widh/height reste le même.

Pour ce qui est des photos (et vidéos) j'applique un max-width: 100%; height: auto, pour qu'elles rapetissent en gardant leurs proportions sur smartphone.

Le tout est de bien choisir ses breakpoints.

Hello Lionel et Patidou,

Il y a quelques jours, je repondais sur ce meme forum à cette question: http://forum.alsacreations.com/topic-27-69525-1-Resolu-Version-mobile---question-generale.html

Sugarskill a écrit :

La plus grosse problèmatique du responsive aujourd'hui est la gestion des images, Smashing Magazine en a parle recemment:
- Choosing A Responsive Image Solution
- Automate your responsive images with Mobify.js

La façon native de le faire serait d'utiliser l'attribut srcset, mais évidemment niveau support on en est pas encore là. Ou on en "était" pas encore là. Webkit à implémenté srcset en aout dernier dans la balise img.
Cependant il y a aussi des cas ou l'attribut est directement implementé dans la balise img, et des cas ou il est recommandé d'utiliser la balise picture et source pour une meilleure syntaxe (mais il me semble que srcset n'est pas du tout implémenté, et que c'est seulement en proposition, il faudrait donc utiliser des polyfill?).

Pour les solutions en JS, ce sont souvent des solutions de redimensionnement à la volée, ça peux être pratique mais pas optimal (voir le point du problème de la direction artistique du premier lien), une image en bandeau peut tres bien rendre sur desktop, et etre ridicule sur mobile, il faut donc la recropper a la main pour avoir un bon rendu.

Je pense qu'un couplage natif + JS devrait apporter une solution satisfaisante en attendant que le natif soit complètement supporté par les navigateurs mobiles.
Modifié par Sugarskill (10 Nov 2013 - 04:59)

J'ai créé une list sur mon kippt à ce sujet, si ces lectures peuvent aider: https://kippt.com/Sugarskill/responsive-images

merci sugarskill, je suis en train de regarder les articles que tu cites ,


la question que je pose en fait, est:

- pour une largeur donnée, 1000px par exemple qui peut être présente aussi bien sur in Iphone5, une tablette 10" ou sur un PC, comment je choisis une version d'image différente en fonction du contexte.
Modifié par lionel_css3 (10 Nov 2013 - 10:21)

j'ai trouvé aussi une solution intéressante, exposée dans ce tutoriel

http://www.lynda.com/CSS-tutorials/Creating-Responsive-Web-Experience/135375-2.html

ça repose sur le chargement, par javascript, de fragments de html par la fonction load() de jQuery, en relation avec les media query. En plus l'auteur propose une méthode efficace pour détecter avec jquery la largeur réellement utilisée par l'affichage (hors ascenseurs)


Et donc par ce biais on peut charger la version d'une image spécifique au périphérique..