Quelle taille d'image utiliser sur WordPress (facteurs clés et conseils)

Rencontrez-vous des vitesses de chargement de sites Web lentes ? La faible vitesse du site Web peut résulter de nombreux facteurs, et les grandes tailles d’images en font partie. Si vous avez un site Web avec beaucoup de contenu, la taille de l'image pourrait probablement être l'un des facteurs expliquant la lenteur de votre site. Il est donc important d’optimiser vos images WordPress afin qu’elles n’entravent pas votre site. Ce guide vous donnera un aperçu pour déterminer la meilleure taille d’image pour votre site WordPress. Cela contribuerait à améliorer l’interaction avec les clients et à augmenter la productivité.

Comprendre les tailles d'image dans WordPress

La taille des images dans WordPress est déterminée par les dimensions (en pixels) et la taille du fichier image en kilo-octets (Ko) ou mégaoctets (Mo). Lorsque vous affichez une image sur votre site WordPress, il est important de savoir que la taille de l’image n’est pas seulement une question d’esthétique : elle affecte directement les performances du site, l’expérience utilisateur et l’optimisation des moteurs de recherche (SEO). WordPress aidera à protéger les utilisateurs contre l’utilisation d’images extrêmement volumineuses en créant automatiquement une version mise à l’échelle lors du téléchargement. De plus, chaque image que vous téléchargez aura différentes variations ou tailles qui s'afficheront en fonction de l'endroit où elle est utilisée sur votre site. Plus d’informations à ce sujet ci-dessous.

Fonctionnalité SRCSet

Lorsque vous téléchargez une image sur WordPress, la plateforme crée automatiquement plusieurs tailles de cette image (vignette, moyenne, grande, etc.). L'attribut SRCset permet au navigateur de sélectionner la taille d'image la plus appropriée en fonction de la taille de l'écran de l'appareil et de la densité de pixels.

Par exemple, si votre article de blog contient une image et qu'un utilisateur visite votre site Web à partir d'un ordinateur de bureau doté d'un grand écran, le navigateur peut charger la version grande (par exemple, 1 024 px). En revanche, si l'utilisateur navigue depuis un téléphone mobile, le navigateur choisira une version plus petite (par exemple 300 px), plus rapide à charger.

Voici les tailles par défaut que vous obtiendrez pour chaque image que vous téléchargez dans WordPress :

• Miniature : 150 x 150 pixels
• Moyen : 300 x 300 pixels (peut varier en fonction de vos paramètres)
• Grand : 1 024 x 1 024 pixels (peut varier en fonction de vos paramètres)
• Taille réelle : Dimensions originales

Si vous souhaitez modifier les tailles d'image par défaut, vous pouvez les trouver dans Paramètres → Médias dans le tableau de bord WordPress :

Quelle taille d'image utiliser sur WordPress

Dans la plupart des cas, la taille de votre fichier image ne doit pas dépasser 200 Ko. La plupart des images doivent être plus proches de 50 Ko-100 Ko ou moins. Pour conserver vos fichiers image dans cette plage, vous devrez prendre en compte d'autres facteurs tels que les dimensions.

Voici quelques dimensions d’image recommandées courantes pour WordPress :

• Images des articles de blog : 1 200 x 630 pixels
• Images en vedette (vignettes de publication) : 1 200 x 800 pixels
• Images d'en-tête / Images de héros : 1 600 x 900 pixels ou 1 920 x 1 080 pixels
• Images d'arrière-plan : 1 920 x 1 080 pixels
• Sliders et bannières : 1 200 x 600 pixels ou 1 920 x 800 pixels
• Images du produit (WooCommerce) : 800 x 800 pixels ou 1 000 x 1 000 pixels
• Image du logo : 200 x 100 pixels ou 250 x 100 pixels

Sauf si vous avez une raison spécifique de le faire, vous ne devriez pas télécharger d'images de 5 Mo d'une largeur de 5 000 pixels. WordPress vous aidera en créant des versions plus conviviales pour les sites Web que vous pourrez utiliser. Mais si vous affichez cette taille originale, la vitesse de chargement de vos pages va en souffrir.

Choisir la bonne taille d'image à télécharger dans WordPress est crucial pour optimiser les performances de votre site Web et garantir que les images soient nettes sur tous les appareils. La taille idéale de l'image dépend du contexte dans lequel l'image sera utilisée (par exemple, pour les articles de blog, les miniatures, les curseurs, etc.), ainsi que de la réactivité, de la taille du fichier et des considérations de qualité.

Facteurs clés à prendre en compte pour la taille de l'image WordPress

Lors de la sélection ou de la création d’images pour WordPress, plusieurs facteurs clés doivent être pris en compte pour garantir qu’elles sont optimisées en termes de performances et de conception. Ces facteurs incluent la taille de l’image, le type de fichier, les dimensions, etc. Voici une répartition détaillée :

Dimensions de l'image

Les dimensions des images affectent directement la façon dont les images apparaissent sur différentes parties de votre site Web. L’utilisation d’images trop volumineuses ralentit les temps de chargement, ce qui a un impact négatif sur l’expérience utilisateur et le référencement. Les images trop petites peuvent apparaître pixélisées ou floues, réduisant ainsi la qualité visuelle globale de votre site.

Votre thème WordPress dicte souvent les dimensions idéales de l'image pour différentes sections, telles que les en-têtes, les articles de blog ou les galeries. Consultez la documentation de votre thème pour connaître les dimensions recommandées.

Taille du fichier

Des fichiers plus volumineux entraînent des temps de chargement plus lents, ce qui nuit à la fois à l'expérience utilisateur (en particulier sur les appareils mobiles) et à votre classement dans les moteurs de recherche. Les sites lents entraînent des taux de rebond plus élevés, ce qui signifie que les visiteurs sont plus susceptibles de quitter votre site avant qu'il ne se charge complètement.

Idéalement, gardez la taille des fichiers image en dessous de 500 Ko. Cependant, si l'image est affichée bien en vue, vous pouvez prévoir jusqu'à 1 Mo pour une meilleure qualité. Utilisez des outils de compression d'images pour réduire la taille des fichiers tout en conservant la qualité visuelle. Pour la compression manuelle, des outils comme TinyPNG ou JPEG-Optimizer fonctionnent bien. Après la compression, testez le temps de chargement de votre page à l'aide d'outils tels que Google PageSpeed ​​Insights ou GTmetrix. Si les temps de chargement sont lents, réduisez davantage la taille des images.

Format de fichier

Différents formats de fichiers répondent à des objectifs différents, et choisir le bon peut équilibrer qualité et performances. L’utilisation d’un mauvais format peut entraîner des fichiers inutilement volumineux ou une mauvaise qualité d’image, surtout si la transparence ou les bords nets sont impliqués.

JPEG (JPG) est idéal pour les photographies ou les images comportant de nombreuses couleurs et dégradés. Il prend en charge la compression avec perte, ce qui signifie qu'il réduit la taille du fichier en éliminant certains détails, mais il est idéal pour réduire la taille des fichiers d'images complexes. D’un autre côté, le format PNG est idéal pour les logos, les icônes ou les images transparentes. PNG offre une compression sans perte, préservant la qualité de l’image au détriment de fichiers de plus grande taille.

Rapport hauteur/largeur

Un rapport hauteur/largeur cohérent garantit que vos images s’affichent correctement sur différents appareils et tailles d’écran. L'utilisation de proportions incohérentes peut entraîner des images recadrées, déformées ou mal alignées, affectant la cohérence visuelle de votre site.

Pour les images dans des mises en page fixes (comme des curseurs ou des bannières), suivez toujours le rapport hauteur/largeur recommandé dans la documentation de votre thème ou de votre plugin (par exemple, un rapport 16:9 pour les bannières). Pour les galeries ou les grilles, choisissez un seul rapport hauteur/largeur (par exemple, 4:3 ou 1:1 pour les vignettes carrées) et recadrez toutes les images selon ce rapport pour plus d'uniformité. Si vous utilisez des paramètres d'image réactifs, testez votre site sur différents appareils et tailles d'écran pour vous assurer que les proportions fonctionnent correctement dans différentes fenêtres.

Meilleures pratiques pour les tailles d'image WordPress

La vitesse du site Web est cruciale pour l’expérience utilisateur et le référencement, et les images surdimensionnées peuvent ralentir considérablement votre site WordPress. L'optimisation de la taille de vos images est importante pour maintenir des temps de chargement rapides sans sacrifier la qualité. Voici un guide rapide pour réduire efficacement la taille des images et améliorer les performances de votre site.

Redimensionner les images aux dimensions appropriées

Téléchargez des images dont les dimensions correspondent aux besoins d'affichage de votre site. Évitez de télécharger des images volumineuses automatiquement redimensionnées par WordPress, car cela consomme du stockage et de la bande passante. Avant de télécharger des images, déterminez les dimensions maximales dont vous avez besoin en fonction de la disposition de votre thème. Par exemple, si votre zone de contenu a une largeur de 800 px, les images plus larges ne s'afficheront pas correctement et ralentiront votre page.

Redimensionner les images sur WordPress

Si vous avez déjà téléchargé une image surdimensionnée, vous pouvez la redimensionner directement dans WordPress. Accédez à Média > Bibliothèque sur votre tableau de bord WordPress.

Cliquez sur une image existante ou téléchargez un nouveau fichier image. Dans notre cas, nous avons choisi de télécharger un nouveau fichier image.

Après avoir cliqué sur l'image ajoutée, tous ses détails s'afficheront. Cliquez sur « Modifier plus de détails » dans le coin inférieur droit pour accéder aux paramètres ajoutés.

Dans les détails de l'image, cliquez sur le bouton Modifier l'image.

Sous Mettre à l'échelle l'image, entrez les nouvelles dimensions (largeur ou hauteur) et WordPress redimensionnera l'image proportionnellement. Cliquez sur Échelle pour appliquer les modifications.

REMARQUE : Vous ne pouvez pas redimensionner vos images à une taille supérieure à la version originale. WordPress vous le fera savoir si vous le faites.

Utiliser les outils de compression d'images

Comme indiqué précédemment, la compression de vos images permet de réduire la taille de leur fichier. Divers outils de compression d'images, notamment des logiciels d'édition comme Adobe Photoshop ou Microsoft Photos, sont disponibles.

Alternativement, vous pouvez utiliser des outils en ligne tels que TinyPNG pour y parvenir.

Cet outil préfère la compression avec perte pour minimiser la taille de vos fichiers WEBP, JPEG et PNG. Téléchargez simplement vos images et TinyPNG gérera la compression pour vous.

Alternativement, vous pouvez utiliser un plugin d'optimisation d'image robuste comme Imagify. Ajoutez un nouveau plugin depuis la section « Plugins » de votre tableau de bord WordPress avant de l'installer et de l'activer.

Après avoir installé et activé Imagify sur votre site WordPress, accédez à Paramètres > Imagify pour configurer vos préférences de compression :

Une fois que vous êtes défini, cliquez sur Enregistrer les modifications. Imagify compressera alors automatiquement toutes les images que vous téléchargez sur votre site.

Modifier la limite maximale de téléchargement

WordPress définit une taille maximale de téléchargement de fichiers, qui peut différer en fonction des limites imposées par votre fournisseur d'hébergement. Accédez à Médias > Ajouter un nouveau dans votre tableau de bord WordPress pour déterminer votre limite actuelle de téléchargement de fichiers. La restriction de taille de téléchargement sera affichée sur cette page.

En règle générale, il n'est pas nécessaire d'ajuster cette limite, sauf si vous envisagez de télécharger des fichiers plus volumineux. Cependant, réduire la taille limite des fichiers peut être utile, surtout si vous gérez un blog multi-auteurs, pour empêcher d'autres personnes de télécharger des images inutilement volumineuses. Vous pouvez contacter votre hébergeur pour modifier la taille maximale de téléchargement ou mettre à jour la limite en éditant le fichier php.ini.

Utiliser le chargement paresseux

Le chargement différé est une technique d'amélioration des performances qui retarde le chargement des images sur une page Web jusqu'à ce qu'elles soient réellement nécessaires. Au lieu de forcer le chargement de toutes les images immédiatement lors de l'accès à une page, le chargement paresseux ne charge les images que lorsque l'utilisateur les fait défiler vers le bas et qu'elles apparaissent. Cela réduit le temps de chargement initial de la page, économise de la bande passante et améliore l'expérience utilisateur.

La plupart des thèmes et plugins WordPress offrent aujourd’hui une prise en charge intégrée du chargement différé. WordPress lui-même inclut même le chargement paresseux natif à partir de la version 5.5. De plus, divers plugins comme WP Rocket, Lazy Load de WP Rocket et a3 Lazy Load offrent un contrôle et une personnalisation plus avancés du processus de chargement paresseux, ce qui le rend facile à mettre en œuvre sur n'importe quel site WordPress sans grande expertise technique.

Toutes ces pratiques sont fondamentales pour maintenir des tailles d’images professionnelles sur WordPress. Cependant, Divi, notre prolifique thème et constructeur WordPress, les élève encore davantage grâce à ses attributs réactifs.

Comment créer des tailles d’image parfaites avec Divi

Si vous souhaitez plus de contrôle sur la conception de votre image et les options de dimensionnement, vous pouvez utiliser un générateur de pages comme Divi. Divi est équipé de fonctionnalités réactives avancées. Cet outil intègre plusieurs fonctionnalités à votre site WordPress, dont le redimensionnement d'images. Ici, nous verrons comment Divi peut améliorer les dimensions de vos images tout en conservant leur qualité.

1. Téléchargez et installez Divi

Divi peut être acheté via Elegant Themes, offrant deux options de tarification : une licence annuelle pour 89 $ ou une licence à vie pour 249 $ . Après l'achat, vous pouvez facilement télécharger et installer le thème sur votre site WordPress en suivant ces étapes :

1. Dans votre tableau de bord WordPress, accédez à Apparence > Thèmes .
2. Cliquez sur Ajouter un nouveau, puis sélectionnez Télécharger le thème.
3. Choisissez le fichier Divi .zip téléchargé et cliquez sur Installer maintenant.
4. Une fois l'installation terminée, cliquez sur « Activer » pour faire de Divi votre thème actif.

Pour un guide détaillé, regardez la vidéo ci-dessous.

Après avoir terminé la configuration, vous pouvez commencer à créer votre site. Pour vous familiariser au préalable avec la démarche, jetez un œil à notre tutoriel sur l’utilisation du Divi Builder.

Commencez avec Divi

2. Créez votre site Web, ouvrez Divi Builder et sélectionnez votre image

Après avoir installé le Thème Divi sur WordPress, vous pouvez créer rapidement votre site internet. Divi vous offre plusieurs options pour créer votre site Web. Vous pouvez créer votre site Web à partir de zéro, profiter de nos mises en page prédéfinies ou utiliser Divi AI pour créer votre site Web.

De plus, vous pouvez utiliser Divi Quick Sites pour créer un site Web professionnel en une ou deux minutes.

Après avoir créé votre site Web et ajouté vos images respectives, vous pouvez accéder au Divi Builder et configurer les tailles de vos images WordPress. Tout d’abord, accédez à votre site Web Divi établi et cliquez sur « Activer Visual Builder ».

Cliquez sur n'importe quelle image ajoutée à des fins de redimensionnement. Ouvrez le module image Divi en cliquant sur l’icône de roue.

3. Redimensionnez vos images ajoutées sur WordPress avec les paramètres réactifs de Divi

Les paramètres réactifs de Divi facilitent le redimensionnement des images sur WordPress pour différents appareils (ordinateur de bureau, tablette et mobile). Dans les paramètres du module image, accédez à l'onglet « Conception ». C’est là que se produit l’essentiel de la personnalisation, y compris les paramètres réactifs. Dans l’onglet Conception, faites défiler vers le bas pour trouver la section « Dimensionnement ».

Ici, vous pouvez ajuster plusieurs dimensions de votre image sélectionnée, telles que :

1. Largeur
2. Largeur maximale
3. Alignement des modules
4. Hauteur minimale
5. Hauteur
6. Hauteur maximale

REMARQUE : Vous pouvez également forcer la pleine largeur en activant l'option fournie. Cependant, cela rendra la largeur et la largeur maximale inchangées.

À côté de chaque attribut, vous verrez une petite icône ressemblant à un smartphone ou une tablette (l'icône des paramètres réactifs). Cliquez sur cette icône pour activer différents paramètres d'affichage sur ordinateur, tablette et mobile.

Dans ce cas, nous fixerons la largeur maximale de la version tablette à 85 %. La largeur réduite et le positionnement centré permettront d'économiser de l'espace sur la page d'accueil, rendant l'image plus attrayante visuellement sur les appareils plus petits. Cliquez sur le bouton de coche verte pour appliquer les modifications enregistrées.

Fonctionnalité SRCSet

Divi apporte la prise en charge native de SRCSET pour toutes les images, permettant au thème de rendre vos images réactives automatiquement. Il garantit que l'image de taille appropriée est transmise à chaque appareil, améliorant ainsi les vitesses de chargement en diffusant des images plus petites sur des appareils plus petits. Mieux encore, cela se fait automatiquement, sans aucun effort supplémentaire de votre part.

Obtenez Divi

Autres outils d'optimisation d'image

Bien que les paramètres réactifs de Divi offrent une excellente solution pour redimensionner les images dans WordPress, vous pourriez avoir besoin d'outils d'optimisation supplémentaires qui manquent actuellement à Divi. Voici quelques outils externes d’optimisation d’images que vous pouvez utiliser :

1. EWWW Image Optimizer : un puissant plugin WordPress qui compresse automatiquement les nouvelles images lors du téléchargement et propose un Bulk Optimizer pour les médias existants. Il permet le redimensionnement des images et la suppression des métadonnées et prend en charge le chargement paresseux et la conversion au format WebP pour une meilleure compression. La version gratuite fonctionne directement sur votre serveur sans limite de taille de fichier, tandis que la version premium exploite les services cloud pour une optimisation améliorée et des taux de compression plus élevés.
2. ShortPixel Image Optimizer : Ce plugin optimise les images et les fichiers PDF tout en redimensionnant automatiquement les images. Il offre des options de compression flexibles (avec, sans perte et brillant), offrant un choix équilibré aux utilisateurs. Le plugin sauvegarde les images originales, supprime les métadonnées et convertit les fichiers PNG en JPEG, optimisant ainsi les images et les vignettes Retina. Cependant, vous devez partager votre email pour une clé API.
3. Optimole : un plugin d'optimisation d'image tout-en-un gratuit qui traite les images en temps réel via un serveur basé sur le cloud. Il se distingue en sélectionnant la taille d'image optimale en fonction de la fenêtre d'affichage du visiteur et en mettant en œuvre un chargement paresseux pour un affichage efficace. La mise à niveau vers un forfait premium offre des conversions d'images illimitées et des fonctionnalités avancées, notamment une compression de haute qualité qui conserve la clarté d'origine tout en réduisant la taille du fichier et la création automatique de versions Retina et WebP.
4. WP Smush : Ce plugin fait partie de la suite de plugins WPMU DEV. Il optimise automatiquement les images après leur téléchargement sur votre site WordPress. WP Smush propose une option d'optimisation groupée qui vous permet de compresser jusqu'à 50 images à la fois, ce qui facilite l'amélioration de vos médias existants. Le plugin comprend également des options de redimensionnement des images et de chargement paresseux, et vous pouvez le configurer pour supprimer les métadonnées des images lors du téléchargement. Il prend en charge les images jusqu'à 5 Mo, mais vous devrez passer à la version premium pour optimiser les fichiers plus volumineux.

Quelle que soit votre approche, vous pouvez améliorer les performances de votre site Web. L'optimisation des images contribue à améliorer les temps de chargement et à une meilleure expérience utilisateur.

Conclusion

En 2024, créer un site réussi sur WordPress va au-delà des fonctionnalités de base ; offrir une expérience fluide et engageante à vos clients est essentiel. L'optimisation de la taille des images est cruciale pour y parvenir, car elle permet de garantir des temps de chargement rapides et une mise en page visuellement attrayante qui reflète l'identité de votre marque. En utilisant des plugins intelligents et des options de personnalisation, vous pouvez améliorer les performances de votre site et le transformer en une vitrine invitante qui captive les visiteurs.

Si vous recherchez plus d'options de personnalisation pour dimensionner vos images à l'aide d'un générateur visuel, Divi facilite la réalisation de ces ajustements à la volée pour garantir que vos images soient parfaites sur tous les appareils.

Obtenez Divi

Vous cherchez à booster votre site WordPress ? Découvrez les tailles d'image idéales pour améliorer les performances et l'attrait visuel de votre site Web. Explorez notre liste d'outils et de conseils qui peuvent vous aider à gérer efficacement la taille des images pour une meilleure expérience utilisateur.