Comment afficher des images en taille réelle dans WordPress

25 février 2021

Vous aimeriez apprendre à afficher des images en taille réelle dans WordPress ? Les dernières versions de WordPress ont tendance à redimensionner automatiquement les grandes images afin d'améliorer les performances, de chargement notamment. Pour autant, vous aimeriez, pourquoi pas, afficher des images de plus grandes dimensions. Dans ce didacticiel, nous vous partageons quatre façons différentes d'afficher des images en taille réelle sur votre site WordPress.

Pourquoi WordPress modifie-t-il la taille de mes images ?

Les vieilles versions de WordPress permettaient aux utilisateurs de télécharger des images de très grandes dimensions. Mais les débutants en WordPress ont eu tendance à télécharger des images trop volumineuses pour le Web moderne. Les grandes images sont plus lentes à se charger. Cela impact la vitesse d'un site et donc, son SEO.

Pour résoudre ce problème, la mise à jour de WordPress 5.3 a changé la façon dont WordPress gère les très grandes images. Par exemple, si vous téléchargez une image aux dimensions de 5000 px par 7000 px, WordPress redimensionnera l'image à 2560 px et redimensionnera la largeur pour correspondre aux dimensions d'origine.

Désormais, lorsqu'un utilisateur visite une page avec une image précédemment grande, il voit la version réduite de cette image. Cela conduit à une amélioration des performances du site Web et à des utilisateurs plus heureux dans l'ensemble.

Pourquoi empêcher WordPress de redimensionner les images ?

Cette nouvelle fonctionnalité est utile pour la plupart des propriétaires de sites Web WordPress. Or certains utilisateurs peuvent avoir besoin d'afficher des images en taille réelle.

Si vous êtes un photographe ou un artiste qui vend votre travail, vous souhaiterez peut-être afficher des images plus grandes sur votre site Web, afin que les visiteurs puissent les acheter ou les télécharger.

Ou, vous pouvez exécuter un site Web où des images plus grandes sont une exigence, comme un site Web de photos ou un site Web qui vend des impressions et des images personnalisées.

Peut-être avez-vous besoin d'une grande image pour l'image d'arrière-plan de votre page d'accueil qui dépasse les limites de 2560 pixels? Quelle que soit la raison pour laquelle vous souhaitez une image en taille réelle, nous vous montrerons comment le faire, étape par étape.

Comment afficher des images en taille réelle dans WordPress ?

Il existe 4 façons différentes d'afficher des images en taille réelle dans WordPress. Certaines méthodes fonctionnent mieux pour des images uniques, tandis que d'autres conviennent mieux à une bibliothèque d'images entière.

Méthode 1. Obtenez l'URL de l'image en taille réelle dans WordPress

Si vous ne souhaitez utiliser qu'une ou deux grandes images sur votre site Web, cette solution est probablement la meilleure.

Lorsque vous téléchargez une image sur WordPress qui dépasse les dimensions, WordPress met votre image à l'échelle et en crée une nouvelle. Mais, l'image d'origine est toujours intacte.

Pour afficher les dimensions de l'image d'origine, vous devrez supprimer `` -scaled '' à la fin de l'URL de l'image WordPress et insérer l'image dans votre site avec le lien modifié.

Rendez-vous simplement dans votre médiathèque en allant sur Médiathèque et sélectionnez votre grande image.

Maintenant, localisez votre 'URL de fichier' dans la zone d'image.

Ensuite, vous voudrez supprimer "-scaled" de la fin de l'URL de votre image.

Après cela, vous pouvez copier l'URL de l'image et insérer l'image dans votre site Web.

Notez que vous devrez intégrer l'image dans votre site à l'aide du lien, moins la partie mise à l'échelle.

Pour ce faire, accédez à un article ou à une page à laquelle vous souhaitez ajouter l'image et cliquez sur l'icône «+» pour ajouter un nouveau bloc.

Cliquez ensuite sur l'icône "Image" pour ajouter un bloc d'image dans lequel vous pouvez coller votre URL.

Cliquez sur "Insérer à partir de l'URL", puis collez l'URL de votre image en taille réelle dans la zone et appuyez sur "Entrée".

Après cela, vous devrez cliquer sur «Publier» ou «Mettre à jour», si la publication est déjà en ligne, et votre image en taille réelle sera désormais visible sur votre site.

Vous pouvez suivre ce même processus pour chaque image pleine taille que vous souhaitez ajouter à votre site. Mais, tant que vous utilisez l'URL du fichier moins `` mise à l'échelle '', vos images WordPress s'afficheront en taille réelle.

Méthode 2. Désactiver automatiquement la mise à l'échelle de l'image dans WordPress (avec un plug-in)

La deuxième méthode consiste à utiliser un plugin WordPress pour désactiver la mise à l'échelle de l'image sur votre site.

Le plugin que nous recommandons s'appelle Disable «BIG Image» Threshold. Il offre l'une des solutions de contournement les plus simples pour afficher de grandes images sur votre site, et son utilisation est entièrement gratuite.

Une fois que vous avez installé et activé le plugin sur votre site, il supprimera automatiquement le seuil de grande image ajouté par WordPress. Vous êtes libre d'ajouter de nouvelles images comme vous l'étiez avant la mise à jour de l'image WordPress.

Lorsque ce plugin est actif, WordPress n'ajoutera l'attribut '-scaled' à aucune image.

Méthode 3. Désactiver automatiquement la mise à l'échelle de grandes images dans WordPress (avec un extrait de code)

Une autre option consiste à ajouter un extrait de code à WordPress qui atteint le même objectif que le plugin ci-dessus.

Si le plugin ne fonctionne pas pour une raison quelconque, ou si vous ne voulez pas installer trop de plugins, vous pouvez utiliser cette méthode.

La nouvelle fonctionnalité de mise à l'échelle de l'image WordPress utilise un filtre appelé big_image_size_threshold.

Vous voudrez utiliser le code suivant pour désactiver cette fonction:

add_filter( 'big_image_size_threshold', '__return_false' );

Vous devez ajouter ce code dans le fichier functions.php de votre thème, dans un plugin spécifique au site ou en utilisant le plugin d'extraits de code.

Méthode 4: ouvrir des images WordPress en taille réelle dans une lightbox

La dernière option consiste à ajouter une lightbox d'image pleine taille à votre site. Avec cette solution, vous obtenez le meilleur des deux mondes.

Vous pouvez charger des miniatures d'image plus petites dans le contenu de votre blog, votre galerie ou votre carrousel, et lorsque vous cliquez dessus, il apparaîtra avec votre image en taille réelle.

Pour ce faire, nous vous recommandons d'utiliser le plugin Envira Gallery. C'est le meilleur plugin de galerie d'images WordPress du marché et vous permet d'ajouter facilement l'effet d'image contextuelle lightbox.

Gardez à l'esprit qu'avant de télécharger des images en taille réelle pour votre galerie, vous devrez désactiver la mise à l'échelle de l'image via le plugin ou les méthodes de thème enfant ci-dessus. Sinon, vos images Lightbox utiliseront la version réduite de l'image.

Enfin, il est important de noter que si vous ajoutez des images de grandes dimensions, il est essentiel de les optimiser pour le Web, afin de ne pas ralentir votre site Web.

Afficher des images en taille réelle dans WordPress : notre conclusion

Nous espérons que cet article vous a aidé à afficher des images en taille réelle dans WordPress. Il existe plusieurs méthodes, certaines étant plus compliquées que d'autres. Pour autant, vous aurez tout le loisir de vous y intéresser et de sélectionner celle qui vous intéresse le plus.

Vous souhaitez en découvrir davantage sur WordPress ? On évoque la question des plugins pour devis dans un article dédié. Enfin, on parle également de sujet WP-Cron et Cron ! Bref, de la littérature indispensable pour optimiser les performances de son entreprise.

Crédits