Vous cherchez à télécharger des images sur votre site WordPress, mais vous n'êtes pas sûr de la taille ou du type de fichier des images ? Vous n'êtes pas familier avec le processus de redimensionnement et de compression d'images pour le Web ? Dans cet article, j'expliquerai pourquoi l'utilisation d'un dimensionnement d'image approprié est importante pour votre site Web, et vous montrerai comment redimensionner et compresser vos images à l'aide de l'éditeur de photos gratuit GIMP.
Pourquoi le redimensionnement des images de votre site Web est important
Commençons par expliquer pourquoi le redimensionnement des images de votre site Web est si important.
Selon WordPress.org, la "taille physique" globale d'une image joue un rôle énorme dans les performances d'une page de site Web. "La taille du fichier [d'une image] dicte le temps qu'il faut pour charger votre page ; plus la taille du fichier est grande… plus [une page] prendra de temps à se charger. En d'autres termes, le téléchargement d'un fichier de grande taille sur votre site Web ralentira les performances de la page à laquelle vous ajoutez le contenu, ce qui se traduit généralement par des vitesses de chargement de page plus lentes dans les données d'analyse de votre site.
"La taille du fichier [d'une image] dicte le temps qu'il faut pour charger votre page ; plus la taille du fichier est grande… plus [une page] prendra de temps à se charger.
-WordPress.org
Vitesse de chargement de la page, également appelée simplement "vitesse de la page, "est" la vitesse à laquelle le contenu de votre page se charge ", selon le Site de référencement Moz. Avoir des pages plus lentes peut entraîner des "taux de rebond», qui est une métrique fantaisiste représentant les sessions où un visiteur du site quitte votre site après avoir consulté une seule page. Des pages plus lentes peuvent également réduire le temps que les visiteurs passent sur les pages de votre site, car les gens peuvent s'impatienter en attendant que le contenu d'une page se charge et quitte votre site plus rapidement.
Ces statistiques sont importantes car vous souhaitez généralement que les utilisateurs passent plus de temps sur votre site et consultent davantage de pages sur votre site.
Ils sont également importants car ils jouent un rôle dans le classement de votre site sur les pages de résultats des moteurs de recherche, ou "SERP". SERPs sont simplement les pages de résultats qui s'affichent lorsque vous tapez un mot ou une phrase dans Google et que vous appuyez sur la touche Entrée. Étant donné que les images plus grandes indiquent de mauvaises pratiques de conception Web et affectent négativement l'expérience de l'utilisateur sur votre site, les moteurs de recherche tels que Google peuvent pénaliser votre site pour avoir ces images plus grandes et classez votre site Web au-dessous d'autres sites Web plus performants.
Plus votre site Web se classe bas sur Google, par exemple, moins votre site reçoit de trafic et plus le trafic ira à vos concurrents qui se classent au-dessus de vous dans les résultats de recherche.
En réduisant la taille des fichiers de vos images sur votre site Web, vous pouvez améliorer votre vitesse de la page et ainsi améliorer d'autres métriques comme taux de rebond et temps sur page pour finalement améliorer votre classement sur les moteurs de recherche.
Notez qu'il existe de nombreuses autres variables importantes qui entrent dans les classements de recherche, donc la correction de vos images n'est qu'une partie d'un solide SEO (Référencement) (Optimisation des moteurs de recherche) stratégie. Cependant, il est certainement très important d'aider votre site à se classer plus haut sur des sites comme Google pour aider à augmenter le trafic de votre site.
Comment redimensionner des images pour WordPress dans GIMP
Alors, comment redimensionner correctement les images pour WordPress ?
Vous pouvez réduire la taille du fichier d'une image simplement en diminuant la taille globale de l'image à l'aide de mise à l'échelle et culture avant de le télécharger sur votre site Web. De plus, vous pouvez appliquer ce qu'on appelle "compression” à votre image pour réduire encore sa taille.
GIMP, l'éditeur de photos gratuit et open source, peut accomplir toutes ces tâches tout en exportant vers les formats de fichiers "nouvelle génération" recommandés pour réduire davantage la taille du fichier de vos images et améliorer les performances de votre site.
Mettez votre image à l'échelle
Pour commencer ce processus, ouvrez l'image que vous souhaitez télécharger sur votre site dans GIMP. Vous pouvez le faire en faisant glisser et en déposant votre image de votre ordinateur dans la fenêtre d'image de GIMP, ou vous pouvez simplement aller dans Fichier> Ouvrir dans GIMP.
Si vous utilisez la méthode Fichier>Ouvrir, accédez à l'emplacement de l'image sur votre ordinateur à partir de la boîte de dialogue "Ouvrir l'image" qui apparaît, et double-cliquez sur le fichier image une fois que vous l'avez localisé pour l'ouvrir dans GIMP (ou cliquez sur le bouton bouton « Ouvrir » dans le coin inférieur droit de la fenêtre de dialogue).
Tout en haut de la fenêtre GIMP se trouve une fonctionnalité appelée "Barre de titre" (flèche rouge dans l'image ci-dessus). Ici, vous verrez les dimensions actuelles de votre image (boîte verte agrandie sur la photo). Mon image est de 1920×1280 – avec le premier chiffre, 1920, représentant la largeur de mon image (en pixels), et le second chiffre, 1280, représentant la hauteur de mon image. Les dimensions finales de l'image que vous voudrez utiliser pour votre image dépendront de l'endroit où vous avez l'intention d'utiliser l'image dans WordPress, ainsi que du thème que vous utilisez.
Pour ce didacticiel, je vais redimensionner mon image à la taille standard de 1200 × 630 pixels recommandée pour les images de publication de blog.
Dans cet esprit, la première chose que je souhaiterai faire est de recadrer mon image afin que le rapport d'aspect de mon image d'origine corresponde au rapport d'aspect de la taille recommandée. Pour ce faire, je vais saisir mon outil de recadrage en appuyant sur Maj + C sur mon clavier ou en cliquant sur l'icône de l'outil de recadrage dans la boîte à outils GIMP (flèche rouge dans l'image ci-dessus).
Ensuite, dans les options d'outils de cet outil, je coche la case à côté de "Fixe" (flèche verte) et clique sur le menu déroulant pour sélectionner "Rapport d'aspect" (flèche bleue).
Je vais taper "1200:630" pour définir mon format d'image dans le champ de texte sous la liste déroulante (flèche jaune). Cela correspond au rapport d'aspect de la taille d'image recommandée que je veux que mon image finale soit.
À l'aide de l'outil de recadrage, je vais maintenant cliquer et faire glisser ma souris sur l'image pour dessiner la zone de recadrage. Lorsque je relâche ma souris, tout ce qui se trouve en dehors de la zone de recadrage sera estompé (flèche rouge dans l'image ci-dessus - en supposant que "Highlight" est coché dans les options de l'outil, ce qui est généralement le cas par défaut).
Par défaut, ma zone de recadrage a les guides définis comme "Lignes centrales" (flèche jaune dans l'image ci-dessus). Je peux modifier ce paramètre à l'aide de la liste déroulante des guides vers le bas des options d'outils. Par exemple, je vais changer mes guides en "Règle des tiers" (flèche verte). Les différentes options de guide ici sont basées sur les principes de la photographie, ce qui facilite le cadrage de votre composition en utilisant ces principes.
Vous pouvez passer votre souris sur l'un des côtés ou des coins de la zone de recadrage (c'est-à-dire la zone en surbrillance indiquée par la flèche rouge dans l'image ci-dessus), puis cliquer et faire glisser pour redimensionner la limite de la zone de recadrage. Notez que vous pouvez toujours voir la taille de votre zone de recadrage dans les champs "Taille" situés dans les Options de l'outil (encadrés en vert dans l'image ci-dessus). Vous voudrez garder la taille globale de la zone de recadrage supérieure à la taille finale de 1200 × 630 de l'image.
Vous pouvez également cliquer et faire glisser votre souris au milieu de la zone de recadrage (flèche rouge) pour repositionner le recadrage sur l'image.
Une fois que vous êtes prêt à recadrer l'image, cliquez une fois dans la zone de recadrage et votre image sera recadrée.
Notez que si l'option "Supprimer les pixels recadrés" dans les options de l'outil n'est pas cochée (flèche verte dans l'image ci-dessus), votre limite d'image d'origine s'affichera toujours autour de votre image via une ligne pointillée jaune (flèche rouge). Vous pouvez restaurer l'image d'origine, annulant ainsi le recadrage, en allant dans Image> Ajuster le canevas aux calques. Seule la zone de votre image à l'intérieur des limites du canevas sera exportée.
Notre image est maintenant recadrée au rapport d'aspect que nous voulons, mais si vous regardez à nouveau les dimensions de notre image dans la "barre de titre", vous verrez que l'image est de 1532 × 804 (encadrée en vert et agrandie sur la photo ci-dessus - vos dimensions seront probablement légèrement différentes en fonction de la taille de votre zone de recadrage sur votre image). Nous devrons maintenant mettre à l'échelle notre image pour qu'elle corresponde aux dimensions souhaitées.
Pour cela, allez dans Image>Scale Image (flèche rouge).
Dans la boîte "Scale Image" qui apparaît, sous "Image Size", assurez-vous que l'icône de maillon de chaîne à côté des cases "largeur" et "hauteur" est liée (flèche rouge sur la photo ci-dessus). Ensuite, changez la "Largeur" de votre image à 1200 (flèche verte). Appuyez sur la touche de tabulation. La hauteur de l'image sera automatiquement mise à jour sur "630". Sous "Qualité", assurez-vous que le menu déroulant "Interpolation" (flèche bleue) est défini sur "NoHalo" ou "LoHalo" pour une meilleure qualité d'image après la mise à l'échelle. (Pour plus d'informations sur l'interpolation, regarde mon tuto sur le sujet).
Appuyez sur le bouton "Scale" pour redimensionner votre image (flèche jaune).
Une fois la mise à l'échelle terminée, vérifiez les dimensions de l'image dans la barre de titre. Vous devriez maintenant voir une taille d'image de 1200×630 – la taille exacte que nous voulons ! Donc que faisons-nous maintenant?
Compressez votre image en exportant vers WebP
Le recadrage et la mise à l'échelle de l'image ont réduit la taille du fichier en réduisant la hauteur de l'image de 1920 à 1200 pixels et la largeur de 1280 à 630 pixels, mais nous pouvons réduire encore plus la taille de l'image en appliquant une compression lorsque nous exportons l'image.
Nous devons donc maintenant exporter l'image dans un format de fichier qui appliquera une compression à l'image sans réduire sensiblement la qualité de l'image. Bien que les JPEG soient toujours une bonne option, une option encore meilleure est désormais disponible : WebP.
Le format WebP applique plus de compression que JPEG tout en affectant moins la qualité de l'image qu'un JPEG. En d'autres termes, vous obtiendrez une image plus belle avec une taille de fichier plus petite. De plus, les formats WebP sont pris en charge par les 5 principaux navigateurs Web.
Pour exporter vers WebP, allez dans Fichier> Exporter sous (flèche rouge).
Cliquez sur l'un des dossiers de la section "Lieux" (encadrés en vert) pour choisir l'image sur votre ordinateur où vous souhaitez enregistrer votre image. Vous pouvez simplement double-cliquer sur un dossier pour y accéder et voir dans quel dossier vous vous trouvez à côté du titre "Enregistrer dans le dossier" (flèche rouge). Ensuite, renommez votre image comme vous le souhaitez - assurez-vous simplement de terminer le nom de votre image par l'extension ".webp" (flèche bleue) pour exporter l'image au format WebP. Lorsque vous êtes prêt, cliquez sur "Exporter" dans le coin inférieur droit de la fenêtre (flèche jaune).
Ensuite, la boîte de dialogue "Exporter l'image en tant que WebP" apparaîtra. Assurez-vous que "Lossless" n'est pas coché (flèche rouge). Je règle généralement la "Qualité de l'image" sur 80 (flèche bleue - il s'agit d'un pourcentage, donc plus le pourcentage est bas, plus la qualité de l'image sera faible, mais plus la taille du fichier image sera petite). Si votre image ne contient pas de transparence (c'est-à-dire un logo sans arrière-plan), vous n'avez pas à vous soucier du curseur "Qualité alpha" (en fait, dans une expérience que j'ai réalisée, abaissant légèrement la qualité alpha de 100 à 90 augmenté la taille de fichier d'une image avec un fond transparent de 8.50 ko à 8.52 ko). La liste déroulante "Type de source" que vous pouvez conserver sur "Par défaut".
Que vous souhaitiez ou non cocher ou décocher l'une des options de métadonnées, y compris les données Exif, les données ITPC et les données XMP, c'est à vous de décider. Les données Exif et XMP sont des métadonnées généralement attribuées par votre appareil photo qui décrivent des informations sur votre photo, telles que le modèle d'appareil photo utilisé ou le type d'objectif utilisé. ITPC, d'autre part, est utilisé par les membres de la presse et attribue des informations à votre image telles que la propriété, les droits et les licences. Si vous ne savez pas quoi faire, laissez simplement ces options cochées.
De même, vous pouvez laisser l'option "Enregistrer le profil de couleur" décochée car la plupart des navigateurs utiliseront automatiquement l'espace colorimétrique sRGB pour afficher votre image, ce que GIMP utilise. Si vous utilisez un profil de couleur différent, vous voudrez laisser cette case cochée. De plus, si vous craignez que l'image ne s'affiche pas correctement pour certains navigateurs, la laisser cochée n'ajoute que quelques Ko à la taille globale de l'image.
Enfin, l'option "Enregistrer la vignette" peut rester décochée, ce qui nous fera encore économiser quelques kilo-octets.
Cliquez sur "Exporter" (flèche jaune dans l'image ci-dessus) pour exporter l'image au format WebP. Lorsque vous comparez le fichier WebP exporté à un fichier JPEG de même taille et dont la qualité est également définie sur "80", l'image WebP est d'environ 30 ko, soit environ 25 %, plus petite que le JPEG.
Vous pouvez maintenant vous connecter à votre site WordPress et accéder à la page ou à la publication où vous souhaitez télécharger votre image, ou simplement accéder à la section « Média » en utilisant la navigation principale et faire glisser et déposer votre image dans la médiathèque. Dans mon cas, je vais naviguer vers "Publier" en utilisant la navigation principale (flèche rouge dans l'image ci-dessus) et cliquer sur "Blog Post 1" (flèche bleue) pour modifier ce blog.
Je vais ensuite ouvrir la barre latérale des paramètres de publication (flèche rouge) et faire défiler jusqu'à la section "Image en vedette" et développer cette section (flèche bleue). Ensuite, je clique sur l'image pour la remplacer par ma nouvelle image.
Je vais accéder à l'onglet "Télécharger des fichiers" (flèche rouge) et je peux faire glisser et déposer mon image de mon ordinateur vers WordPress (flèches bleues).
Enfin, je clique sur "Définir l'image sélectionnée" pour appliquer ce changement (flèche rouge).
Cliquez sur "Mettre à jour" (flèche rouge) pour mettre à jour votre page avec la nouvelle image en vedette.
Si je clique sur "Afficher le message" (flèche bleue)…
… vous verrez maintenant la nouvelle image sélectionnée affichée en haut de mon blog.
C'est tout pour ce tutoriel ! Si vous voulez en savoir plus sur la conception d'un site Web WordPress, je vous recommande de consulter mon Cours WordPress 6.0 pour les non-codeurs! Ou, si vous voulez en savoir plus sur GIMP, consultez mon Classe de maître GIMP 2.10 sur Udemy!
