Directives finales Optimisation d’image pour WordPress

Les images sont l’un des éléments les plus importants d’un site et leur bon fonctionnement peut faire la différence entre les sites populaires qui offrent une expérience utilisateur exceptionnelle et ceux qui n’ont pas de trafic ou de conversion. Mais les images sont complexes. Pour en tirer le meilleur parti, vous devez faire beaucoup pour les rendre parfaits. Dans ce guide faisant autorité pour l’optimisation d’images WordPress, je vous donnerai toutes les informations dont vous avez besoin pour optimiser vos images. Nous allons passer en revue tout: comment préparer des images avant de les télécharger comment optimiser vos images comment WordPress reconnaît les images pour améliorer votre référencement comment servir efficacement les images nous allons traiter tous les sous – thèmes et informations importants que nous avons partagés dans nos messages précédents d’optimisation d’images de la manière la plus simple possible Possible (y compris notre guide complet de référencement d’images), vous serez bientôt l’optimiseur d’images WordPress. Si vous souhaitez approfondir ces sujets, j’ai inclus dans cet article des liens vers nos tutoriels approfondis.
Préparation de l’image composition de l’image redimensionnement et recadrage de l’image comment mettre à l’échelle l’image utiliser le bon format d’image pour l’information du fichier image de travail recadrer l’image vecteur image Raster Image Compression sans perte compression sans perte JPEG type de fichier image PNG webp SVG GIF Éditeur de titre d’image Nombre d’images par lots optimisées dans WordPress image par défaut WordPress taille de l’image réponse image rétine image prochaine génération de fichiers webp référencement titre de l’image texte de substitution titre de l’image sur la page image carte du site autres éléments à proximité de l’image du Service d’étiquetage des médias sociaux
Retarder le chargement du cache de
Il y a plus d’images que les sessions non converties, donc il n’y a pas d’augmentation de profit. Redimensionner et recadrer l’image en parlant d’image, la taille est importante! Plus c’est grand, mieux c’est. Gtmetrix et Google page speed Insights recommandent de redimensionner l’image pour l’adapter au conteneur dans lequel elle se trouve afin d’améliorer les performances. Si vous ne faites rien d’autre pour optimiser l’image, au moins redimensionnez l’image. Si tu fais quelque chose de mal, ça fera une grande différence. L’image surdimensionnée dans le conteneur doit être réduite manuellement par le navigateur. Cela gaspille du temps et des données lors du chargement d’une page Web sans aucun avantage en termes de performance et de qualité. Comment réduire la taille des images dans WordPress la première étape consiste à utiliser des outils de développement dans votre navigateur pour découvrir des conteneurs d’images de différentes tailles sur votre site.
Regardez notre court Tutoriel sur la détection des images de mauvaise taille dans WordPress. Ensuite, utilisez l’éditeur d’images pour redimensionner l’image en fonction du plus grand conteneur qui sera sur le site. Si vous souhaitez utiliser des images rétiniennes sur votre site, vous aurez besoin de deux fois la largeur et la hauteur du plus grand contenant. Nous discuterons plus en détail des images rétiniennes ci – dessous. Si vous voulez redimensionner une nouvelle image pour votre site, il vous suffit de télécharger l’image et de l’utiliser dans un conteneur redimensionné. Si vous corrigez une image existante sur le site, Téléchargez l’image et remplacez l’URL de l’ancienne image par la nouvelle.
Smoush pro peut également redimensionner automatiquement les images. Donc, si vous avez un site mature avec beaucoup d’images, laissez Smush redimensionner. Essayez smoush pro gratuitement. Lors de la culture d’une image, essayez de créer des détails de coupe et de compensation plus serrés
Et l’espace supplémentaire pour l’image. Les échelles 4: 3 et 16: 9 sont meilleures pour le référencement d’image, donc si votre but est d’obtenir une image classifiée dans la recherche d’image, votre but est une image qui n’est pas panoramique ou n’est pas haute et mince. Utiliser le bon format d’image la tâche utilise – t – elle PNG pour tout le contenu? Sois honnête. La meilleure façon d’optimiser les images dans WordPress sans plugin est d’utiliser le bon format d’image.
Chaque type de fichier est conçu pour un cas d’utilisation spécifique, avec ses avantages et ses inconvénients. D’autres caractéristiques du fichier image, telles que la transparence, des détails inutiles et trop de couleurs, augmentent la taille de l’image. Parfois, c’est nécessaire, parfois ce n’est pas le cas. La clé est d’utiliser le bon fichier image avec la bonne fonctionnalité pour répondre à vos besoins. Nous avons créé un mémo PDF téléchargeable que vous pouvez consulter! Cliquez ici pour une copie Utilisez le Guide de format de fichier smoush pour trouver le meilleur type de fichier pour vos images. Compression redimensionner les images WordPress il existe deux types d’images graphiques, vectorielles et Raster.
Les images vectorielles sont des formes géométriques générées mathématiquement qui peuvent être redimensionnées sans perte de qualité. Une image Raster se compose de petits morceaux appelés pixels disposés sur une grille. Les images Raster ne sont affichées de haute qualité que dans la taille qu’elles affichent ou moins. Sinon, l’image est pixelisée. Une autre chose à garder à l’esprit lors de la sélection d’un type de fichier image est le type de compression d’image que tout le monde utilise, car cela affecte la qualité de l’image lorsqu’elle est décodée et affichée sur le site.
Perte de compression suppression permanente des données Ima
Fichier image webp le premier fichier, appelé webp, utilise la compression de perte de données. C’est comme la version Web de JPEG. Le deuxième type, appelé compression sans perte webp, est similaire à PNG parce qu’il utilise la compression sans perte. Si vous voulez savoir comment créer un fichier webp pour WordPress, vous pouvez le faire en utilisant le plugin. En fait, le CDN smoush pro convertit les images en webp. Si quelqu’un accède à votre site Web à l’aide d’un navigateur Web, smoush convertit vos images et fournit des images webp. S’ils utilisent un navigateur qui ne prend pas en charge webp, ils recevront votre JPEG ou PNG quotidien. SVG SVG est un langage de balisage XML qui vous permet de créer des graphiques 2D pour créer des graphiques vectoriels. Il convient le mieux aux formes simples telles que logos, graphiques, drapeaux, icônes et géométries. SVG n’est pas adapté à la photographie. Ils sont compatibles avec tous les navigateurs. Puisque WordPress est techniquement un langage de balisage, SVG n’est pas autorisé par défaut à bloquer l’injection de logiciels malveillants. Vous ne devriez permettre l’utilisation de SVG sur votre site qu’aux utilisateurs de confiance qui comprennent le risque d’utilisation de SVG. GIF est parfait pour faire des mèmes stupides, pas beaucoup d’autres choses. Gif génère de très gros fichiers, surtout si l’image contient de l’animation. Pour l’animation, le fichier MP4 ou WebM est plus petit. GIF a une palette limitée de 256 couleurs et supporte la transparence. Ils sont compatibles avec tous les navigateurs. Il n’y a pas de consensus sur la prononciation, donc qui en a besoin? Voici un bref résumé de ces fonctions. Titre de l’image après avoir sélectionné le bon format d’enregistrement de l’image, vous devez changer le titre de l’image par défaut générée par la caméra. Donnez à votre image un titre concis et descriptif. Si l’imma est correctement décrite, utilisez le mot – clé
Moteur. Si vos mots – clés ne décrivent pas vos images, ne les utilisez pas dans le titre de l’image. Je vais vous montrer un endroit plus approprié pour eux dans la section référencement de cet article. L’éditeur d’images par lots peut prendre beaucoup de temps pour créer un lot d’images pour un nouveau site ou pour revenir pour corriger tous les problèmes avec les images actuelles du site. Heureusement, il existe plusieurs outils pour vous aider à traiter les images en vrac. Lightroom Classic est conçu pour traiter les changements non destructifs d’image. Utilisez – le pour ajuster, recadrer ou renommer les images JPEG dans la caméra. Photoshop peut vous aider à modifier PNG ou JPEG en vrac. Utilisez un processeur d’image ou créez une opération Photoshop personnalisée pour enregistrer une séquence complexe de changements et l’appliquer à d’autres images. L’optimisation des images dans WordPress la préparation correcte des images prévient de nombreux problèmes avant de commencer. Une fois que vous avez préparé vos images, WordPress dispose de quelques fonctionnalités merveilleuses pour vous aider à gérer vos images et à les faire paraître au mieux. Taille par défaut de l’image WordPress chaque fois que vous téléchargez une image dans la médiathèque WordPress, WordPress crée par défaut les tailles d’image supplémentaires suivantes: grande dans la vignette moyenne Taille par défaut des images WordPress, à l’exception des images de taille moyenne qui sont cachées par défaut. Si le sujet spécifie une taille d’image différente pour la page d’archive, la page d’accueil, etc. WordPress les a également créés. WordPress conserve également la taille originale que vous avez chargée et l’appelle la taille complète. Pour réduire la charge de travail en redimensionnant manuellement les images de différents conteneurs sur le site, vous pouvez redimensionner les paramètres par défaut ou ajouter des tailles dans la Section Médias > paramètres
Ou uniquement pour les dispositifs rétiniens. Comment servir les images rétiniennes dans WordPress Étape 1: générer des images deux fois la taille des pixels pour générer des images rétiniennes dans WordPress, chaque pixel dispose de suffisamment de données, vous devez doubler la taille des pixels de chaque image chargée. Si vous avez une grande image Hero de 1600px de large et 400px de haut, vous devez générer une image de 3200 Px de large et 800px de haut. Si votre blog a une largeur de 800 pixels, l’image de votre blog devrait avoir une largeur de 1600 pixels, et ainsi de suite. Il suffit de doubler la taille en pixels pour atteindre la taille maximale possible de l’image affichée. Il n’est pas nécessaire de créer une image de deux fois la taille de chaque réaction possible. Étape 2: fournir une image rétinienne à l’appareil rétinien Option 1: une des meilleures façons de fournir une image rétinienne est d’utiliser l’attribut srcset. Il suffit d’ajouter l’image rétinienne à l’ensemble source que WordPress utilise pour générer l’image de réponse. Option 2: Installez et Configurez le plug – in WordPress Retina 2x gratuit. Étape 3: Téléchargez votre image rétinienne sur WordPress et utilisez – la sur votre site Web. Lorsque vous utilisez une image rétinienne sur votre site Web, utilisez la quantité de variation de l’image, qui est la moitié de la largeur et de la hauteur de la pleine taille. La largeur de l’image est 1200px, mais je dois utiliser la version 600px pour obtenir la qualité de la rétine. Comme les images de la prochaine génération comme webp ne sont pas largement prises en charge, nous pouvons également utiliser srcset pour fournir des images webp pour les navigateurs compatibles. Tout d’abord, vous devez utiliser le convertisseur webp pour convertir les images existantes en médiathèque et les télécharger à l’avenir. Vous devez ensuite déterminer si le navigateur du visiteur supporte les images webp. Enfin, si
Si ce n’est pas le cas, les formats de fichiers traditionnels tels que PNG ou JPEG sont utilisés. Smoush pro peut être converti en Marquez votre site sur le Web et fournissez – le à un navigateur compatible avec son CDN. Cependant, vous devez utiliser différentes méthodes pour les images de fond CSS. Obtenez un essai gratuit pour voir comment il affecte votre site. Regardez la vidéo ci – dessous pour des exemples de la façon d’utiliser l’optimiseur d’images wordpress pour servir les images de la prochaine génération. Le référencement d’images le référencement d’images est devenu de plus en plus important ces derniers temps et il existe de nombreuses possibilités de cibler le trafic d’images. Contrairement au contenu écrit, dans lequel le contenu répété est pénalisé, dans le cas des images, l’image optimisée optimale \
Le texte dépend du type d’image utilisé dans le contenu. Lisez le guide complet des images marquées alt dans wordpress pour trouver le bon équilibre entre référencement et accessibilité. Ajouter un texte alternatif ici. Titre image le titre de l’image et d’autres textes entourant l’image fournissent le contexte de l’image. Ils peuvent également aider Google à comprendre tout le contenu de l’image. Toutes les images n’ont pas besoin d’un titre, mais le titre fonctionne comme un rappel dans le texte. Comme elles sont séparées du reste du texte et mises en évidence, elles sont quatre fois plus susceptibles d’être lues. Lorsque vous essayez de comprendre votre image, d’autres éléments de la page à côté de l’image Google tiennent également compte de la page entière. Quel est le titre de cette page? Quelle est l’URL? Bien qu’elles ne soient pas directement liées à votre image, Google les utilise comme facteurs de classement. Si possible, inclure des mots clés et des phrases connexes dans le titre de la page, l’URL de la page et l’URL de l’image. Pour vous assurer que Google indexe toutes vos images, vous devez créer une carte du site image. Les cartes de site sont particulièrement importantes si vous mettez régulièrement à jour votre contenu, si vous avez un site de commerce électronique ou si vous avez un nouveau site Web, et si vous voulez que Google indexe vos images le plus rapidement possible. Si vous avez besoin d’une solution simple, vous pouvez utiliser smartcrawl pour générer une carte de site. Faites tourner le commutateur pour inclure l’image dans la carte du site générée par smartcrawl. Étiquettes des médias sociaux les étiquettes des médias sociaux sont un moyen d’étiqueter votre contenu, de sorte que lorsque quelqu’un partage du contenu sur un réseau social, il partage ce que vous voulez qu’il partage. Facebook, Twitter, LinkedIn et Pinterest prennent en charge Open Graph, la langue de l’étiquette des médias sociaux Facebook. Twitter a ses propres métabalises, mais si les balises
Twitter Social Media n’est pas disponible. L’important marqueur graphique ouvert pour l’image est og: image, qui spécifie l’image que vous voulez que Facebook et d’autres réseaux sociaux affichent lorsque quelqu’un partage votre message. La dernière chose dont vous avez besoin pour optimiser une image pour un service d’image est la façon dont l’image est transmise. Plusieurs outils sont disponibles dans wordpress pour améliorer l’optimisation des images et la vitesse des pages. Smush pro est chargé plus lentement avec son CDN. Colibri peut aider à la mise en cache du navigateur. Obtenez un abonnement gratuit sans risque à la version d’essai et essayez les deux versions professionnelles sur votre site Web. Le chargement lent est une technique qui augmente la vitesse de la page d’accueil et de la charge utile en retardant le chargement des ressources non critiques qui ne sont pas actuellement dans la fenêtre du navigateur. Dans WordPress, retarder des images hors écran signifie essentiellement attendre de télécharger des images que nous ne voyons pas encore. La mise en cache du navigateur est un moyen fiable d’accélérer la recherche en mettant en cache les ressources, ce qui accélère la vitesse du site Web du visiteur. En utilisant le cache http, le navigateur stocke dans son cache des copies des ressources téléchargées par l’utilisateur via http, telles que les images, afin qu’elles puissent être récupérées sans avoir à accéder à nouveau au serveur. Si cela est fait correctement, cela améliorera considérablement le rendement des visiteurs ordinaires. Les emplacements des CDN sont partout dans le monde, de sorte que le téléchargement d’images nécessite un transfert de données beaucoup plus rapide que le simple fait de servir des images à partir d’un serveur Web en un seul endroit. Si vous utilisez le CDN pour servir vos images, rappelez – vous une chose que vous voulez éviter
Si vous souhaitez améliorer votre jeu d’optimisation d’image, jetez un coup d’oeil à la trilogie d’optimisation de développement wpmu: Colibri, smartcrawl, et le populaire smaush pro. Smoush pro est le meilleur optimiseur d’image de WordPress, car il est omnipotent. Vous pouvez essayer ces trois méthodes gratuitement sur votre site Web. Si vous n’avez jamais pris l’optimisation d’image au sérieux, vous serez surpris de voir dans quelle mesure ils améliorent la performance de votre site. Avez – vous autre chose à ajouter à l’optimisation d’image que vous? Étiquettes: Format d’image optimisation de l’image optimisation de l’image optimisation de l’image rétinienne webp WP Smush pro