Le système de redimensionnement automatique d’images de WordPress n’a pas pour vocation de produire des images parfaites de manière consistante. Mais que diriez-vous de pouvoir afficher des images parfaites à tous les coups et sans effort?
Cela est possible grâce à une extension, mais nous allons vous montrer comment faire sans installer quoi que ce soit. En changeant quelques lignes de code dans le design de votre site, les images de votre blog WordPress seront parfaites, à chaque fois.
Étape 1 – Disposer des bonnes ressources
Commencez par rassembler les bonnes ressources. Cela ne prendra pas plus de cinq minutes et facilitera grandement l’opération.
- Le débogueur/inspecteur de navigateur. Cela dépend de votre navigateur. Pour Firefox, il s’appelle Firebug et pour Chrome, Inspector. Vous pouvez l’utiliser pour voir les balises dabs votre navigateur.
- Éditeur de code. Il est vital de disposer d’un bon éditeur de code. À vous de choisir un éditeur premium ou gratuit. Netbeans et Notepad++ sont deux bonnes options.
- Client FTP. Vous en aurez besoin pour transférer des fichiers à partir et vers le serveur. FileZilla et Cyberduck sont deux bonnes options.
Étape 2 – Quelle est votre largeur de colonne?
Si vous voulez des images parfaites, Vous devez connaitre votre largeur de colonne. C’est le facteur-clé quand il s’agit d’images incluses dans les articles. Si l’image dépasse de la largeur décrite, elle débordera sur le contenu de la barre de côté.
Vous pouvez trouver votre largeur de colonne de plusieurs façons :
- Regardez dans les options de thème. Elle est généralement indiquée sous la forme d’un nombre simple.
- L’éditeur de thème : Si vous voulez vraiment perdre votre temps, vous pouvez parcourir le code du fichier thème.
- Utilisez le débogueur de navigateur pour parcourir le code de votre site.
Étape 3 – Décidez d’une taille d’image standard
Si vous avez déjà une taille d’image standard pour votre site, vous devrez la changer. Une fois que vous aurez la largeur de votre boite, vous devrez décider de la taille. Vous devez modifier le code afin qu’il soit adapté à votre contenu. Mais ne le faites jamais à partir du fichier thème, cela pourrait causer des instabilités.
Éditez le fichier functions.php dans le répertoire theme. Si vous utilisez l’environnement Genesis ou Thesis, le fichier s’appelle custom_functions.php.
Ajoutez ‘add_image_size(‘full-width’, LARGEUR, HAUTEUR);’ au fichier functions.php (ou custom_functions.php). Vous pouvez utiliser 9999 pour une taille d’images illimitée.
Étape 4 – Ajouter des fonctionnalités de redimensionnement d’images personnalisées
Ajoutez ‘add_image_size(‘full-width-ratio’, 600, 9999);’ dans le code.
La taille utilisée ne recadrera aucune image que vous ajouterez. Pour faire plus clair, WordPress redimensionnera vos images en respectant leur rapport hauteur/largeur original. De cette façon, vos images seront redimensionnées sans être recadrées, permettant l’affichage d’images parfaites sur votre blog WordPress.
Gardez à l’esprit les images que vous utilisez
Souvenez-vous que lorsque vous traitez avec des images, leur qualité a son importance. Des images de basse qualité, lorsqu’elles sont redimensionnées, produiront une perte de qualité plus prononcée. C’est pourquoi il est préférable de commencer avec de larges images pour ensuite les redimensionner/recadrer.
Enfin, évitez d’utiliser de très larges images. Celles-ci peuvent ralentir votre site web et Google pénalise généralement les sites qui mettent plus de quelques secondes à charger; vous pourriez donc mettre à mal vos efforts de SEO et ainsi descendre les échelons du moteur de recherche.
