Comment optimiser les images sur le site WordPress: un guide étape par étape

Vous pouvez utiliser un plug – in qui optimisera toutes vos images via le pilote automatique. Pourquoi l’optimisation de l’image est – elle nécessaire? Mais parlons maintenant de pourquoi l’optimisation d’image est importante pour votre site et pourquoi vous ne devriez pas y réfléchir deux fois avant de le mettre en œuvre.
La principale raison pour laquelle vous devriez utiliser l’optimisation d’image sur les sites WordPress est qu’elle aide à réduire le temps de chargement des pages sur chaque page. Les images sont lourdes, surtout si vous les chargez en pleine taille. Vous ne remarquerez peut – être pas les conséquences du téléchargement de chaque image, mais avec le temps, chaque petite donnée ajoutée au site peut surcharger la page. Selon Unbound, le taux de rebond moyen pour les pages chargées plus de 2 secondes est de 9%, tandis que le taux de rebond pour les pages chargées 5 secondes est de 38%. Cela réduit l’engagement des utilisateurs et le taux de conversion.
L’optimisation d’image peut également améliorer votre positionnement de référencement. Pourquoi? C’est juste Google. À partir de 2010, Google a officiellement annoncé que la vitesse de la page jouera un rôle important dans l’algorithme de classement. Par conséquent, si votre site Web est lent, vos chances de voir votre site Web en haut du serp seront réduites. Cela nous a fait perdre notre taux de conversion. Plus votre classement Google est bas, plus votre taux de conversion est faible. Si le classement de votre site Web en matière de référencement s’améliore, un plus grand nombre de visiteurs ou d’acheteurs viendront sur votre page et pourront cliquer sur l’invitation à l’action. Ou au moins passer plus de temps sur votre site et interagir avec votre contenu.
Ainsi, comme vous pouvez le voir, l’optimisation d’image est directement liée à la vitesse du site, le référencement et le taux de conversion. Elle joue un rôle mineur mais essentiel dans cette chaîne d’approvisionnement. Optimisation des images
Pour certaines couleurs), vous voudrez peut – être les charger sous forme de PNG, car il est préférable de les garder au minimum dans ce format. Si vous convertissez une image PNG en JPG, sa taille augmente et peut devenir floue. Et vice versa. Smashing magazine a testé les variations de taille de chaque format d’image.
Si vous gagnez plus de temps et que vous êtes le plus intéressé par la pleine efficacité, vous pouvez tout (et plus) en quelques secondes en installant un plug – in. Optimole est un bon exemple d’un plug – in WordPress léger avec des fonctionnalités intelligentes sous le capot. Premièrement, optimole optimise l’image uniquement sur demande du serveur. Par conséquent, si vous téléchargez une image, l’image est immédiatement optimisée lorsque l’utilisateur accède à la page contenant l’image. Une fois le plug – in installé, il vous suffit de le laisser faire son travail, mais avant de définir la méthode d’optimisation préférée: haute, moyenne ou basse. Deuxièmement, optimole Redimensionne chaque image à la taille optimale de chaque viewport visiteur pour un chargement rapide sur n’importe quel appareil. Il trouvera la taille et la taille parfaites selon le type d’équipement de chaque visiteur. De même, si un utilisateur se connecte plus lentement, optimole réduira la qualité de l’image de cet utilisateur particulier afin que la page puisse encore être chargée rapidement et que l’image puisse être affichée rapidement. Pour ce qui est de notre expérience avec wordpress, ce plugin offre toutes les fonctionnalités dont les utilisateurs ont besoin à partir d’outils d’optimisation d’images, toutes emballées et fournies via une interface simple et intuitive. C’est le type de plug – in que vous avez installé, mais vous avez oublié qu’il existe. C’est parce qu’il fonctionnera seul en arrière – plan, optimisé
Générer automatiquement des images afin que vous puissiez vous concentrer sur les projets les plus importants de votre entreprise.
Comment optimiser automatiquement les images WordPress ensuite, nous allons vous montrer comment utiliser Autopilot pour optimiser toutes les images sur le site WordPress. Tout ce que vous avez à faire est d’installer un plug – in, de définir vos préférences et de l’oublier. Pour ce faire, installez et activez optimole gratuitement. Une fois le plug – in installé et activé, vous devez vous inscrire par e – mail pour générer la clé API et l’introduire dans le tableau de bord WordPress. Une fois la clé API confirmée, le plug – in commencera à fonctionner. L’étape suivante consiste à passer aux paramètres, à activer les fonctions à utiliser et à sélectionner le niveau de compression préféré. Une fois que vous commencez à télécharger des images, vous pouvez voir que optimole fonctionne. Chaque fois qu’une image est téléchargée, elle effectue toute compression en arrière – plan, sans interférence ni même avertissement. Si vous avez déjà des images sur votre site WordPress, optimole les compressera même après que vous ou vos utilisateurs y aurez accédé. Il transfère votre image originale dans le cloud et remplace son lien initial par un lien personnalisé après optimisation. Les images optimisées sont rendues par CDN, ce qui permet de fournir des images plus rapidement aux utilisateurs. Lorsque vous accédez à une page avec une image, vous remarquerez que l’image affiche l’URL personnalisée optimole (clic droit – > ouvrir l’image dans un nouvel onglet). Le rapport d’image optimisé ne s’affiche pas immédiatement et le plug – in prend plusieurs minutes pour mettre à jour les modifications. Pour voir les progrès, allez aux médias – > optimiser. Vous pouvez également accéder à la zone du tableau de bord sur le site Web optimole et voir la section bande passante. Mais avant l’installation, vous pouvez rapidement tester l’outil, qui affiche l’état des images que vous utilisez sur le site. OPTI
Mole vous fournira un rapport sur place sur la façon dont il améliore l’image de votre site et donc la vitesse. Tests d’optimisation d’image: avant et après cela, nous avons fait quelques tests pour voir à quel point l’optimisation automatique d’image est efficace. Par défaut, WordPress Redimensionne également les images haute résolution, mais voyons comment utiliser le plug – in d’optimisation d’image (qui ajuste également chaque image à la taille maximale d’affichage afin qu’elle ne s’affiche pas plus grande que nécessaire sur l’appareil du visiteur). Nous avons donc fait une expérience avec les mêmes images et fenêtres avant et après. Résultats avant d’utiliser l’instance de Test wordpress et les vingt vingt thèmes par défaut pour l’optimisation de l’image, nous avons téléchargé des photos de différentes tailles empruntées à mystock. Photos. Nous incluons ces images dans un billet de blog régulier via un bloc de galerie. Maintenant, si vous cliquez sur chaque image pour l’agrandir, vous remarquerez que WordPress les Redimensionne par défaut. Par conséquent, les quatre images que nous avons téléchargées ont été réduites comme suit: 7,47 Mo – > 676 ko 12,3 Mo – > 762 ko 11,2 Mo – > 384 ko 8 Mo – > 794 ko si vous téléchargez la première image dans un type de message normal sans choisir d’agrandir, sa taille d’affichage passera de 7,47 Mo à 452 Ko. Par défaut, WordPress réduit les images téléchargées dans un article de 7.47 Mo à 452 Ko. Si vous accédez au même billet de blog depuis votre téléphone, l’image sera réduite à 92.61 KB. Ce sont les changements que WordPress fait lorsqu’il accède par défaut aux billets de blog via le Bureau et les appareils mobiles. Vous pouvez voir comment les images sont compressées en plein écran et en taille de billet de blog. Résultats optimisés
Maintenant, donnons un exemple concret de la façon dont optimole compresse une image riche en données. Comme nous l’avons fait dans la première partie du test (sans optimole), nous avons créé un bloc de galerie en téléchargeant les mêmes images non optimisées prises de mystock. Photos. Optimole a quatre niveaux de compression. Si haute est sélectionnée, la compression maximisera la qualité de l’image. Si vous utilisez Basso, la compression et l’optimisation seront plus intenses (comme décrit dans, la taille sera plus réduite). Une fois que vous accédez aux messages sur le site Live, optimole contrôle et crée une image de substitution compressée (chaque image peut être agrandie) pour chaque image que vous cliquez. Lorsque la compression de haute qualité est utilisée, les images sont réduites comme suit (ces images sont dans le même ordre que celles énumérées dans les essais précédents): 7,47 Mo > 557 ko 12,3 Mo > 548 ko 11,2 Mo > 220 ko 8 Mo ━ > 547 ko lorsque la compression de faible qualité est utilisée, Les résultats sont différents: 7,47 Mo > 251 ko 12,3 Mo > 269 ko 11,2 Mo ━ > 124 ko 8 Mo ━ > 302 ko c’est la première façon de traiter les niveaux de compression élevés et faibles (niveaux de qualité) dans la liste: niveau de qualité élevé (557 Ko) Faible qualité (251 KB) À l’œil nu, vous constaterez que la qualité de l’image n’a pas beaucoup changé. Maintenant, si vous ajoutez une image à un billet de blog sans option de zoom, elle est automatiquement réduite à la taille maximale d’affichage (la taille maximale d’affichage requise pour un billet de blog). Par exemple, lors de la visualisation dans un billet de blog, cette image à elle seule passe de 7,47 Mo à 75,3 Ko (compression de haute qualité): Une seule image post – image compressée à 75,3 KB 580 x 387 pixels Ceci est utile parce que lorsque vous préférez la taille du pic, le serveur n’a pas besoin de charger toute la taille de l’image
Coke Mais c’est arrivé sur le Bureau. Pour les écrans mobiles, optimole crée une version alternative de l’image, encore plus petite que celle du Bureau. Par conséquent, si quelqu’un accède à votre site par l’intermédiaire d’un appareil mobile, optimole ne fournira pas une variante de bureau de l’image, même si elle est optimisée, il peut prendre du temps à charger sur un appareil plus petit. Le plug – in fournit en fait une alternative mobile distincte à l’image. Par exemple, pour les utilisateurs mobiles, la même image dans le billet de Blog Top a été réduite à 20.15 KB (7.47 MB original). Optimole utilise à la fois des méthodes de compression sans perte et sans perte, qui sont définies en fonction du niveau de compression sélectionné. Grâce à l’optimisation sans perte, l’image ne perd pas de données importantes pendant la compression. Après optimisation, ils ressembleront exactement à la version originale. C’est pourquoi l’optimisation sans perte ne réduit pas considérablement l’espace disque et la différence de taille compressée est presque nulle. D’autre part, il y a l’optimisation de la perte de données, qui réduit considérablement la taille de l’image, mais pas la qualité (comme on peut le voir à l’oeil nu). Par conséquent, si vous voulez rendre la base de données beaucoup plus légère qu’elle ne l’est actuellement, vous pouvez choisir l’optimisation de la perte de données parce que vos visiteurs ne remarqueront pas la conversion. Autres façons d’optimiser les images en plus de redimensionner, il existe d’autres façons utiles de fournir aux visiteurs des images plus claires et de réduire le temps de chargement du site. Un chargement lent est une autre bonne façon d’empêcher les images de ralentir le site. Si vos messages ou pages sont remplis d’images, il peut ne pas être bon de les voir à la fois. La fonction de chargement lent affichera gr
Lorsque l’utilisateur fait défiler la page vers le bas. Chaque barre de défilement affiche un nouveau lot d’images dans la zone visible de l’écran de l’utilisateur, de sorte que le serveur répondra mieux à toutes les demandes. Le réseau de diffusion de contenu (CDN) est une fonctionnalité qui permet d’accélérer les temps de téléchargement en servant vos images à partir de l’emplacement du serveur le plus proche du point d’accès du visiteur. Optimole fournit un service CDN intégré pour vos images qui fonctionne automatiquement. Cloudflare et stackpath sont des plug – ins WordPress autonomes qui fournissent des services CDN pour l’ensemble de la base de données lorsque l’optimisation de l’ensemble du site est nécessaire. Pour économiser de l’espace disque et voir les fichiers briquet, vous pouvez également convertir GIF en vidéo. Si vous activez cette fonctionnalité dans optimole, elle commencera automatiquement à convertir chaque fichier GIF que vous téléchargez. Les formats vidéo disponibles sont MP4 et WebM, et le plug – in sélectionnera le format vidéo le plus efficace pour chaque cas particulier pendant la conversion. Avant de télécharger GIF sur le site WordPress, vous pouvez également utiliser quelques outils en ligne pour convertir GIF en MP4. Pourquoi convertir? Parce que le format GIF est plus grand que le format vidéo. La culture intelligente signifie couper l’espace ou l’arrière – plan inutile dans l’image, ne laissant que les points d’intérêt. La coupure peut être effectuée manuellement ou à l’aide d’un plug – in comme optimole, qui détecte automatiquement les points chauds dans l’image et supprime les parties inutiles. En résumé, l’optimisation d’image est une technique simple qui ne nécessite pas beaucoup d’efforts de votre part. Il suffit d’installer un plug – in et vous êtes complètement écrasé. Si vous choisissez de ne pas l’utiliser sur votre site, vous perdrez l’avantage. Chaque fois que vous chargez un fichier image, vous ne remarquez pas une diminution de la vitesse du site, comme une boule de neige qui devient de plus en plus grande à mesure que la température augmente
O. comme nous l’avons mentionné précédemment, Google est très préoccupé par la vitesse de votre site; Ça affectera vos affaires. Vous feriez mieux de prendre des précautions avant que la situation ne devienne grave. L’optimisation de l’image n’exige aucune connaissance technique et peut être gérée par tout le monde.