Optimiser les images et photos pour un site WordPress plus rapide

1. Introduction: gens disent que sont importants sur chaque site Web pour le problème est si vous téléchargez une photo qui est une très grande taille de fichier, qui va ralentir votre site Web. C' est mauvais pour tout le monde visitant, mais c'est aussi mauvais pour votre score SEO, votre score de recherche Google. Alors, comment pouvons-nous garder la taille du fichier petite, mais maintenir la qualité de l'image élevée ? Je vais te montrer ici. Bonjour, je suis John Wolfgang Nella. Je suis designer professionnel depuis 20 ans, et j'ai travaillé pour de grands clients comme Fox TV ici en Australie. Les trois règles importantes pour chaque photo que vous téléchargez une taille de fichier, un ratio et un nom de fichier. Maintenant, dans cette classe, je vais vous montrer comment obtenir les trois parfaits en utilisant Photoshop ou en utilisant le programme photo pré-installé sur votre ordinateur portable. Ok, commençons. 2. Taille d'image de site internet: Les images sont très importantes pour chaque site web. Vous voulez qu'ils aient l'air génial pour que votre site soit génial. Le problème est que si vous les téléchargez de manière incorrecte, cela peut considérablement ralentir votre site Web. Ici, nous sommes dans l'un des sites de test de vitesse, GT métrics. Alors entrez ici et tapez votre URL. Ce n'est pas un bon score. Il y a beaucoup de choses qui peuvent ralentir vos sites Web. Certains d'entre eux ont besoin d'un peu plus d'assistance technique, mais nous allons juste regarder les images. Donc, sur cette page, si nous venons ici pour structurer, nous pouvons voir quelques problèmes autour de la taille de l'image. Ce premier ici, taille correctement les images. Si je clique sur celui-ci, cela me dit chaque image qui est potentiellement trop grande sur mon site ici, ou vous dire la taille de l'image et les frais généraux, il vous indique la taille qu'il devrait être pour accélérer votre site Web. Et encore une chose à regarder ici. Ici, il est dit Servir des images dans les formats next-gen. C' est parce que nous utilisons une image JPEG sur notre site Web, mais nous pourrions utiliser l'une de ces images ou WebP Image. J' en parlerai plus tard dans cette classe. Mais tout d'abord, jetons un oeil à taille des images et regardons comment nous pouvons améliorer cela. Chaque image que vous téléchargez sur un site Web se trouve à l'intérieur d'un conteneur. Et ce conteneur a une certaine taille. Il a une largeur de pixel et une hauteur de pixel. Ceux-ci en haut sont assez petits, ce qui signifie que l'image que j'ai téléchargée est probablement trop grande pour le conteneur. Comment connaissez-vous la taille qu'il devrait être ? Eh bien, c'est très simple. Cliquez avec le bouton droit de la souris sur n'importe quelle image et allez dans Inspecter. Et lorsque cette fenêtre apparaît, cliquez ici, puis survolez l'élément que vous souhaitez vérifier. Les chiffres ci-dessous que nous vous montrons la taille de l'image devrait être. y a des chances que j'ai rendu celui-ci trop grand pour cet endroit. Alors ouvrons nos images et commençons à les redimensionner. 3. Édition d'images - Photoshop et More: Nous sommes maintenant dans Photoshop. Chaque image que vous téléchargez doit suivre trois règles. Le nombre 1 est le ratio. Il est important de garder chaque taille d'image cohérente sur votre site Web. Cela signifie que les choses s'alignent correctement et qu'il rend votre site web agréable et propre. Le numéro deux est la taille du fichier. Nous voulons que la qualité d'image soit élevée, mais nous voulons qu'elle soit aussi petite que possible, car alors notre site Web est plus rapide. Et le numéro trois est le nom final. Comme vous pouvez le voir pour le moment, ces deux images ont juste un nombre aléatoire à la fin d'entre elles, cela ne va pas aider quiconque recherche sur Google. Si vous ajoutez des mots clés à votre nom de fichier, cela aidera votre score de recherche Google. Commençons par ce plus petit. Lorsque nous avons regardé le site, nous pouvons voir quel était le ratio idéal pour celui-ci. Il faisait 360 pixels de large et 240 pixels de haut. Donc, c'est un ratio est trois par deux. Pour changer le rapport sur n'importe quelle image, il suffit de survoler ici et de cliquer sur l'outil de recadrage. Comme vous pouvez le voir ici, cela est déjà réglé à quatre par trois. Mais je veux changer ça à trois par deux. Pour rester cohérent sur l'ensemble du site Web. Je fais toutes les images de paysage trois par deux rapport. Donc, dans cette petite fenêtre qui se déplace vers le haut où vous pouvez déplacer l'image en arrière-plan pour obtenir un meilleur recadrage et double-cliquez. On y va. Maintenant, l'image a un rapport de trois par deux. Maintenant, je vais exporter celui-ci et jeter un oeil à la taille du fichier et le nom du fichier. Alors allez ici à Fichier et allez à Exporter. Et Exporter en tant que. Dans la fenêtre contextuelle, vous verrez que le format est déjà un JPEG. Si vous avez quelque chose qui a besoin d'un arrière-plan clair, faites ce PNG. Mais pour une image carrée normale, gardons cela comme JPEG. Ici, vous verrez quelle est déjà la taille de l'image. La largeur est de 910 pixels et la hauteur est de 607. Nous voulons que ce soit 360 par 240. Alors passons juste la hauteur à 240. Quand je fais cela, il change automatiquement la largeur aussi. Ça a changé un seul pixel ici. Ne vous inquiétez pas pour ça. Ça ne va pas faire une grande différence. C' est toujours le bon rapport. Maintenant, la prochaine chose à regarder est ici sur la gauche, ce numéro ici, c'est la taille du fichier qui est de 840 kilo-octets. Ce n'est pas trop grand, mais il peut aller beaucoup plus petit. Ici, vous verrez la qualité qu'il est à 100%. Dans la liste déroulante, jouez avec ce petit bouton et déposez la qualité. Ici, je l'ai descendu à 49 pour cent. Et vous pouvez voir cela comme une taille de fichier beaucoup plus petite. Est-ce que c'est assez haut de gamme ? Cliquez ici et vous pouvez zoomer sur l'image pour voir à quoi elle ressemble. Ça m'a l'air bien. Mais si je veux le rendre un peu plus fort, c'est juste dans un petit peu. Ok, et à cette taille arrive maintenant à 34 kilo-octets. Donc, essayez de garder chaque image que vous téléchargez un moins de 100 kilo-octets. Celui-ci a 34 ans, donc c'est bon. Cliquez sur Exporter. Et dans cette fenêtre contextuelle, vous pouvez changer le nom du fichier. Comme vous pouvez le voir en haut, il a toujours le nom de fichier d'origine. Mais je veux que cela inclue des mots que les gens peuvent rechercher dans Google afin que mon image apparaisse. Alors je vais l'appeler comme ça. Et puis économisez. Si vous n'avez pas Photoshop, utilisez simplement l'éditeur de photos préinstallé sur votre ordinateur portable. J' utilise un Mac, donc j'utilise juste des photos Apple ici. Je vais juste choisir l'image que je veux éditer. Et dans cette fenêtre, passez le curseur vers le haut et choisissez Modifier. Vous avez beaucoup d'options ici, mais choisissons la culture. Nous voulons toujours que ce soit un ratio de trois par deux, et nous avons toutes ces options ici du côté droit. Choisissons trois par deux. Et cliquez sur Terminé. Puis passez la souris ici sur Fichier Exporter et Exporter une photo. Vous pouvez changer le type de photo et nous voulons que ce soit JPEG. Qualité. Jouez avec cela, voyez ce qui fonctionne pour vous. Je vais choisir le médium ici juste pour voir quelle est la qualité. Maintenant ma largeur, je veux que ce soit 360 pixels. Et ici, il dit nom de fichier, choisissez celui-ci et tapez ce que vous voulez qu'il soit attrapé. Et l'exportation. Maintenant, trouvez le dossier. Et vous verrez qu'il a pris le nom que nous lui avons donné, mais il a mis ce tableau de bord et un à la fin. Donc supprimez ça. Comme vous pouvez le voir la taille du fichier ici. Eh bien, ils sont assez similaires, mais juste essayer de l'obtenir aussi bas que possible et juste jouer avec la qualité que vous verrez ce qui fonctionne le mieux pour vous et le type de site Web que vous exécutez. Maintenant, ces images sont prêtes. Envoyez-les tous sur WordPress. 4. Optimisation supplémentaire - Images de WebP WebP: Il s'agit d'un service appelé pixel court. Ce que cela fait, c'est qu'il compresse toutes vos images à une taille IV ou plus petite. Si vous voulez lui donner un test gratuit rapide, venez ici et tapez l'URL de votre site Web. Et si j'utilise ce service pour compresser mes images plus loin, et que nous allons même faire fonctionner le site Web 44 % plus vite si vous avez juste un très petit site Web, eh bien, cliquez ici, Voir les détails. Cela vous indiquera quelles images ont été redimensionnées. Vous pouvez simplement télécharger la version plus petite et le télécharger. Mais si vous avez un grand site web avec beaucoup d'images, vous allez devoir installer le plug-in et le pixel court ont deux plugins. On compresse la taille des jpegs que vous avez chargés. Et numéro deux, c'est celui qui vous aide à créer la page Web, une version de vos images. Ce ne sont que des images web. Donc, ils sont encore plus petits et rendent votre site encore plus rapide. Alors jetons un coup d'oeil à ça. Entrez dans votre tableau de bord WordPress et allez dans Ajouter des plugins, tapez un pixel court. Et vous verrez ces deux-là en haut. L' un est l'optimiseur d'image qui rend vos jpegs aussi petits que possible. Et celui-ci est des images adaptatives qui convertissent chaque image en version de page Web. Alors installons les deux. Et puis il suffit de passer par l'ensemble du processus d'installation. Ils ont une version gratuite qui vous permet de redimensionner jusqu'à 100 images gratuitement. Ou ils ont des versions payantes. Si vous avez un site beaucoup plus grand avec des milliers d'images. Il suffit de vérifier la section À propos ici. Si j'ai des offres de cette société, j'y ajouterai quelques liens. Lorsque vous avez tout configuré, allez dans l'optimiseur d'image, plug-in, remplissez tous les détails, puis cliquez ici sur Enregistrer. Et ici, vous pouvez voir qu'il optimisera cent deux cent trente huit de mes images. C' est parce que j'ai un site assez grand ici, mais il suffit de cliquer dessus. Lorsque cela est terminé, venez ici dans Paramètres et choisissez celui qui est court pixel AI processus que vous passez par. Nous veillerons à ce que votre site Web soit adapté à cette modification des images WebP. Vous pouvez exécuter quelques tests ou vous pouvez tout configurer et juste voir si cela fonctionne et s'il n'est pas enregistré sur le plugin. Lorsque vous venez à cette page ici, il est dit support Web PIE. Assurez-vous juste qu'ils sont tous des textes et qui va changer chaque image, téléchargé votre site Web dans une version de page Web. Ensuite, venez dans votre site Web et cliquez sur l'icône de pixel court en haut. Et vous verrez CDN venir en haut de quelques images. Cliquez dessus. Et puis vous verrez ce que le service a fait. Il a optimisé et mis à l'échelle l'image d'un 1000 pixels à 334. C' est la bonne taille que ça doit être. Comme vous pouvez le voir, cela a réduit la taille et 32 KV à 5,9 Ko. Donc c'est beaucoup plus petit. Maintenant, quand vous regardez ceci, vous pourriez y aller, en fait ce n'est pas la qualité de l'image que je veux. Ensuite, vous avez un tas d'options ici pour exclure une image comme celle-ci. Si vous cliquez simplement sur Exclure cette URL d'image, cela signifie que l'image ne sera pas incluse dans cette optimisation. Mais ça me semble bien. Alors continuons avec ça. Et si nous faisons défiler ici, cliquez sur les autres images. Vous verrez que chaque image ici a été redimensionnée. Donc, vous devriez avoir un site beaucoup plus rapide. Ensuite, nous revenons aux métriques de service et nous vérifions à nouveau la vitesse du site. Et vous pouvez voir que tout fonctionne maintenant beaucoup plus vite. Et c'est juste parce que beaucoup moins d'espace est maintenant pris par les images sur notre site. Et si nous revenons sur le site, alors que la qualité semble aussi élevée qu'avant, rien n'a changé. Et nous avons un site beaucoup plus rapide. Et tous les sites Web sont configurés d'une manière différente. Et il peut être un cas d'utilisation des deux plug-ins ici ne fonctionne pas sur votre site Web si c'est le cas, Voici ce que je recommande. Supprime l'i1 et accède au pixel court régulier. Ensuite, venez à cette page, trop avancée, et sous où il est dit images de prochaine génération, cliquez sur cette case. Ensuite, celui ci-dessous qui dit livrer que les versions de prochaine génération dans le front end. Et vous aurez quelques options ici. Détruisez tous ces éléments pour voir lequel va travailler sur votre site Web et vous obtenir les meilleurs résultats. Essayez-le. Vous faites défiler ici et enregistrez-le, et puis vous aurez le parfait travail rapide site Web. 5. Merci: Merci d'avoir regardé toute cette classe. Si vous avez des questions sur le téléchargement de photos, hébergez-les ici dans la section de discussion. Aussi, pendant que vous êtes là, assurez-vous de cliquer sur mon nom et de consulter mon profil Skillshare. Ici, vous verrez toutes mes classes sur la construction d'un site web. Il y avait un parfait pour les débutants sur l'utilisation du générateur de pages Elementor et un autre sur la création de votre propre portfolio en ligne. Mais les deux, vous n'avez pas besoin de connaître un seul morceau de codage. Tout est une question de design créatif. Aussi, assurez-vous de me suivre et vous recevrez des notifications chaque fois que je télécharge une nouvelle classe. Ok, c'est tout. Passez une belle journée.