La taille des images a été l’un des aspects les plus difficiles à maîtriser pour de nombreux développeurs de sites web. Les images trop grandes et trop détaillées prennent trop de temps à rendre. Les images trop petites perdent de la qualité lorsqu’elles sont agrandies. Alors, que devez-vous faire lorsque vous avez besoin d’un graphique d’une taille spécifique ?
Dans ce tutoriel, nous allons vous apprendre comment agrandir une image sans perdre en qualité. Le mieux, c’est qu’il n’est pas nécessaire d’être graphiste pour bénéficier de ces techniques.
Bien que les outils ci-dessous puissent vous aider, il est important de noter que vous devrez toujours télécharger les images dans WordPress.
Comment les images perdent leur qualité
Pratiquement toutes les images utilisées sur Internet sont rendues à l’aide de très petits pixels. Ce sont ces ultra petits carrés qui fournissent la couleur et le contraste d’une image donnée. En fait, vous pouvez voir ces micro cases lorsque vous zoomez pour voir les détails d’un graphique.
Lorsqu’une image est agrandie, ces pixels deviennent plus apparents car ils ne s’adaptent pas à la taille changeante. Ils restent de la même couleur, qu’ils soient microscopiques ou de trois pouces de diamètre. Ces éléments bitmap sont réglés et visualisés d’une manière spécifique pour l’affichage.
Lorsqu’un graphique est rendu sur votre écran, chaque pixel est mappé et placé à un endroit précis. Leur texture ne change jamais et ils restent de la même couleur, que vous fassiez un zoom complet ou que vous réduisiez l’image
Le remplacement d’une partie de la qualité lors de l’agrandissement d’une image se fait par un processus appelé interpolation fractale. Cela signifie que chaque pixel prend essentiellement certaines des propriétés des pixels voisins afin de lisser le graphique. En fait, il supprime l’effet de distorsion de la boîte lorsque l’image est agrandie.
Il est possible de faire quelques retouches mineures d’images dans WordPress lui-même. Cependant, le système n’a pas la capacité d’interpolation.
Comment agrandir une image sans en perdre la qualité
Il y aura des moments où vous aurez besoin d’un graphique plus petit pour être plus visible. Au lieu de rendre l’image plus grande et déformée par rapport aux pixels plus grands, vous pouvez utiliser un logiciel d’édition pour la rendre plus nette.
Voici quelques uns des meilleurs outils à utiliser lorsque vous devez effectuer ce genre de modifications.
Pixlr est un outil incroyable qui ressemble à certains des programmes de conception graphique les plus populaires sur le marché. Il est entièrement basé sur le web et son utilisation est gratuite. En fait, vous n’avez même pas besoin de vous connecter ou de créer un compte pour utiliser l’application. Pour redimensionner votre image :
Étape 1 : Allez sur le site web, Pixlr.com/editor.
Étape 2 : Allez dans “Fichier” en haut à gauche et cliquez sur “Ouvrir l’image”.
Étape 3 : Trouvez l’image que vous souhaitez modifier et cliquez sur “Ouvrir”. Elle sera alors chargée dans Pixlr.
Étape 4 : Cliquez sur “Image” dans la barre de tâches de Pixlr en haut et cliquez sur “Taille de l’image”.
Étape 5 : Une petite fenêtre apparaîtra dans laquelle vous pourrez modifier la largeur et la hauteur de l’image. Faites les ajustements nécessaires à l’apparence que vous souhaitez donner au graphique. Note : En gardant la case “Contraindre les proportions” cochée, vous vous assurez que l’image reste aux mêmes dimensions relatives. Cela signifie qu’elle ne sera pas écrasée lors des ajustements.
Étape 6 : Une fois que l’image a la taille que vous souhaitez, cliquez à nouveau sur “Fichier” en haut de la page. Cette fois, cliquez sur “Enregistrer”.
Pixlr interpolera automatiquement l’image lorsque vous en modifierez la taille. Il peut également être important de souligner que vous pouvez importer des images à partir d’une URL de site web ou d’une bibliothèque d’images distante.
Pour ceux qui utilisent uniquement les systèmes d’exploitation Windows, InfranView est un système d’édition gratuit qui peut vous aider à redimensionner vos graphiques. C’est un éditeur très petit, mais efficace, compact et facile à utiliser. Il prend en charge la plupart des systèmes d’exploitation Microsoft, de Windows 95 à Windows 10. Pour utiliser InfranView pour éditer votre image :
Étape 1 : Visitez le site web InfranView.com.
Étape 2 : Téléchargez et installez la version qui correspond à votre système d’exploitation.
Etape 3 : Lorsque InfranView se charge, allez dans “Fichier” et ouvrez votre image.
Étape 4 : Allez dans le contrôle “Image” de la barre d’outils et cliquez sur “Redimensionner/échantillonner…” dans la liste.
Étape 5 : Une nouvelle fenêtre apparaîtra avec les paramètres de redimensionnement. Définissez la nouvelle taille en fonction de vos préférences en matière de largeur et de hauteur.
Étape 6 : Assurez-vous que la case à cocher “Aiguiser après le rééchantillonnage” a été sélectionnée.
Étape 7 : Dans la section “Méthode de la taille”, le paramètre de rééchantillonnage doit être réglé sur “Lanczos (le plus lent)”.
Étape 8 : Cliquez sur “OK” et l’image sera redimensionnée par interpolation.
Étape 9 : Vous pouvez ensuite aller dans la zone de fichiers et enregistrer votre travail.
Gimp est un éditeur d’images gratuit et open source. Bien qu’il ne dispose pas des outils élaborés que peuvent avoir des programmes comme Photoshop, il vous aidera à redimensionner vos images sans perte de qualité. Pour utiliser ce logiciel afin d’éditer votre image :
Étape 1 : Visitez le site web Gimp.org et téléchargez la dernière version. Note : Le site web tentera de détecter automatiquement votre système d’exploitation. Cependant, vous pouvez sélectionner des téléchargements pour la plupart des grandes configurations d’ordinateurs.
Étape 2 : Allez dans “Fichier” et ouvrez l’image que vous voulez modifier.
Étape 3 : Ensuite, sélectionnez “Image” et cliquez sur “Scale image” dans la liste.
Étape 4 : Une nouvelle fenêtre s’ouvre dans laquelle vous pouvez modifier les dimensions du graphique. Modifiez la hauteur et la largeur en fonction de vos besoins. N’oubliez pas que les graphiques auront par défaut une résolution de 72 pixels. Cela ne doit pas être modifié si vous créez quelque chose à voir sur le web.
Étape 5 : Sous “Qualité”, vous verrez une fenêtre déroulante permettant de modifier l’interpolation. Sélectionnez “Sinc (Lanczos3)” et cliquez sur “Échelle”.
Étape 6 : Une fois que vous avez terminé, cliquez sur la commande “Fichier” de la barre d’outils et cliquez sur “Enregistrer” ou “Enregistrer sous” afin de stocker votre projet.
Pourquoi ne pouvez-vous pas utiliser des images plus grandes et régler le site web pour qu’il les rétrécisse lorsque les gens le visitent ?
Les images sont rendues dans leur taille originale lors de leur affichage. Cela signifie que si vous utilisez des images de très grande taille, le site web sera ralenti. Même si vous configurez une image de 2000×2000 pixels pour qu’elle s’affiche sous la forme d’une vignette de 150×150, l’image entière sera toujours téléchargée à 2000.
Pourquoi l’image semble-t-elle un peu floue lorsqu’on l’agrandit avec ces outils ?
L’interpolation permet aux pixels de se fondre essentiellement les uns avec les autres. Ce mélange entraîne une diminution de la netteté du graphique. Malheureusement, il n’existe aucun moyen de rendre une grande image aussi nette que sa version plus petite. Le niveau de ce “flou” dépendra de la taille du graphique.
Cela fonctionnera-t-il sur n’importe quel type de fichier image ?
Les types de graphiques que vous pouvez modifier dépendent du programme que vous utilisez. Par exemple, les types de fichiers se terminant par “.PSD” sont normalement réservés à Photoshop. Toutefois, certains programmes comme InfranView peuvent accéder à ces types de fichiers. Sinon, vous pouvez redimensionner toute image prise en charge par votre logiciel.
L’interpolation peut vous aider à donner une belle apparence à votre site web. Au lieu d’essayer d’agrandir les images, vous pouvez les redimensionner avec ce genre d’outils pour donner à vos graphiques un aspect plus lisse et plus élégant. La qualité de votre contenu ne doit pas être altérée par la qualité de vos images.
Quel type d’outils utilisez-vous pour vos graphiques WordPress ? Combien de temps consacrez-vous à la création d’images pour vos articles et vos pages ?
