Comment Optimiser Les Images Pour Le Web Avec Squoosh.app

Tu sais probablement déjà ce qu’est l’optimisation des images.

Il est conçu pour compresser les photos sur ton site, afin que les pages ne se chargent pas à une vitesse glaciaire.

Jusqu’à présent, tu as quelque peu ignoré toute l’idée. Jeu équitable — cela ne fait pas une grande différence tant que ton site n’est pas complètement formé.

Mais maintenant, il est temps d’agir. Ton ennemi juré… euh, nous voulons dire… ton plus proche concurrent écrase complètement ton site dans les guerres de performance. Il est temps de riposter.

Squoosh est l’un des meilleurs outils à ta disposition. Il est gratuit, open source et facile à utiliser.

Dans ce guide, nous allons voir comment utiliser Squoosh pour compresser des images et réduire tes temps de chargement. Allons-y !

Comment Optimiser Des Images Avec Squoosh En 30 Secondes

Allons droit au but.

Tu peux commencer à optimiser les images pour ton site très rapidement.

Rends-toi sur https://squoosh.app.

Clique sur la grande tache rose en haut de la page, et sélectionne l’image que tu veux compresser.

Tu entreras ensuite dans un écran de prévisualisation, avec un panneau de paramètres en bas à droite.

Ici, tu peux choisir de redimensionner ton image, réduire la palette de couleurs, changer la qualité, et sélectionner ton type de fichier de sortie préféré.

Ci-dessous, un compteur t’indique à quel point ton nouveau fichier sera plus petit.

À mesure que tu sélectionnes différentes options, tu peux déplacer le curseur au milieu de ton écran pour voir l’effet sur la qualité de l’image. À gauche, une vue agrandie de ton image originale ; à droite, un aperçu de ta version compressée.

Ça a l’air bien ? Télécharge ton image compressée en tapant sur la tache bleue en bas à droite. Elle est prête à être ajoutée à ton site web.

Et voilà, c’est fait.

Astuce Pro : Tu veux accélérer les choses pour la prochaine image ? Appuie sur la petite icône « engrenage » dans le tableau de bord. Cela enregistrera tes paramètres actuels comme un préréglage, que tu pourras charger plus tard en appuyant sur l’autre icône d’engrenage.

Apprendre À Connaître Mieux Squoosh

C’est la version courte, mais il y a beaucoup plus à découvrir sur Squoosh.

Cet outil de compression d’image open-source a été développé par les équipes de Google. Il est disponible à la fois comme application web et comme module complémentaire pour Chrome.

Si tu te sens technophile, tu peux également télécharger Squoosh depuis GitHub et l’exécuter hors ligne via la ligne de commande.

Squoosh prend en charge les formats PNG, JPG, TIFF, GIF et bien d’autres. Chaque version est gratuite, et l’application gère la compression localement. C’est une bonne nouvelle pour la confidentialité, car les images ne quittent jamais ta machine.

Apprendre À Utiliser Squoosh Comme Un Pro

L’autre chose géniale à propos de Squoosh est qu’il offre beaucoup de contrôle. Tu as juste besoin de savoir comment naviguer dans le tableau de bord.

Faisons un rapide tour.

Quand tu charges pour la première fois une image dans Squoosh, tu verras juste quatre options sur le tableau de bord :

Redimensionner

Si tu prévois d’utiliser une image pour une vignette, tu n’as pas besoin de la pleine résolution. Tu peux activer ce basculeur pour changer la taille de l’image.

Mets le nombre de pixels que tu veux, mais laisse les options par défaut sélectionnées sauf si tu as une bonne raison. Assure-toi que « Maintenir le rapport d’aspect » est sélectionné pour éviter toute déformation !

Réduire La Palette

De nombreuses images ne contiennent pas réellement autant de couleurs. Cette option te permet de jeter des teintes pour réduire la taille du fichier.

Le curseur « Dithering » ? Il crée essentiellement un motif de bruit pour dissimuler la palette de couleurs réduite.

Note : Cette technique est mieux utilisée pour les designs plutôt que pour les photos, car les photos peuvent finir par ressembler à de mauvaises photocopies.

Format

Sous l’étiquette « Compress”, tu peux sélectionner un format de sortie pour ton image. Les options se divisent en deux catégories principales.

• Lossy (par exemple, JPG, GIF) : Ces formats éliminent de minuscules parties de votre image pour économiser de l’espace. Généralement, tu ne remarqueras pas la différence, à moins que tu ne recherches une résolution vraiment élevée.
• Lossless (par exemple, PNG, AVIF) : En revanche, les formats sans perte trouvent des moyens de réduire la taille du fichier sans affecter la qualité de ton image.

En règle générale, le format avec perte convient pour les graphiques simples, tandis que le format sans perte est préférable pour les icônes nettes et les photos détaillées.

Qualité

Si tu choisis un format avec perte, tu verras également ce curseur. Il va de 0 (écraser complètement ton image) à 100 (aucun changement).

Avant de sauvegarder ton image, nous te recommandons de déplacer ce curseur et d’observer l’effet dans la zone de prévisualisation. Pour obtenir un fichier petit et agréable, déplace le curseur le plus à gauche possible sans créer d’artefacts laids.

Si tu passes au WebP, tu verras également un curseur « Effort ». Celui-ci contrôle à quel point Squoosh va analyser ton image avant de décider comment appliquer la compression. Choisis un numéro plus élevé si tu as des détails que tu souhaites conserver.

Paramètres Avancés

Selon le format de sortie que tu sélectionnes, tu pourrais avoir accès à plus d’options sous l’onglet « Paramètres avancés ».

À moins que tu n’aies un doctorat en édition d’images, il vaut mieux éviter ces réglages.

Astuces Rapides Pour Tirer Le Meilleur Parti De Squoosh

Globalement, Squoosh est très facile à utiliser. Et honnêtement, la section ci-dessus contient tout ce que tu dois vraiment savoir sur l’application.

Mais nous te voyons, lecteur. Tu veux devenir un dieu de la compression d’images, n’est-ce pas ?

Voici donc quelques astuces pro qui t’aideront à atteindre ce statut immortel.

• Glisser et déposer : Ne t’embête pas avec le menu des fichiers. Glisse simplement ton image directement dans Squoosh.
• Connais tes formats : Utilise WebP pour les navigateurs modernes, MozJPEG pour les photos et OptiPNG pour les graphiques. Souviens-toi, AVIF est le petit nouveau ; vérifie quels navigateurs peuvent le gérer.
• La taille compte : Compresse pour la qualité, et pas seulement pour la taille du fichier. Si ton image passe d’un chef-d’œuvre à un projet d’art de maternelle, prends du recul et ajuste ces paramètres.
• L’effort compte : Augmente le curseur d’effort pour les PNGs et WebP pour extraire chaque dernier bit de la taille du fichier sans impacter dramatiquement la qualité. 
• « Réduire la Palette » est ton ami : Combien de couleurs différentes ton image contient-elle ? Si c’est assez simple, tu peux économiser beaucoup d’espace en déplaçant le curseur « Réduire la Palette » vers la gauche.

Rappelle-toi, chaque Mo économisé signifie moins de temps d’attente pour tes utilisateurs !

Comment Gérer Les Images Du Site Web Pour Une Meilleure Performance

Bien que Squoosh puisse réduire la taille de tes images pour les rendre plus gérables, ce n’est pas une solution universelle.

Suis ces recommandations pour t’assurer que tes images compressées apportent l’amélioration de performance que tu espères !

• Utilise un CDN : Les réseaux de livraison de contenu (CDN) sont optimisés pour les médias, et ils soulagent les serveurs de ton hôte.
• Réfléchis soigneusement aux types de fichiers : Il est facile de rendre toutes les images identiques. Mais ton choix de fichier devrait correspondre aux exigences de chaque image sur ton site.
• Supprime les métadonnées inutiles : Ton image a-t-elle vraiment besoin de transporter des informations sur le lieu et l’appareil photo ? Probablement pas.
• Essaie d’utiliser des sprites : Au lieu d’utiliser une grande image avec un motif répétitif, tu pourrais peut-être utiliser un petit sprite plusieurs fois à la place. Cela pourrait vraiment accélérer les choses !

Si tu es curieux de connaître toutes les manières dont tu peux mettre en œuvre l’optimisation d’image, notre blog regorge de tutoriels utiles. Voici quelques points saillants :

• Adieu, JPG : Voici Comment Optimiser Les Images Pour Le Web Moderne (WebP, SVG, et Plus)
• Comment Réparer 16 Problèmes Courants D’images Dans WordPress
• Problèmes Courants De Téléchargement D’images Dans WordPress Et Comment Les Résoudre (5 Méthodes)

Alternatives à Squoosh : Les Meilleurs Outils de Compression d’Images

Squoosh est un excellent point de départ pour compresser et optimiser les images de ton site web. Cependant, il existe d’autres options :

• TinyPNG : Cette application web compresse instantanément les images tout en conservant une qualité impressionnante. Elle est gratuite pour les lots de 20 images ou moins ; tu peux débloquer plus pour 39 $ par mois.
• ShortPixel : Si tu possèdes un site web WordPress, ce plugin te permet de compresser les images directement depuis ton espace d’administration. Il est gratuit pour jusqu’à 100 images par mois.
• ImageOptim : Pour les propriétaires de Mac. Cette application open-source te permet de compresser des lots d’images sur ton ordinateur. Et c’est totalement gratuit !
• Kraken.io : Cet outil de compression d’images puissant fonctionne un peu comme Squoosh, bien qu’il n’offre pas l’affichage de prévisualisation agréable. Oh, et il est seulement gratuit pour les fichiers jusqu’à 1 Mo.
• JPEGmini : Tu travailles avec beaucoup de photos de haute qualité ? Avec un simple glisser-déposer, cette application de bureau te permet de réduire la taille des fichiers JPG jusqu’à 80 %.

Fais Ton Site Fonctionner Plus Fluidement Aujourd’hui

Optimiser les images est une corvée. Mais cela en vaut la peine lorsque tes pages se chargent à la vitesse de l’éclair. De plus, ce n’est pas trop d’effort lorsque tu disposes d’un outil comme Squoosh.

Bien sûr, les images ne sont pas la seule cause de la lenteur de chargement des pages. Ton plan d’hébergement pourrait en être la cause.

Tu cherches quelque chose qui offre une performance plus fiable ? Chez DreamHost, tous nos plans incluent une garantie de disponibilité de 100% et une bande passante illimitée. Cela signifie que ton site ne vacillera jamais sous la pression.

Envie d’essayer? Inscris-toi aujourd’hui pour ressentir la différence!