Images et responsive

Bonjour à tous,

Devant réaliser un site internet (bureau, tablette et mobile), j'effectue une veille afin de rechercher la solution à privilégier pour l'affichage des images sur tous ces supports.

J'ai trouvé de nombreuses solutions (htaccess, php, javascript, ...). Je peux ainsi voir que chaque solution a ses avantages, mais également ses inconvénients ...

La technique que je pense privilégier pour l'instant utiliserait la technologie javascript pour la manipulation de data-attributs.
En insérant des data-attributs aux images, je pourrais ainsi stocker les url des différentes images (mobile, tablette et bureau). En déterminant le support, je pourrais ainsi afficher l'image adéquate.
Mes balises img auraient ainsi la forme suivante : <img data-imgBureau="/images/bureau/1.jpg" data-imgTablette="/images/tablette/1.jpg" data-imgMobile="images/mobile/1.jpg" />
Après détection du support, j'obtiendrais ainsi par exemple l'image suivante : <img src="/images/bureau/1.jpg" />

J'aimerais avoir votre avis sur cette technique. Vous paraît-elle efficace ? Bien que l'attribut src soit rempli après avoir détecté le support, cela n'est-il pas contraire aux bonnes pratiques ?

Je vous remercie par avance,

Salut,

À l'heure actuelle, aucune technique proposée pour les images responsive n'est complètement satisfaisante, en effet.

En ce qui concerne celle que tu souhaites utiliser, elle est jouable dans les conditions suivantes.

Ne distingue pas les différentes images sur la base du type de périphérique, comme tu le fais (desktop, tablette, smartphone), mais plutôt sur la densité de pixels. En effet, on peut très bien tomber sur un utilisateur utilisant un ordinateur portable dont l'écran est à haute densité de pixels (pense au MacBook Pro à écran Retina) ou sur un autre dont la tablette ou le smartphone affiche un ratio de pixels de 1 (pense, par exemple, à l'iPad Mini de première génération ou à différents modèles Nokia Windows Phone en mode paysage).

Renseigne l'attribut src de l'élément img, avec pour valeur le chemin vers l'image qui sera servie pour les écrans à densité de pixels de 1. Imagine que le JavaScript est désactivé ou ne se charge pas correctement (par exemple, à cause d'une connexion pas très performante, en Edge ou, pire, en GPRS) : sans attribut src préalablement renseigné, tu seras bien embêté.
Modifié par Victor BRITO (29 Jan 2014 - 01:27)