Hello.
 
J'ai eu un iPad entre les mains ce WE et je l'ai utilisé par curiosité pour voir comment mon site rendait dessus. Et j'ai été déçu.
Admettons qu'on code un site pour du 960 ou du 1000 pixel de large et qu'on regarde le site en mode pano (2 048px). Le système va faire un upscale pour que le contenu s'adapte à la résolution en largeur en vigueur.
 
Autant tout ce qui est dessiné et affiché en vectoriel passe la transformation sans souci, autant pour les images la transformation est dégueulasse. J'avais des miniatures en 200px de large et l'upscale donnait un résultat particulièrement moche. Quand le but du site est de faire une jolie présentation de son travail, super....
 
Les miniatures étant affichées avec les attributs height=200 et width=200, j'ai alors tenté une bidouille : mettre des images en 400x400 en laissant le code intact.
Au final cela passe plutôt bien, Safari garde bien le 400x400 et l'upscale fait beaucoup moins mal.
L'inconvénient est que cela multiple par 4 le poids des images et que sur les systèmes préservant les images le navigateur va donc faire un downscale en 200x200 dont je ne peux contrôler la qualité. Enfin heureusement faire du 200x200 avec un 400x400 n'est pas très compliqué.
 
Donc, pour parer au "plus pressé", j'ai remplacé les vignettes de la homepage pour que cela présente mieux mais dans le fond, quelle est la best practice à adopter pour gérer ce cas à la noix ?
 
Merci d'avance

Responsive Design, Media Queries, CSS3