Petites images pour petits écrans (ou le contraire)
La source
Je découvre http://adaptive-images.com/
Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.
Cela me semble intéressant et projète de le tester.
Puis je twitte le lien pour partager et voir si quelqu’un l’a utilisé ou a une opinion à ce sujet.
La réponse de @Dascritch ne se fait pas attendre
a la base, le souci, c’est que htacess ne voit que les UA et les cookies. Mauvais…
tu peux faire sans htaccess, mais en utilisant les css. Et largement plus simple
Ce post n’est donc que le support à une discussion autour du problème de la taille des images pour les différentes tailles d’écrans des visiteurs de nos sites web, du téléphone aux grands écrans.
Pour bien centrer le sujet :
Faire en sorte que l’image apparaisse avec une taille adaptée quelle que soit la taille d’écran se règle en CSS avec
img {max-width : 100 %}
L’autre “problème” avec les images, c’est l’impact que peut avoir leur poids avec le temps de chargement de la page. (Il faut évidemment redimensionner l’image, ajuster sa qualité.)
Le temps de chargement doit au maximum être minimisé dans tous les cas mais c’est d’autant plus important pour les smartphones.
C’est pour cette raison que la solution “adaptive images” m’a semblé intéressante.
Elle permet de fournir une image de taille adaptée à la taille de l’écran.
Une exemple présenté sur le site :
- grand écran -> image de 210kb ( 1382 x 778 )
- smartphone -> image de 30kb (480 x 271 )
Comment cela fonctionne.
- La taille d’écran est déterminée en javascript, cette taille est stockée dans un cookie.
- Le fichier htaccess intercepte les requêtes pour les images
- Un script php vérifie si l’image à la bonne taille existe (dans un cache) et la génère à la taille adéquate si elle n’est pas disponible (avec GD).
Ce que je trouve intéressant :
- on ne stocke qu’une image
- les images adaptées ne sont créées que si un visiteur en a besoin
- pas de modification de code HTML
J’attends donc les points négatifs ou les solutions alternatives auxquels vous pourriez penser.
