skip to Main Content

Comment créer des images Retina-Ready pour votre site WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Nous vivons dans un monde de  haute définition. Et puisque la plupart d’entre nous passent plus de huit heures par jour à regarder différents types d’écrans, la qualité des images et des caractères contenus dans ces écrans est très importante.

Bien qu’ils ne soient disponibles que depuis quelques années, les écrans Retina sont la voie de l’avenir. La densité de pixels élevée dans les écrans Retina rend les images claires et nettes. Et qui n’aime pas les images agréables et nettes ?

Apprendre à créer un site Web compatible avec les écrans Retina est un atout important pour n’importe quel développeur web. Malheureusement, il n’y a pas de solution idéale, parfaite pour rendre votre site convivial avec les écrans Retina-Ready. Donc, alors que nous attendons que quelqu’un trouve la solution la plus complète, nous avons étudié certaines des meilleures options possibles pour préparer votre site Web. De cette façon, vous ne serez pas égaré lorsque le moment viendra où tous les périphériques auront des retina qui s’affichent sous une forme ou une autre.

Création de fichiers d’images multiples

Commençons par les bases. La manière la plus simple d’assurer la prise en charge du mode Retina pour votre site Web est de créer des variations d’images multiples en différentes résolutions. Cela signifie que, pour chaque type de résolution (c’est-à-dire @ 1x), vous devez créer une version haute résolution de cet élément (c.-à-d. 2x).

Fondamentalement, vous pouvez créer plusieurs versions du même fichier et utiliser un plugin comme WP Retina 2x ou un script comme retina.js pour générer automatiquement les versions « @2x » de chaque taille d’image ou trouver « @2x » images et afficher la taille correspondante à chaque appareil.

Il est vrai que la création de plusieurs versions de la même image peut être un processus qui prend du temps. Malheureusement, il n’y a pas de méthode rapide qui génère automatiquement ces images pour vous. Cependant, il existe plusieurs plugins Photoshop qui vous permettent de réparer rapidement vos images.

Des plugins comme « Retinize It », qui est une série d’actions Photoshop qui vous permettent d’optimiser facilement vos designs pour les écrans Retina. Si vous utilisez une ancienne version de Photoshop (pré-CC), vous pouvez utiliser quelque chose comme « Four », ce qui fait essentiellement tout ce que l’outil actuel de Photoshop Generator fait, mais pour les versions antérieures de Photoshop.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Scalable Vector Graphics (SVG)

Le moyen le plus simple d’aller de l’avant avec le mode Retina est d’utiliser le format Scalable Vector Graphics (SVG) sur votre site. SVG est un format d’image vectoriel basé sur XML. Comme son nom l’indique, une image SVG est évolutive, ce qui signifie que les images peuvent être étirées aussi loin (ou aussi peu) que nécessaire, tout en restant nettes et claires. Cela peut être un moyen rapide et facile pour vous de mettre en œuvre le mode Retina sans trop effort.

Cependant, il existe deux inconvénients à utiliser SVG sur WordPress. Le premier est que, puisque c’est un format vectoriel, le SVG n’est pas adapté à toutes les images. Ainsi, vous pouvez utiliser le SVG pour les logos et les icônes, mais pas pour des fichiers comme les photos (ce qui est un peu pénible si vous aimez utiliser des images haute résolution pour votre site web). Mais si vous souhaitez utiliser des icônes, des animations ou des illustrations simples, les fichiers SVG peuvent certainement être une option pour un site Web compatible avec le mode Retina.

Le deuxième inconvénient à l’utilisation du SVG sur WordPress est que ce n’est pas un format officiellement compatible avec WordPress en raison de problèmes de sécurité. Étant donné qu’un fichier SVG est essentiellement un fichier XML, cela l’ouvre à toutes les vulnérabilités connues associées au format de fichier XML, telles que l’analyse coercitive, les attaques d’entité externe XML (XEE), l’attaque XML de déni de service (XDoS) les attaques, etc.

Cependant, il existe une façon d’activer le support SVG pour votre site WordPress, ce qui rendra vos fichiers SVG sécurisés.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Comment faire pour activer le SVG en toute sécurité sur WordPress

Safe SVG  est un plugin qui vous permet d’activer en toute sécurité le support des fichiers SVG sur votre site WordPress. Ce plugin s’assure que vos fichiers SVG sont désinfectés pour empêcher toute vulnérabilité potentielle XML affectant votre site.

Éloignez-vous des plugins qui permettent au type MIME de permettre le téléchargement de SVG vers la bibliothèque multimédia WordPress car ceux-ci sont dangereux et potentiellement dangereux pour votre site. Donc, si vous êtes vraiment tenté d’utiliser le format SVG sur WordPress, assurez-vous de le faire en toute sécurité et ne téléchargez pas le premier plugin SVG que vous voyez.

Quelques plugins pour intégrer la compatibilité Retina sur WordPress

Il existe plusieurs scripts et plugins pour la compatibilité Retina qui peuvent rendre votre vie beaucoup plus facile lorsque vous tentez de mettre en place un site Web compatible avec le mode Retina. Cependant, comme mentionné précédemment, la plupart des plugins et scripts disponibles, remplacent vos images par des images haute résolution uniquement pour les affichages haute résolution. Ils ne s’allongent pas comme un SVG: vous devez encore créer plusieurs images de différentes résolutions.

retina.js

retina.js http://imulus.github.io/retinajs/ est l’un des scripts les plus utilisés pour servir des images hautes résolutions. Il s’agit d’un script open source qui permet de servir facilement des images haute résolution à des périphériques avec des affichages Retina.

Le script vérifie chaque image sur la page pour voir s’il existe une version haute résolution de cette image sur le serveur. Si une variante haute résolution existe, le script échange la résolution standard avec l’image haute résolution. C’est l’une des façons les plus courantes de servir des images pour des écrans Retina sur votre site.

Dense

Similaire à retina.js, Dense est un plugin jQuery qui offre un moyen simple de servir des images au format pixel-ratio. Le script appelle la méthode $.fn.dense() de l’ initialisation, qui cible les balises « img » qui serviront des images compatibles avec le mode Retina au besoin.

Donc, il remplace toutes les images avec la version haute résolution respective, tout comme le script retina.js.

WP Retina 2x

Ce dernier peut s’apparenter à un générateur magique d’image Retina.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

WP Retina 2x est un plugin qui crée les fichiers d’image requis par les appareils High-DPI et les affiche à vos visiteurs en conséquence. Contrairement aux deux scripts précédents, il génère différentes images de résolution à partir d’une image initiale. Donc, si vous n’êtes pas trop satisfait de la création manuelle d’images différentes avec des résolutions différentes, cette option est pour vous.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra de convertir vos images en image retina ready.

 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
7 Partages
Partagez6
Tweetez
Enregistrer1