Comment automatiser l’optimisation des images de votre site web

L’optimisation des images de votre site web est une tâche que vous devriez déjà effectuer si vous voulez que votre blog soit rapide, léger et offre une bonne expérience utilisateur à vos lecteurs.

Faites attention car ce n’est pas l’article classique où l’on vous montre 27 applications et plugins pour optimiser vos images mais on ne vous explique jamais aucun d’entre eux en profondeur, et à la fin vous vous retrouvez juste avec un tas de noms dans la tête car vous ne savez pas quelle solution choisir.

Dans ce guide je vais parler dequi est le meilleur outil, celui que j’utilise, à la fois pour ses capacités de compression, à la fois pour sa facilité d’utilisation et sespossibilités d’automatisation, et aussi gratuit.

Table des matières

  • Pourquoi optimiser vos images web
  • Ce que vous devez savoir pour optimiser vos images web
    • Réduire la résolution pour optimiser vos images web
    • Choisir le bon format pour optimiser vos images web
    • Choisir le bon format pour optimiser vos images web
  • Choisir le bon format pour optimiser vos images web
  • Choisir le bon format pour optimiser vos images web
  • web
  • Comment optimiser vos images web avec TinyPNG
    • Comment optimiser les images sur le web de TinyPNG
    • Comment optimiser les images avec le plugin Photoshop de TinyPNG
    • Comment optimiser les images avec l’API de TinyPNG
    • Comment optimiser les images avec TinyPNG dans WordPress
  • Pourquoi optimiser les images sur votre site web

    Parce qu’à moins que vous n’ayez un blog juste pour lehobby (et même dans ce cas, je suis sûr que vous êtes excité à l’idée d’être lu par quelqu’un), votre objectif serad’apparaître dans les premières positions de Google pour que les gens vous découvrent et voient que vous êtes une personne qui peut les aider.

    Pour apparaître dans les 10 premiers résultats, il faut que Google vous apprécie, et l’un des facteurs que le moteur de recherche prend en compte pour décider qui passera avant qui, est la vitesse de chargement du web.

    .

    Une grande partie de cette vitesse sera donnée par votre hébergeur (vous savez que je fais confiance à SiteGround), mais une fois ce point résolu, le reste est entre vos mains.

    Si vous téléchargez un article de blog contenant 40 images de 5 Mo chacune, ni SiteGround (ni aucun autre fournisseur) ne pourra faire quoi que ce soit pour vous aider.

    Si vous allez sur des pages comme GTmetrix, Google Pagespeed ou Pingdom, vous verrez qu’une grande partie du temps de chargement et des suggestions d’amélioration qui sont proposées, sont liées aupoids de vos images.

    Google en veut toujours plus

    J’optimise absolument toutes les images avant de les télécharger sur le serveur, et pourtant je reçois toujours ce fichu message qui m’invite à les compresser encore plus.

    Pour Google ce n’est jamais assez, il vous demandera d’optimiser les images de votre site web pour diminuer de quelques octets
    .

    Ce n’est pas une obsession, car comme vous pouvez le constater, Google peut même vous demander de compresser et d’optimiser une image pour économiserun minuscule KB.

    Ce n’est pas la peine d’atteindre ce niveau, l’important est que vous soyez conscientde l’importance d’optimiser vos images pour gagner en vitesse, et que vous commenciez à le faire pour respecter certains minimums.

    Ce que vous devez savoir lorsque vous optimisez les images de votre site web

    L’optimisation des images est quelque chose qui est entre vos mains, même s’il est vrai que vous pouvez travailler intelligemment et “déléguer” cette tâche à un outil ou un plugin (comme je vous le montrerai tout au long de ce post), il est important que vous compreniez quelques concepts de base avant de le faire, car il y a des choses que vous devrez faire manuellement.

    Réduisez la résolution pour optimiser vos images web

    L’erreur typique du débutant que nous avons tous faite lorsque nous avons commencé nos blogs.

    Nous disposons d’une photo de3000 x 2000 px provenant de n’importe quelle banque d’images gratuite et la téléchargeons sur notre site web ou notre blog sans autre considération, sans être conscients qu’il s’agit d’un gaspillage de ressources.

    .

    Dans les pages web (et surtout dans les blogs, car dans les e-commerces cela peut avoir un certain sens) il n’est pas nécessaire que les images soient si grandes.

    Si vous incluez une photo dans un article, elle ne sera affichée qu’avec la largeur que votre design permet, et cette largeur se situe généralement entre 700 et 900px, donc tout ce qui va au-delà de cette largeursimplement n’est pas nécessaire.

    J’ai désactivé les “grandes vignettes” car j’optimise toujours la taille à la largeur de mon blog
    .

    Il est vrai que WordPress a corrigé cela en créant des vignettes (vous pouvez les définir dansParamètres > Media), mais en réalité il s’agit d’un petit correctif qui n’est pas si efficace.

    Si, par exemple, vous cherchez une taille à mi-chemin entre les tailles moyenne et grande, vous finirez par prendre la grande taille pour qu’elle s’adapte automatiquement à votre largeur, et là encore, vous gaspillerez des ressources, car ce que vous verrez sera par exemple une image de 1 000px de large enfermée dans un article de 700px de large.

    Takeaway I: mesurez la largeur du contenu de votre site web et faites en sorte que le maximum des images soient identiques et ainsi clouez l’optimisation ; cela si nécessaire.Si l’image semble bonne avec une largeur moindre, réduisez-la.La largeur du contenu de votre blog est votre maximum, pas votre standard.

    Takeaway II: souvent, il n’est pas nécessaire de tout montrer.Par exemple, dans l’image ci-dessus, je ne vous ai montré qu’une section des paramètres de WordPress et non WordPress dans son ensemble, ce qui m’a permis d’ajouter une image plus petite et moins lourde.

    Choisissez le bon format pour optimiser les images de votre site web

    Je ne suis pas un expert sur ce point et je ne peux donc pas expliquer avec certitude pourquoi il en est ainsi, mais la réalité est ques certains formats sont plus lourds que d’autres, bien que cela varie en fonction du type d’image que vous traitez (une capture d’écran n’est pas la même chose qu’une photographie)

    .

    Vous pouvez remplir le point précédent à la lettre, en téléchargeant les images sur votre blog avec les bonnes mesures pour un chargement aussi rapide que possible ; mais si vous les téléchargez par exemple au formatpng, alors que l’utilisation d’un formatjpeg pourrait vous offrir la même qualité avec un poids inférieur, alors vous gaspillerez également les ressources de votre serveur.

    Comme je vous l’ai dit, je ne suis pas un expert en la matière, donc jusqu’à ce que je trouve la clé de ce qui se passe, je fais habituellement des essais et des erreurs.

    Avant de télécharger les images sur mon blog, je vérifie localement si toutes les photos que je veux inclure dans l’entrée pèsent moins comme.jpeg ou comme.png, le format gagnant est celui que je télécharge dans la galerie média.

    Par expérience, je vous dirai que généralement les images de type photo (réalisées avec un appareil photo, avec votre smartphone…) pèsent moins lourd enjpeg, alors que les captures d’écran, les schémas, etc.(surtout s’ils ont peu de couleurs), pèsent beaucoup moins s’ils sont des fichierspng.

    .

    Takeaway: une fois que vous avez optimisé la largeur et la hauteur de vos images, vérifiez si la version “jpeg” ou “png” de l’image pèse moins lourd.Dans de nombreuses occasions, un simple changement de format peut entraîner une réduction de 50 % du poids du fichier.

    Attention aux gifs

    En parlant de formats…Lesgifs pèsent un putain de poids.

    S’ils sont bien utilisés, ils sont très cool dans les articles et donnent une bouffée d’air frais et de joie au texte, mais j’essaieI de les éviter à tout prix..

    Toutes celles que j’ai vues, (et celles que j’ai essayé de créer), sont rapidement téléchargées et pèsent 2 ou 3 Mo, donc si ce n’est pas strictement nécessaire, j’éviterais de les inclure.

    Takeaway: si vous pouvez éviter l’utilisation de gifs dans vos articles, ce que vous obtenez est juste un fichier avec des dizaines d’images jouant en boucle.

    Si vous voulez expliquer quelque chose en mouvement, la vidéo a beaucoup plus d’avantages.

    Comment optimiser vos images web avec TinyPNG

    Une fois que vous avez pris l’habitude de suivre les conseils des sections précédentes de manière naturelle, il est temps de mettre un peu plus de magie dans l’affaire.

    .

    Et c’est que sur Internet vous trouverez des dizaines de plugins, services et outils qui vous aideront àréduire le poids des images à l’aide d’algorithmes, ce qui vous permettra d’obtenir une version de l’image quioccupe moins de MB (ou kB dans les mesures dans lesquelles nous nous déplaçons).

    Plus que l’optimisation, ceci est connu comme unecompression d’image, et attention car il en existe deux types:

    • Compression sans perte.C’est “la bonne”, l’image finale sera identique à l’original, elle prendra juste magiquement moins d’espace.Pour cette raison,la compression est beaucoup plus faible.
    • Compression avec perte.C’est “le mauvais” parce qu’il perd un peu d’information en chemin (ce qui affecte la qualité), mais en échangela compression est beaucoup plus élevée.Cela dit, ne pensez pas que vous allez passer d’une photo qui semble parfaitement claire à une image complètement pixellisée.Les compressionslossy sont très respectueuses, etdans de nombreux cas, vous ne remarquerez pas la perte de qualité par rapport à la photo originale.

    Et pour faire des compressions des images de votre site web, à mon avis il y a un outil qui prend la palme :TinyPNG et son panda.

    Ne vous laissez pas emporter par le nom, car ce service vous permet égalementde compresser et d’optimiser les images au format .jpeg.

    .

    En plus d’être un très bon et libretool dans une certaine mesure, il a un très beau logo, juste pour cette raison vous devriez lui donner un essai ?

    Aller à TinyPNG →

    Tout d’abord vous devez savoir queTinyPNG utilise un algorithme de compressionlossy, mais il est si bien programmé que je ne remarque pas la différence, et grâce à cela vous obtenez des gains de poids incroyables.

    Si vous constatez une différence de qualité alarmante, n’utilisez pas TinyPNG
    .

    Il est vrai que dans l’image d’exemple les images utilisées étaient petites, mais je vous invite à faire le test avec vos propres fichiers pour voir que l’utilisation de TinyPNG est totalement sûre pour la qualité de vos images.

    Comment optimiser les images sur le site de TinyPNG

    C’est de cette manière que vous utiliserez probablement plus souvent l’outil, car il est très facile à utiliser et il estfree.

    Lorsque vous entrez sur le site de TinyPNG, vous trouverez une zone où vous pouvezdrag and drop vos fichiers (.jpeg ou .png)

    .

    C’est ici que vous faites glisser et déposez vos images
    .

    Les seules limites ici sont que:

    • Vous ne pouvez pas faire glisser plus de 20 éléments à la fois.Cela ne sera pas un obstacle pour vous, car vous ne créez probablement pas beaucoup d’articles comportant plus de 20 images.Et si c’est le cas, il suffit de rafraîchir le site et d’en lancer 20 autres.
    • Vous ne pouvez pas faire glisser des images de plus de 5 Mo chacune. Encore une fois, si vous avez suivi les conseils que je vous ai donnés au début de cet article (réduire la résolution, et choisir un bon format), cela ne sera pas un problème pour vous non plus.

    En économisant ces deux points,vous pouvez utiliser TinyPNG autant de fois que vous le souhaitez sans payer un euro.

    Si l’une de ces deux limitations vous empêche de travailler en douceur, vous pouvezs’inscrire à TinyPNG Pro pour 25 $ par an pour avoir plus de flexibilité dans votre travail.

    Vous pouvez supprimer la limite d’images et augmenter la taille maximale à 25 Mo pour 25 $ par an
    .

    Dans tous les cas, l’interface sera toujours la même, et une fois que vous aurez téléchargé vos images,elles se compresseront d’elles-mêmes, et vous n’aurez plus qu’à les télécharger à nouveau déjà optimisées, soit une par une, soit toutes en même temps (Télécharger tout), soit en les enregistrant directement dans votre Dropbox.

    2MB de moins pour quelques secondes de travail
    .

    Comme vous pouvez le voir sur l’image, les réductions obtenues sont bestiales.

    Comment optimiser les images avec le plugin TinyPNG de Photoshop

    Si vous ne travaillez pas avec des interfaces web, vous avez de la chance, car TinyPNG a un plugin pour utiliser son algorithme de compression directement dans Photoshop.

    Get the plugin for Photoshop →

    Cependant, comme il s’agit d’une solution plus professionnelle, vous devrez payer les$5

    1 que cela coûte actuellement pour l’obtenir (vous pouvez payer par carte de crédit via Stripe, ou avec Paypal)

    .

    C’est l’email que vous recevrez si vous achetez le plugin
    .

    L’installation du plugin TinyPNG sur Mac est aussi simple que de faire glisser les fichiers qui vous seront envoyés dans l’email dans le dossierApplications / Adobe Photoshop / Plug-ins.

    Alors que pour l’installer sur Windows vous devrezexécuter le programme d’installation que vous recevrez, puis copier le fichier de licence dans le cheminC : / Program Files / Adobe / Adobe Photoshop / Plug-ins

    Dans les deux cas, son utilisation est très facile, car dans Photoshop vous trouverez de nouvelles préférences d’exportation dans le menuFichier > Exporter > TinyPNG et TinyJPEG.

    .

    Vous pouvez accéder rapidement à cet export avecAlt Ctrl P sous Windows, ou avec⇧⌘P sur Mac.

    Cette image exportée avec TinyPNG pesait à l’origine 1,4 Mo
    .

    Et au cas où vous auriez un doute : vous pouvez exporter en utilisant ce plugin autant de fois que vous le souhaitez, et sans aucune restriction d’aucune sorte.

    Comment optimiser les images avec l’API TinyPNG

    TinyPNG possède également une API (un code de lettres et de chiffres) que vous pouvez utiliser dans des applications tierces pour convertir des images à la volée.

    Entrez votre nom et votre courriel et vous recevrez une API gratuite
    .

    Cette API est gratuite et vous pouvez optimiser jusqu’à500 images par mois (plus que suffisant pour la plupart des blogueurs qui publient une ou deux fois par semaine)

    .

    Si cela ne vous suffit pas, il existe des plans de paiement assez bon marché, même si, comme je l’ai déjà dit, vous n’en avez probablement pas besoin 🙂

    01.

    Cette API vous permettra deautomatiser la compression et l’optimisation de vos images.

    Par exemple, vous pouvez utiliser ce flux de travail dans Alfred(application pour Mac sur laquelle vous pouvez trouver un cours dans Limni’s Studio) pour compresser les images directement sur votre ordinateur sans avoir à aller sur le web.

    Avec ce flux de travail, j’optimise mes photos facilement en utilisant uniquement le clavier
    .

    Ou ce flux de travail dans Workflow pour compresser facilement les images à partir de votreiPhone ou iPad, parfait pour “les guerriers de la route “

    .

    Avec ce flux de travail, vous pouvez optimiser les images “sur la route” depuis votre smartphone
    .

    Workflow est une application gratuite disponible uniquement sur iOS, vous pouvez en apprendre davantage à son sujet dans ce livre.

    Comme vous pouvez le constater, les possibilités offertes par l’API sont nombreuses.Aujourd’hui, ils flirtent même avec Zapier, ce qui ouvrira sans aucun doute un monde de possibilités et d’automatisations.

    Comment optimiser les images avec TinyPNG dans WordPress

    C’est probablement l’option qui vous intéresse le plus.

    Je l’ai mis à la fin parce que pour que cela fonctionnevous devez avoir une API (le “code” qu’ils vous envoient lorsque vous remplissez vos coordonnées sur leur page de développeurs)

    .

    Pour optimiser les images de votre site web directement dans WordPress, vous aurez besoin du plugin TinyPNG WordPress.

    Le plugin WordPress TinyPNG est également gratuit
    .

    Une fois installé, vous devrez le configurer dans le chemin de WordPressSettings > Media, en entrant votre API dans la case qu’ils ont préparée pour cela.

    C’est également ici que vous devezdécider quelles images vous voulez optimiser sur votre blog.

    Lorsque vous téléchargez une photo, WordPress la duplique en différentes tailles
    .

    Notez que WordPress crée des vignettes de tailles différentes pour chaque image que vous téléchargez sur votre blog, donc en réalité (si vous ne désactivez pas les options ci-dessus) lorsque vous téléchargez une nouvelle image TinyPNG, il peut avoir à en compresser 4 ou 5, donc votre limite gratuite de 500 images par mois peut durer beaucoup moins longtemps que prévu.

    Mon conseil, en plus de configurer le plugin correctement, est d’avoir une API pour votre usage personnel (à utiliser localement, peut-être avec des photos non liées à votre blog, etc.) et une autre pour votre usage professionnel.

    C’est-à-dire, avec l’email de votre domaine enregistrez-vous sur la page des développeurs de TinyPNG et utilisez cette API qu’ils vous offrent seulement et exclusivement pour votre blog.

    Si vous ne savez pas où stocker toutes ces données (APIs) vous savez que je recommande toujours1Password (Amazon, iBooks) pour avoir tout parfaitement organisé.

    D’ailleurs, le plugin n’a même pas besoin d’être expliqué.Une fois configuré, il vous suffit de télécharger les images sur votre blog comme vous le feriez normalement, et de laisser le Panda faire la magie tout seul, par derrière 🙂

    01.

    Et c’est tout !

    J’espère que ce post vous a été utile et que dorénavant vous commencez à mieux optimiser les images de votre site web, vos utilisateurs (et leurs débits) vous remercieront, et Google vous aimera beaucoup plus 🙂

    .

    Si vous voulez en savoir plus sur la façon d’optimiser votre site web, jetez un coup d’œil à mon guide sur l’AMP.

    5
    //
    5
    (
    6
    ()
    votes
    )

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here