10 façons de réduire la taille de vos images
Publié: 2018-02-15Nous aimons tous avoir un site Web avec des images de qualité pour capter l'attention de nos lecteurs, n'est-ce pas ?
Si vous avez une page où vous proposez des services, vous vendez un produit ou vous travaillez avec un blog ; vous avez sûrement des dizaines d'images : dans les articles, dans les pages statiques ou les produits, par exemple.
Lorsque nous parlons d'images pour des sites Web, nous n'avons pas à penser uniquement au nombre d'images que nous allons ajouter. Nous devons également tenir compte de leur taille et donc de l'espace que ces fichiers utiliseront sur le serveur.
Pour cette raison, dans cet article, nous parlerons de dix outils que nous pourrions utiliser pour réduire la taille des images que nous utiliserons sur notre page Web, notre blog ou notre e-commerce.
- 1 · Pourquoi réduire la taille des images sur votre site ?
- 2 · Dix outils pour réduire la taille des images de votre site web
- 2.1 1) Pixel court
- 2.2 2) Optimiseur d'image EWWW
- 2.3 3) Compresser JPG et PNG
- 2.4 4) Compressor.io
- 2.5 5) Optimizilla
- 2.6 6) WP Smush
- 2.7 7) Kraken.io
- 2.8 8) Imagify Image Optimizer
- 2.9 9) Photoshop
- 2.10 10) ÉMEUTE
- 3 · Comment télécharger vos images sur Mailrelay
- 3.1 Publications associées :
· Pourquoi devriez-vous réduire la taille des images sur votre site ?
Avant de commencer à parler de chacun de ces outils, je veux expliquer l'importance de réduire la taille des images de votre site.
De nos jours, il est essentiel que les sites soient rapides, c'est-à-dire qu'ils ne mettent que quelques secondes à se charger (idéalement moins de 3 secondes).
Une bonne optimisation des images de votre site est essentielle pour trois raisons :
- La taille de l'image affecte la vitesse de chargement du site , et nous venons de voir l'importance d'avoir un site Web rapide.
- Le temps de chargement est l'un des principaux facteurs qui affectent le référencement. Un site Web rapide sera mieux classé dans Google qu'un site Web lent (il peut toujours y avoir des exceptions, mais c'est la règle générale).
- Les images du site doivent être adaptées à la largeur de la page. Pour donner un exemple, je vois souvent de nombreuses pages utilisant des images beaucoup plus grandes que l'espace disponible. Si l'espace fait 300px de large, l'administrateur ne doit pas télécharger une image avec 1000px. C'est une erreur courante sur de nombreuses pages Web. Mon conseil est d'adapter la taille de toutes les images de votre site.
· Dix outils pour réduire la taille des images de votre site web
1) Pixel court
Le but de cet outil est d'améliorer les performances de nos sites, en réduisant la taille des images.
Il est disponible en version web et en plugin pour WordPress, proposant trois types de compression de photos :
- La compression avec perte. C'est la meilleure option pour la plupart des utilisateurs. Cette option permet un équilibre entre optimisation et qualité d'image.
- Compression brillante. C'est la meilleure option si vous recherchez un outil axé sur Google Insights, mais que vous ne vous inquiétez pas de la vitesse de chargement. Cette option permet une compression acceptable, avec une qualité d'image. Plus le fichier est compressé, plus la qualité de l'image finale sera compromise.
- Compression sans perte. La dernière option permet de compresser l'image pixel par pixel, par rapport aux images originales, mais offre une réduction beaucoup plus faible, par rapport aux fichiers traités avec les deux options.
La version Web de ShortPixel vous permet de réduire les images par lots de 50 fichiers.
Quant au plugin WordPress, il est très simple d'utilisation, et il est très léger. Il vous suffit de l'installer, et le plugin compressera toutes les images de votre site ainsi que vos fichiers PDF en un seul clic.
De plus, les nouvelles images que vous téléchargez seront redimensionnées automatiquement, sans qu'aucune autre action ne soit nécessaire.
Enfin, il faut expliquer qu'il s'agit d'un outil « freemium ». C'est-à-dire que vous pouvez compresser 100 images par mois gratuitement. Si vous dépassez ce montant, il propose plusieurs forfaits payants.
https://shortpixel.com/
Optimiseur d'image ShortPixel
2) Optimiseur d'image EWWW
Il s'agit d'un outil développé dans le but d'optimiser les images pour les sites Web, mais dans ce cas, destiné aux sites qui utilisent l'hébergement mutualisé.
Comme dans le cas de ShortPixel, EWWW Image Optimizer a une version Web et également un plugin pour WordPress ainsi que plusieurs plans payants.
EWWW Image Optimizer vous permet d'augmenter la vitesse de chargement de vos pages, en optimisant toutes les images de votre site.
Cette augmentation de la vitesse peut vous aider à obtenir de meilleures positions dans les moteurs de recherche et également à améliorer les taux de conversion (augmentation des ventes ou de nouveaux abonnés, par exemple).
EWWW Image Optimizer peut optimiser automatiquement toutes les images que vous téléchargez. Il peut également optimiser toutes les images déjà hébergées sur le serveur. De plus, il sera possible de convertir tous vos fichiers au format le plus recommandé.
En ce qui concerne les options de compression, vous pouvez choisir de compresser par pixels ou des options de compression élevées sans perte de qualité.
https://ewww.io/
Optimiseur d'image EWWW
3) Compresser JPG et PNG
Cet outil en ligne vous permettra de compresser un lot contenant jusqu'à 20 images au format JPG et PNG.
Son utilisation est très simple : il suffit de télécharger ou de faire glisser les fichiers. Lorsqu'elles seront prêtes, il vous suffira de télécharger les images compressées séparément ou compactées dans un fichier ZIP.
http://compressjpeg.com/es/
4) Compressor.io
C'est l'un de mes outils préférés lorsque j'ai besoin de compresser quelques images à télécharger sur mes pages.
Il est disponible dans compresseur.io, et son utilisation est très simple. Il vous suffit de charger ou de faire glisser l'image que vous souhaitez compresser, d'attendre la fin du processus (cela ne prend que quelques secondes) et de télécharger les fichiers compressés.
De plus, une fois le processus terminé, l'outil vous montrera le pourcentage de compression par rapport à l'image d'origine.
Notez qu'il vous permet de compresser des fichiers dans quatre formats différents : JPEG, PNG, GIF et SVG.
5) Optimizilla
Il s'agit d'un logiciel d'optimisation d'images en ligne qui utilise une combinaison intelligente avec différents algorithmes de compression pour réduire la taille des images au format JPEG et PN, tout en conservant la qualité des fichiers.
Il vous permet de travailler avec jusqu'à 20 images à la fois, en contrôlant la compression et en comparant également les images.
http://optimizilla.com/es/
6) WP Smush
C'est un plugin WordPress que j'installe toujours sur mes sites. Le nom correct de ce plugin est Smush Image Compression and Optimization.
En utilisant ce plugin, vous pourrez redimensionner, optimiser et compacter toutes vos images, à la fois celles que vous importez et celles que vous avez ajoutées à votre site avant d'installer le plugin.
À mon avis, la meilleure fonctionnalité de ce plugin est qu'il vous permet de configurer la largeur et la hauteur par défaut pour toutes vos images. S'ils dépassent ces dimensions, le plugin réduira automatiquement les fichiers.
En outre, il dispose d'une version payante avec des fonctionnalités supplémentaires, telles que la possibilité de compresser plus d'images en même temps ou d'enregistrer une sauvegarde de toutes les images originales.
Smush - Images à chargement paresseux, optimisation et compression d'images
7) Kraken.io
Kraken Image Optimizer est un outil disponible en version en ligne, mais il dispose également d'un plugin pour WordPress ou Magento.
Le principal avantage de cet outil est pour les utilisateurs qui ont besoin de : Diminuer l'utilisation de la bande passante et de l'espace, ce qui améliorera le temps de chargement du site Web.
Le plugin vous permet d'optimiser et de redimensionner vos nouvelles images, ainsi que celles déjà stockées sur le serveur.
Ce logiciel prend en charge les fichiers JPEG, PNG et GIF et la taille maximale du fichier est de 32 Mo.
https://kraken.io/
Optimiseur d'image Kraken.io
8) Imagify Image Optimizer
Comme pour les autres outils précédents, Imagify est disponible dans une version Web et un plugin pour WordPress.
Grâce à ce plugin, vous pourrez : Améliorer la vitesse de chargement de votre site, gagner du temps sur les tâches d'optimisation des images et vérifier la qualité des fichiers que vous utilisez.
Le plugin peut compresser et redimensionner votre bibliothèque WordPress en un seul clic, et il est également compatible avec d'autres options, telles que WooCommerce et NextGen Gallery.
https://imagify.io/
Imagify - Optimisez vos images et convertissez WebP
9) Photoshop
Pour terminer ma revue de ces dix outils de compression d'images, je vais vous parler de deux logiciels.
Si vous aimez travailler dans l'environnement Adobe, Photoshop propose une option pour optimiser les images à utiliser dans les sites Web.
Concrètement, vous trouverez cette fonctionnalité sur « enregistrer sur le web ou « exporter vers le web » et elle vous permet de choisir les dimensions, la qualité et le format des images.
Il vous suffit d'ajuster l'image en fonction de vos besoins et de télécharger les fichiers compressés.
10) ÉMEUTE
Enfin, je veux parler de RIOT, un logiciel qui vous permet d'obtenir le bon équilibre entre la qualité et la taille de vos images.
Cet outil vous permet de vérifier la qualité des fichiers compressés beaucoup plus rapidement, car son panneau est divisé en deux parties : une zone avec l'image originale et une autre avec la version optimisée, afin que vous puissiez vérifier les différences côte à côte.
Quant aux formats, il permet la compression de fichiers au format JPG, GIF et PNG. Il peut changer la taille des images en utilisant six algorithmes différents.
· Comment télécharger vos images sur Mailrelay
Maintenant que vous connaissez ces dix outils pour compresser et optimiser vos images, je souhaite vous expliquer étape par étape comment télécharger ces images sur votre compte Mailrelay et les inclure dans vos newsletters.
La première chose que vous devez savoir est que Mailrelay est un logiciel de marketing par e-mail qui vous permet d'envoyer des newsletters et de gérer vos listes de diffusion. Vous pouvez télécharger les images que vous souhaitez utiliser directement sur votre compte, mais je vais vous montrer comment le faire en utilisant une plate-forme CMS ou un blog.
En ce sens, je vous recommande d'héberger les images que vous souhaitez utiliser dans vos newsletters en externe. Alors maintenant, je vais vous expliquer comment les importer dans votre WordPress.
La première chose à faire est d'aller dans la galerie média ou le blog de votre site. Ici, vous pouvez gérer toutes les images téléchargées sur votre site et également ajouter de nouveaux fichiers.
L'étape suivante consiste à importer vos images, une fois qu'elles ont été optimisées à l'aide de certains des outils que nous avons présentés dans la section précédente.
Vous pouvez les faire glisser ou les déposer directement en cliquant sur « Ajouter un nouveau » et en les sélectionnant sur votre ordinateur.
Après avoir chargé l'image, vous pouvez la sélectionner pour ouvrir ses détails.
Survolez l'image, faites un clic droit et sélectionnez l'option "copier l'adresse de l'image".
Avec l'URL exacte de l'image, ouvrez votre compte Mailrelay et créez une nouvelle newsletter. Si vous avez déjà créé le message, modifiez-le simplement et incluez l'image.
Pour l'ajouter, cliquez sur le bouton « Image » et vous verrez l'écran suivant :
Dans cette fenêtre, vous pouvez gérer les propriétés de vos images. Pour en ajouter une nouvelle, collez simplement l'adresse que vous avez copiée à l'étape précédente. Lorsque vous faites cela, vous verrez l'image que vous allez importer.
Que pouvez-vous configurer les propriétés de l'image ?
- Texte alternatif. C'est le texte que l'utilisateur verra lorsque l'image n'est pas chargée correctement. Il peut arriver que, selon le logiciel de messagerie, l'image ne soit pas chargée avec succès. Nous vous recommandons d'ajouter l'URL de votre site pour éviter les problèmes.
- Taille (largeur et hauteur en pixels). Ici, vous devez insérer la taille de votre image. Ma recommandation est qu'il ne dépasse pas 600px de large afin qu'il s'affiche correctement sur les smartphones. En fait, si vous pouvez utiliser une largeur de 400 ou 500px, ce sera encore mieux.
- Bord. Taille de la bordure en pixels. Je laisse généralement ce champ vide, mais si vous souhaitez ajouter une bordure, vous devez la configurer dans cette option.
- Espace horizontal et vertical. Vous pouvez configurer l'espace horizontal et vertical de l'image en pixels.
- Alignement. Sélectionnez l'alignement à gauche ou à droite de l'image.
Après l'avoir configuré selon le design de votre newsletter, vous auriez quelque chose comme ceci :
Il ne vous reste plus qu'à cliquer sur le bouton « Accepter » pour insérer votre image dans la newsletter.
J'espère que cette revue de 10 outils de compression d'images vous sera utile. Vous n'avez qu'à choisir l'option qui correspond le mieux à vos besoins.
Avant de terminer cet article, je voudrais souligner l'importance d'optimiser toutes vos images pour réduire le temps de chargement de votre site et son classement sur Google.
Après tout, je suis sûr que vous voulez être dans les premières pages pour vos mots-clés principaux.