La probl\u00e9matique se pose depuis maintenant quelques temps concernant l’affichage d’image optimis\u00e9e pour nos diff\u00e9rents terminaux : qu’ils proposent une dimension d’\u00e9cran plus petite ou une densit\u00e9 de pixels plus grande (HD). Cette probl\u00e9matique est en cours de travaux, et Webkit vient d’annoncer le support d’une des solutions envisag\u00e9es.<\/p>\n
srcset<\/code><\/h2>\nComme j’aime bien vous tenir inform\u00e9s des choses qui peuvent \u00eatre bien utiles pour vous, j’avais d\u00e9j\u00e0 \u00e9crit un article sur les solutions d’images responsives et s’adaptant aux terminaux cibles<\/a>. Je vous le mentionne donc pour rappel. Il ne traite pas uniquement de srcset<\/code>, mais traite \u00e9galement des diff\u00e9rentes solutions en cours de travaux dans le groupe de travail de ResponsiveImages.org<\/a>.<\/p>\nPour r\u00e9sumer, srcset<\/code> est donc un nouvel attribut de l’\u00e9l\u00e9ment HTML img<\/code> proposant une syntaxe particuli\u00e8re permettant de d\u00e9finir les sources d’images en fonction des terminaux cibl\u00e9s.
\nPrenons un exemple de code simple :<\/p>\n<img\r\n src=\"image-classique.jpg\"\r\n srcset=\"image-medium.jpg 300w, image-haute-resolution.jpg 2x\"><\/code><\/pre>\nLa syntaxe impl\u00e9ment\u00e9e par Webkit respecte celle propos\u00e9e par le groupe de travail cit\u00e9 pr\u00e9c\u00e9demment. La valeur de l’attribut accueil donc plusieurs couples <image crit\u00e8res> s\u00e9par\u00e9s par une virgule \u00e0 chaque nouvelle ressource image propos\u00e9e. Il est possible de combiner les crit\u00e8res pour une m\u00eame image, comme suit :<\/p>\n
<img\r\n src=\"image-small.jpg\"\r\n srcset=\"image-mid-hd.jpg 300w 2x\"><\/code><\/pre>\n