Comment afficher des images en taille réelle dans WordPress (4 méthodes faciles)

Avez-vous déjà téléchargé une photo magnifique en haute résolution sur votre site WordPress, pour constater qu'elle apparaissait de manière décevante petite ou floue ? C'est une expérience frustrante, surtout lorsque vous devez présenter un travail détaillé comme de la photographie, de l'art ou des images de produits.

Depuis la version 5.3, WordPress réduit automatiquement les images volumineuses pour améliorer la vitesse du site, ce qui est une excellente fonctionnalité. Cependant, cela peut sembler un obstacle lorsque la qualité de l'image est essentielle pour votre portfolio ou votre boutique en ligne.

Chez WPBeginner, nous avons rencontré exactement ce problème sur nos propres projets. Nous avons appris que vous n'avez pas à choisir entre de belles images et un site web rapide.

Dans ce guide, nous vous présenterons quatre méthodes faciles pour afficher des images en taille réelle dans WordPress sans ralentir votre site.

Quand faut-il afficher des images en taille réelle dans WordPress ?

Un exemple de situation où vous pourriez avoir besoin d'afficher des images en taille réelle dans WordPress est si vous gérez un portfolio de photographie ou une boutique de design graphique. Si vous vendez votre travail sous forme de téléchargements numériques, vous pourriez vouloir afficher de grandes images pour montrer leur véritable qualité à vos clients potentiels.

Même si vous gérez une boutique WooCommerce pour des produits physiques de commerce électronique, vous pourriez quand même avoir besoin d'afficher des images en taille réelle. Vous pouvez utiliser une image miniature de produit, sur laquelle les utilisateurs peuvent cliquer pour voir la taille originale de l'image et zoomer sur les détails de l'article.

Cela dit, les grandes images peuvent causer beaucoup de problèmes. Elles peuvent ralentir votre site web, ce qui peut ensuite affecter négativement son optimisation pour les moteurs de recherche (SEO).

Pour cette raison, WordPress redimensionne automatiquement les grandes images lors de leur téléchargement. Si une image est plus grande que 2560 pixels en hauteur et/ou en largeur, WordPress la réduira proportionnellement à une taille plus petite, tout en conservant les dimensions originales de l'image.

La plupart des hébergeurs WordPress limitent également la taille des fichiers que vous pouvez télécharger dans la médiathèque. Cela peut être un obstacle si vous avez beaucoup de grandes images à afficher.

Si vous souhaitez modifier la limite de taille, vous pouvez consulter notre guide sur comment augmenter la taille maximale de téléversement de fichiers dans WordPress.

Voyons maintenant comment vous pouvez afficher des images en taille réelle sur votre site WordPress. Nous avons 4 méthodes pour cela. Certaines peuvent mieux fonctionner pour des images uniques, tandis que d'autres sont plus adaptées pour plusieurs images. Utilisez simplement les liens ci-dessous pour accéder directement à votre méthode préférée :

• Méthode 1 : Utiliser l'URL de l'image en taille réelle (Idéal pour les images uniques)
• Méthode 2 : Désactiver le redimensionnement des images dans WordPress (Recommandé pour plusieurs fichiers)
• Méthode 3 : Désactiver le redimensionnement des images avec un plugin (Pour les grands débutants)
• Méthode 4 : Ouvrir les images WordPress pleine largeur dans une lightbox (idéal pour les galeries)
• Foire aux questions sur les images pleine taille
• Bonus : Optimisez vos images pour une meilleure vitesse et un meilleur référencement

Méthode 1 : Utiliser l'URL de l'image en taille réelle (Idéal pour les images uniques)

Si vous souhaitez uniquement afficher une ou deux grandes images sur votre site Web, vous pouvez simplement les ajouter en utilisant les URL d'image d'origine.

Lorsque vous téléchargez une image qui dépasse les dimensions maximales, WordPress redimensionne cette image pour créer une version plus petite. Cependant, l'image d'origine, plus grande, reste intacte.

Tout d'abord, allez dans Média » Bibliothèque depuis le tableau de bord WordPress. Assurez-vous de changer votre vue en vue « Liste ».

Ensuite, survolez votre grande image avec votre souris. Recherchez celle dont le nom de fichier se termine par « -scaled ».

Lorsque le bouton « Copier l'URL » apparaît, cliquez dessus.

Une fois cela fait, vous pouvez coller l'URL de l'image dans la barre d'adresse de votre navigateur et supprimer '-scaled....' de la fin de l'URL de l'image. Veillez à ne pas supprimer le format de l'image (.png, .jpg, .gif, etc.).

Ainsi, si l'URL de l'image mise à l'échelle est http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg, alors votre URL d'image d'origine est http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.

Lorsque vous visitez cette URL, vous verrez l'image dans ses dimensions d'origine.

Maintenant, vous pouvez ajouter l'image n'importe où sur votre site Web. Comme nous ajoutons l'image à l'aide d'un lien, vous devrez l'intégrer plutôt que de la sélectionner dans la bibliothèque de médias.

Pour ce faire, ouvrez l'éditeur de blocs Gutenberg pour l'article ou la page où vous souhaitez utiliser l'image. Cliquez ensuite sur l'icône « + Ajouter un bloc » pour ajouter un nouveau bloc. Ici, vous pouvez sélectionner le bloc Image.

Une fois cela fait, cliquez sur « Insérer depuis l'URL ».

Vous pouvez ensuite simplement coller l'URL de l'image en taille réelle ou l'image volumineuse dans le champ, et appuyez sur la touche « Entrée » de votre clavier.

Lorsque vous êtes prêt à publier, cliquez simplement sur « Publier » ou « Mettre à jour ». Vous pouvez maintenant visiter cette page ou cet article pour voir l'image en taille réelle en action.

Pour ajouter d'autres images en taille réelle, répétez simplement le même processus décrit ci-dessus.

Méthode 2 : Désactiver le redimensionnement des images dans WordPress (Recommandé pour plusieurs fichiers)

Si vous prévoyez d'afficher plusieurs grandes images, désactiver la fonction de mise à l'échelle automatique est la meilleure approche. Bien que vous puissiez le faire en modifiant le fichier functions.php de votre thème, cette méthode peut être risquée et peut casser votre site si vous faites une erreur.

C'est pourquoi nous recommandons d'utiliser plutôt le plugin gratuit WPCode. Comme nous l'expliquons dans notre critique complète de WPCode, c'est le moyen le plus sûr d'ajouter des extraits de code, et ils ne seront pas effacés lors de la mise à jour de votre thème.

Tout d'abord, vous devrez installer et activer le plugin. Pour cette méthode, la version gratuite de WPCode est tout ce dont vous avez besoin.

Une fois activé, allez dans Extraits de code » Ajouter un extrait. Ici, sélectionnez 'Ajouter votre code personnalisé (Nouvel extrait)' et cliquez sur 'Utiliser l'extrait'.

Maintenant, tapez un titre pour l'extrait de code personnalisé. C'est juste pour votre référence. Après cela, ouvrez le menu déroulant 'Type de code' et sélectionnez 'Extrait PHP'.

Dans l'éditeur de code, ajoutez l'extrait de code suivant :

add_filter( 'big_image_size_threshold', '__return_false' );

Ensuite, faites défiler vers le bas jusqu'à la section 'Insertion'. Assurez-vous que l'emplacement est défini sur 'Exécuter partout' afin que le code fonctionne sur l'ensemble de votre site Web.

Lorsque vous êtes prêt, faites défiler jusqu'en haut de l'écran et cliquez sur le bouton 'Inactif' pour le changer en 'Actif'. Enfin, cliquez sur 'Enregistrer l'extrait' pour rendre le code actif.

À partir de maintenant, WordPress utilisera les dimensions d'origine pour toute grande image que vous téléchargez, vous donnant accès à la version en taille réelle.

Méthode 3 : Désactiver le redimensionnement des images avec un plugin (Pour les grands débutants)

Si la méthode du code vous semble trop intimidante, vous pouvez désactiver la mise à l'échelle des images en utilisant Perfect Images. Ce plugin gratuit vous permet de créer des tailles d'images supplémentaires dans WordPress, de mettre à jour les métadonnées de vos médias, et plus encore.

Tout d'abord, vous devrez installer et activer le plugin Perfect Images. Pour plus de détails sur l'installation d'un plugin, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, rendez-vous sur Meow Apps » Perfect Images et cochez la case Désactiver à côté de 'Image Threshold'.

WordPress n'ajoutera plus l'attribut « -scaled » à aucune image, vous pouvez donc télécharger de gros fichiers multimédias et WordPress les affichera par défaut en taille réelle.

Méthode 4 : Ouvrir les images WordPress pleine largeur dans une lightbox (idéal pour les galeries)

La dernière option consiste à ajouter une galerie d'images en taille réelle à votre site. C'est parfait si vous créez une galerie d'images, un curseur ou un portfolio de photos.

Cette méthode vous permet d'afficher de petites miniatures lorsque la page se charge. Les visiteurs peuvent ensuite cliquer sur n'importe quelle miniature pour voir l'image en taille réelle dans une fenêtre contextuelle.

Sachez simplement que vous devez désactiver la mise à l'échelle des images au préalable en utilisant l'une des méthodes ci-dessus. Sinon, votre galerie n'affichera que la version réduite de vos images.

Une fois que vous avez désactivé la mise à l'échelle, il est temps de créer une galerie. Nous vous recommandons d'utiliser Envira Gallery. Comme nous l'expliquons dans notre critique complète d'Envira Gallery, c'est le meilleur plugin de galerie d'images pour WordPress en raison de sa puissance et de sa facilité d'utilisation.

Après avoir installé et activé Envira, vous pouvez suivre notre tutoriel étape par étape sur comment ajouter une galerie avec un effet de galerie dans WordPress.

Une autre excellente option est NextGEN Gallery. Nous avons trouvé ce plugin excellent pour les photographes professionnels ou les artistes qui ont besoin de fonctionnalités avancées pour afficher et vendre leur travail professionnellement.

Foire aux questions sur les images pleine taille

Chez WPBeginner, nous recevons fréquemment des questions sur la gestion des images dans WordPress. Voici quelques-unes des plus courantes concernant leur affichage en taille réelle.

L'affichage d'images en taille réelle ralentira-t-il mon site web ?

Oui, les fichiers image volumineux peuvent augmenter le temps de chargement de vos pages, ce qui peut nuire à l'expérience utilisateur et au référencement. C'est pourquoi il est très important d'optimiser vos images pour le web avant de les télécharger, même lorsque vous les affichez en taille réelle.

Quelle est la manière la plus simple d'afficher une seule image en taille réelle ?

La méthode la plus simple consiste à utiliser l'URL directe de l'image d'origine. Lorsque WordPress crée une version redimensionnée, il conserve le fichier d'origine, que vous pouvez ensuite intégrer à l'aide du bloc Image.

Est-il préférable d'utiliser un plugin ou du code pour désactiver le redimensionnement des images ?

Pour la plupart des utilisateurs, en particulier les débutants, l'utilisation d'un plugin comme WPCode est l'option la plus sûre. L'ajout de code directement dans les fichiers de votre thème peut casser votre site s'il n'est pas effectué correctement, tandis qu'un plugin le gère dans un environnement sécurisé.

Puis-je afficher une miniature qui ouvre l'image en taille réelle lorsqu'on clique dessus ?

Absolument. L'utilisation d'un plugin de galerie lightbox comme Envira Gallery est la meilleure façon de procéder. Les visiteurs voient des miniatures plus petites et à chargement rapide et peuvent cliquer pour voir la version haute résolution dans une fenêtre contextuelle.

Bonus : Optimisez vos images pour une meilleure vitesse et un meilleur référencement

L'affichage d'images en taille réelle peut être idéal pour présenter votre travail, mais des graphiques volumineux peuvent ralentir le temps de chargement de votre site web et avoir un impact négatif sur votre référencement.

Pour cette raison, nous vous recommandons vivement d'optimiser vos images pour les performances. Un plugin tel que EWWW Image Optimizer peut vous aider en compressant vos fichiers pour les rendre plus petits et plus rapides à charger.

Nous espérons que cet article vous a aidé à apprendre comment afficher des images en taille réelle dans WordPress. Pour plus de conseils sur la gestion de vos fichiers multimédias et l'amélioration de votre site, vous pouvez consulter nos autres guides :

• Comment optimiser facilement les fichiers image pour le Web sans perdre en qualité
• Guide pour débutants sur le SEO des images – Optimisez les images pour les moteurs de recherche
• Comment charger paresseusement les images dans WordPress
• Façons d'empêcher le vol d'images dans WordPress
• Comment ajouter du texte par-dessus une image dans WordPress
• Excellents plugins WordPress pour la gestion des images (mis à jour)

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.