Up Accélérez votre WordPress - Comment enregistrer des images optimisées pour le Web

Le guide ultime pour une stratégie efficace de blog des invités en 2018

Sauvegardez-vous les images incorrectement? La plupart des débutants ne savent pas comment enregistrer correctement les images, ce qui peut avoir un impact considérable sur la vitesse du site. Dans cet article, nous vous montrerons comment enregistrer correctement les images optimisées pour le Web.

Chaque expert en blogging vous dira que les images contribuent à accroître l'engagement. Cependant, ce qu'ils ne vous disent pas, c'est que ne pas optimiser les images pour le Web peut ralentir votre site. Selon Strangeloop, un délai d'une seconde peut vous coûter 7% des ventes, 11% moins de pages vues et 16% de réduction de la satisfaction client.

Didacticiel vidéo

Abonnez-vous à WPBeginner

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire.

Comment sauvegarder les images correctement?

Lorsque vous enregistrez des images, vous devez tenir compte de deux choses: format de fichier image, et compression. En choisissant la bonne combinaison, vous pouvez réduire la taille de votre image de 5x.

Pour la plupart d'entre nous, les seuls formats d'image importants sont JPEG et PNG. Pour garder les choses simples, utilisez les fichiers JPEG pour les photos ou les images avec beaucoup de couleurs et utilisez des fichiers PNG pour des images plus simples ou lorsque vous avez besoin d'images transparentes.

Pour ceux qui ne connaissent pas la différence, le format d’image PNG est décompressé, ce qui signifie qu’il s’agit d’une image de meilleure qualité. L'inconvénient est que la taille du fichier est beaucoup plus grande. D'autre part, le format JPEG est un format de fichier compressé qui réduit légèrement la qualité de l'image afin de fournir une taille de fichier nettement inférieure.

Sur WPBeginner, la majorité de nos images sont des JPEG.

La prochaine étape est la compression, ce qui signifie que vous devez utiliser un outil pour enregistrer des images optimisées pour le Web. La compression peut faire une énorme différence.

Voir le tableau ci-dessous qui met en évidence les quelques combinaisons que nous aurions pu utiliser pour enregistrer l'image Strangeloop utilisée dans cet article.

Format d'imageTaille de l'image
Photoshop optimisé JPEG haute33 Ko
TinyPNG optimisé57 Ko
JPEG Mini Optimized70 Ko
Photoshop optimisé JPEG Max93 Ko
JPEG Max non optimisé119 Ko
Photoshop optimisé PNG135 Ko
PNG non optimisé145 Ko

Outils de compression d'image pour les blogueurs

Maintenant que vous avez constaté la différence entre chaque type de compression, vous trouverez ci-dessous comment enregistrer correctement les images optimisées pour le Web et accélérer votre site.

Adobe Photoshop

Adobe Photoshop est un logiciel premium doté d'une fonctionnalité permettant d'enregistrer des images optimisées pour le Web. Ouvrez simplement votre image et cliquez sur le bouton Fichier> Enregistrer pour le Web et les périphériques.

Cela ouvrira un écran de sauvegarde. Sur la droite, vous pouvez définir différents formats d'image. Pour le format JPEG, vous verrez différentes options de qualité. Lorsque vous sélectionnez vos options, vous verrez également la taille du fichier en bas à droite.

Note: Nous comprenons que Photoshop est assez cher. GIMP est une alternative gratuite que les utilisateurs peuvent utiliser. D'autres produits Adobe, tels que Fireworks, peuvent également faire l'affaire.

TinyPNG

TinyPNG est une application web gratuite qui utilise la technique de compression intelligente avec perte pour réduire la taille de vos fichiers PNG. Tout ce que vous avez à faire est d'aller sur leur site Web et de télécharger vos images. Ils compresseront l'image et vous donneront le lien de téléchargement.

Pour les développeurs, ils ont également une API pour convertir automatiquement les images.

JPEG Mini

JPEGmini utilise une technologie de recompression qui réduit considérablement la taille des images sans affecter leur qualité de perception. Vous pouvez utiliser leur version Web gratuitement ou acheter le programme pour votre ordinateur. Ils ont également une API payante pour automatiser le processus pour votre serveur.

ImageOptim

ImageOptim est un utilitaire Mac qui vous permet de compresser des images sans perdre de qualité en trouvant les meilleurs paramètres de compression et en supprimant les profils de couleur inutiles.

L'alternative à Windows est Trimage.

Comme vous pouvez le constater, il existe plusieurs outils que vous pouvez utiliser pour optimiser les images pour le Web. Lors de l'utilisation de la compression Photoshop, nous avons constaté les meilleurs résultats en termes de taille, quelle que soit la qualité. TinyPNG était un gagnant évident pour la sauvegarde de tout type de PNG sur le Web.

Certains suggèrent que vous pouvez utiliser une combinaison de TinyPNG ou JPEG Mini et Image Optim pour des résultats encore meilleurs. Cependant, l'exécution de deux outils distincts pour télécharger des images peut augmenter un peu votre charge de travail.

Réflexions finales sur l'optimisation de l'image

Si vous n'enregistrez pas les images optimisées pour le Web, commencez à le faire maintenant. Cela peut faire une énorme différence sur la vitesse de votre site, et vos utilisateurs vous en remercieront. Assurez-vous que la qualité de l'image diminue légèrement, mais la plupart des utilisateurs ne le remarqueront pas.

Si vous recherchez des images de qualité, consultez notre guide sur la façon de trouver des images libres de droits pour vos articles de blog.

Last but not least, utiliser un CDN pour diffuser des images pour votre site WordPress peut considérablement accélérer votre site. Consultez cette infographie pour voir ce qu'est un CDN et utilisez notre guide sur la configuration de CDN pour votre site. Nous utilisons MaxCDN pour notre site.

Nous espérons que vous avez trouvé cet article utile.

Avez-vous des amis blogueurs qui sauvent des images erronées? Partagez cet article avec eux afin qu'ils puissent accélérer leur site. Ils vous en remercieront.

Si vous avez des questions, veuillez laisser un commentaire ci-dessous. N'oubliez pas de nous suivre sur Twitter et Google+

Voir la vidéo: Blog de Faire Connaitre son: la Méthode Ultime en 5 Étapes

Like this post? Please share to your friends:
Laisser un commentaire

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: