Depuis le lancement de l’Ipad 3, les images \u00e0 tr\u00e8s haute r\u00e9solution ont \u00e9t\u00e9 n\u00e9cessaires pour s’afficher correctement sur les \u00e9crans de grande taille.Les webdesigners ont propos\u00e9 diff\u00e9rentes solutions pour les besoins des images de haute r\u00e9solution, mais la pratique la plus courante consiste \u00e0 cr\u00e9er deux images :<\/p>\n
\nRetina.js | Images Retina avec Joomla! Pour avoir des images de qualit\u00e9s sur des appareils de haute r\u00e9solution sans perdres l\u2019optimisation sur les \u00e9crans \u00e0 r\u00e9solution plus faible. Vous pouvez bl\u00e2mer l’ipad 3. Depuis le lancement de l’Ipad 3, les images \u00e0 tr\u00e8s haute r\u00e9solution ont \u00e9t\u00e9 n\u00e9cessaires pour s’afficher correctement sur les \u00e9crans de grande taille.
\nLes webdesigners ont propos\u00e9 diff\u00e9rentes solutions pour les besoins des images de haute r\u00e9solution, mais la pratique la plus courante consiste \u00e0 cr\u00e9er deux images :<\/p>\n
myimage.jpg \u2013 utilis\u00e9e pour les \u00e9crans \u201cnormaux\u201d.
\n myimage@2x.jpg utilis\u00e9e pour les supports \u00e0 haute r\u00e9solution. Cette image fait souvent 2 fois la taille et 2 fois le poids de l’image \u201cnormale\u201d.<\/p>\n
En cr\u00e9ant deux images, vous en proposez une \u00e0 haute r\u00e9solution pour ceux qui en ont besoin, mais \u00e9galement une plus petite, et plus rapide, pour les visiteurs utilisant des \u00e9crans \u201cnormaux\u201d.
\nPour facilement permettre \u00e0 votre site web d’\u00e9changer entre les images de haute et de basse r\u00e9solution, nous vous recommandons Retina.js. Dans ce tutoriel nous allons voir comment utiliser Retina.js avec Joomla !, mais cela fonctionne \u00e9galement avec les autres CMSs.
\nT\u00e9l\u00e9charger et installer RetinaJS
\n1 \u2013 Rendez-vous sur http:\/\/retinajs.com et t\u00e9l\u00e9chargez ce tr\u00e8s bon plugin. Liens de t\u00e9l\u00e9chargement ici.2 \u2013 Placez le fichier retina.js dans le r\u00e9pertoire \/js\/ de votre template. Par exemple, le dossier pourrait \u00eatre localis\u00e9 come cela templates\/montemplate\/js\/ 3 \u2013 Ouvrez le fichier de votre template. Normalement templates\/montemplate\/index.php. Pour les sites utilisant un template framework, comme par exemple Gantry ou T3, cela peut \u00eatre diff\u00e9rent.4 \u2013 Placez le code suivant juste apr\u00e8s la balise , comme indiqu\u00e9 sur l’image ci-dessous :<\/p>\n
Voici le code \u00e0 ins\u00e9rer :
\n\u2039script src=\u00a0\u00bb\/\u2039?php echo $this-\u203abaseurl; ?\u203a\/templates\/\u2039?php echo $this-\u203atemplate; ?\u203a\/js\/retina.js\u00a0\u00bb type=\u00a0\u00bbtext\/javascript\u00a0\u00bb\u203a\u2039\/script\u203a
\nComment cela fonctionne
\nLe html va changer lorsque vous naviguerez sur le site web avec un support \u00e0 haute d\u00e9finition :
\n\u2039img src=\u00a0\u00bb\/path\/to\/myimage@2x.jpg\u00a0\u00bb alt=\u00a0\u00bbMy Image\u00a0\u00bb \/\u203a
\nSouvenez-vous que les deux images, l’image \u201cnormale\u201d et l’image \u00e0 haute r\u00e9solution doivent \u00eatre plac\u00e9es dans le m\u00eame r\u00e9pertoire. L’image haute r\u00e9solution doit porter le format @2x.<\/p>\n
NOTE : Cet article est une traduction de l’article : Retina.js: Support Retina Images in Joomla
\n <\/p>\n
Joomla! 3 Le Livre Pour Tous<\/p>\n
E\u0301crit pour toutes les personnes qui de\u0301butent avec Joomla!, ou qui posse\u0300dent de\u0301ja\u0300 quelques connaissances avec les versions pre\u0301ce\u0301dentes, et qui souhaitent construire et entretenir un site web sans avoir a\u0300 entrer dans le code.<\/p>\n
version num\u00e9rique
\n{j2store}42||cart{\/j2store}<\/p>\n
version papier
\n{j2store}18||cart{\/j2store}<\/p>\n
Cr\u00e9dits photo
\nImage by Free-Photos from Pixabay<\/p>\n","protected":false},"excerpt":{"rendered":"
Depuis le lancement de l’Ipad 3, les images \u00e0 tr\u00e8s haute r\u00e9solution ont \u00e9t\u00e9 n\u00e9cessaires pour s’afficher correctement sur les \u00e9crans de grande taille.Les webdesigners ont propos\u00e9 diff\u00e9rentes solutions pour les besoins des images de haute r\u00e9solution, mais la pratique la plus courante consiste \u00e0 cr\u00e9er deux images :<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-302","post","type-post","status-publish","format-standard","hentry","category-sixtine"],"yoast_head":"\n