Le responsive design suffit-il pour afficher un site sur mobile
Oui mais l'utilisateur aurait dû attendre que les images aient eu le temps de se charger.
Ah oui, mais c'est bien sur, se dit alors le webmaster du dit site, les mêmes images vont être chargées que le client web soit sur un ordinateur ou un mobile, indépendamment du responsive design. Celui-ci ne faisant que redimensionner les éléments du site.
Il convient alors de se demander s'il ne serait pas possible de faire un chargement des images, spécifique pour le cas de l'internaute sur mobile (le mobinaute).
On sait aujourd'hui détecter un mobile, il y a des class php pour cela.
On peut également lire le user agent du client Si ce dernier contient les mots clés que sont ipad, iphone, android, blackberry, alors nous avons un mobinaute.
Voilà pour la détection.
Ensuite il faut déterminer la taille idéale.
Pour des images insérées dans du texte, on peut déterminer une taille d'image avec par exemple une hauteur.
Soit une hauteur pour une image à destination d'un ordinateur, et une hauteur pour celle à destination du téléphone mobile.
A partir du rapport hauteur largeur de l'image source, on peut calculer la largeur de l'image de destination, connaissant sa hauteur.
L'image est alors crée via imagejpeg (php)
Et voilà notre pseudo code est fait.
Si la hauteur source est supérieure à la hauteur voulue
alors je crée l'image de destination avec une hauteur de destination
Si l'utilisateur est en mobile, alors la hauteur de destination est de 200px, sinon elle est de 400px
Connaissant la hauteur de destination et le taux entre la hauteur et la largeur de l'image source, la largeur de l'image de destination est calculée.
l'image est crée si elle n'existe pas déjà, dans un répertoire de miniatures, si besoin.
C'est cette technique qui a été mise en place pour présenter les images du recit de randonnée autour du Vieux Chaillol.
Les images n'ont pas la même taille selon le type de navigateur (desktop ou ipad / ipone / android)
Voir : Tour du Vieux Chaillol