Responsive et image HD pour mobiles = approche paradoxale?

Sur le principe, c'est "comme ça". C'est bête à dire, mais je bosse surtout sur de l'application mobile plus que du web, et ce problème n'est jamais soulevé dans ces cas, tout bêtement parce que c'est un dictât imposé par Apple depuis l'iPhone 4, et qui a été suivi par les constructeurs Android et les HDPI et plus.

De fait, on ne se pose la question que lorsqu'on fait du web et du mobile en parallèle pour le même projet (que ce soit en web mobile, en responsive ou en application native).

Le constat qu'il faut tirer c'est que finalement, en dehors de quelques cas exceptionnels, ça n'est pas si problématique que ça. Il y a des tas d'applications basées uniquement sur de la photo (Instagram, les photos dans Facebook, Flickr, Pinterest etc) qui fonctionnent très bien, avec avec un wifi pas top top ou en 3G. Et depuis la 4G, il n'y a vraiment plus rien à redire.

Aujourd'hui, ça pose peut-être un peu plus de problèmes, avec les tendances de background full screen en blurred, les grosses images d'illustration etc. Mais il faut savoir raison garder. Sur un iPhone 5, par exemple, quand on a une image "full screen", pour un background par exemple, on enlève déjà les 80 pixels de haut pour le header, et éventuellement 80 en bas également pour la tab bar. Ce qui nous laisse 976 pixels de hauteur pour 640 de large.
Donc l'image rétina va nous faire du 1952x1280. En nettoyant les images pour virer toutes les méta inutiles, tu économises déjà pas mal d'octects. En compressant de façon optimisés, tu en économises encore un peu. Donc on arrive très rapidement à un poids acceptable, surtout en 4G, encore une fois.

Après, il faut savoir que le cache des navigateurs mobiles est tout de même très bien conçu, et que ne sont chargées que les nouvelles images lors d'un retour sur le site. Donc là c'est pareil, ça va très vite.

Autre point, il ne faut pas oublier les habitudes "mobiles" : sur la plupart des applications, on a un splash screen, c'est à dire une image en plein écran qui indique qu'on vient de lancer l'application et que le contenu est en train de charger.
Il n'est pas impossible sur du web mobile de faire un splash "factice" et très rapide à charger, composé par exemple d'un fond de couleur uni en CSS, et sur ce fond de poser un loader très simple en gif ou même en web font ( http://www.debray-jerome.fr/un-loader-en-css-avec-des-web-fonts-18.html par exemple), ce qui permet de faire patienter intelligemment l'utilisateur d'une façon dont il a l'habitude, tout en chargeant derrière les grosses images, les javascripts, etc.
Pour ça, il suffit de jouer avec readystatechange et readyState == 'complete' ! ;)

Je n'ai pas fait tout le tour du sujet, mais tu as compris l'idée : aujourd'hui, ça ne pose plus aucun problème, pour peu qu'il y ait un peu d'optimisation et d'intelligence derrière ton site mobile ou responsive (d'ailleurs, le responsive nuit à tout cela : un site mobile à part entière, avec uniquement les assets JS, images et CSS qui lui conviennent aura de meilleurs temps de chargement).