Written by Depuis le lancement de l’Ipad 3, les images à très haute résolution ont été nécessaires pour s’afficher correctement sur les écrans de grande taille.Les webdesigners ont proposé différentes solutions pour les besoins des images de haute résolution, mais la pratique la plus courante consiste à créer deux images :
Retina.js | Images Retina avec Joomla! Pour avoir des images de qualités sur des appareils de haute résolution sans perdres l’optimisation sur les écrans à résolution plus faible. Vous pouvez blâmer l’ipad 3. Depuis le lancement de l’Ipad 3, les images à très haute résolution ont été nécessaires pour s’afficher correctement sur les écrans de grande taille.
Les webdesigners ont proposé différentes solutions pour les besoins des images de haute résolution, mais la pratique la plus courante consiste à créer deux images :
myimage.jpg – utilisée pour les écrans “normaux”.
[email protected] utilisée pour les supports à haute résolution. Cette image fait souvent 2 fois la taille et 2 fois le poids de l’image “normale”.
En créant deux images, vous en proposez une à haute résolution pour ceux qui en ont besoin, mais également une plus petite, et plus rapide, pour les visiteurs utilisant des écrans “normaux”.
Pour facilement permettre à votre site web d’échanger entre les images de haute et de basse résolution, nous vous recommandons Retina.js. Dans ce tutoriel nous allons voir comment utiliser Retina.js avec Joomla !, mais cela fonctionne également avec les autres CMSs.
Télécharger et installer RetinaJS
1 – Rendez-vous sur http://retinajs.com et téléchargez ce très bon plugin. Liens de téléchargement ici.2 – Placez le fichier retina.js dans le répertoire /js/ de votre template. Par exemple, le dossier pourrait être localisé come cela templates/montemplate/js/ 3 – 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 être différent.4 – Placez le code suivant juste après la balise , comme indiqué sur l’image ci-dessous :
Voici le code à insérer :
‹script src= »/‹?php echo $this-›baseurl; ?›/templates/‹?php echo $this-›template; ?›/js/retina.js » type= »text/javascript »›‹/script›
Comment cela fonctionne
Le html va changer lorsque vous naviguerez sur le site web avec un support à haute définition :
‹img src= »/path/to/[email protected] » alt= »My Image » /›
Souvenez-vous que les deux images, l’image “normale” et l’image à haute résolution doivent être placées dans le même répertoire. L’image haute résolution doit porter le format @2x.
NOTE : Cet article est une traduction de l’article : Retina.js: Support Retina Images in Joomla
Joomla! 3 Le Livre Pour Tous
Écrit pour toutes les personnes qui débutent avec Joomla!, ou qui possèdent déjà quelques connaissances avec les versions précédentes, et qui souhaitent construire et entretenir un site web sans avoir à entrer dans le code.
version numérique
{j2store}42||cart{/j2store}
version papier
{j2store}18||cart{/j2store}
Crédits photo
Image by Free-Photos from Pixabay