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

Accélérez votre WordPress - Comment enregistrer des images optimisées pour le Web / Guide du débutant

Enregistrez-vous les images mal? 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 Web. Dans cet article, nous allons vous montrer comment enregistrer correctement des images optimisées pour le Web..

Chaque expert en blogging vous dira que les images aident à augmenter 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% de pages vues en moins et une baisse de 16% 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 enregistrer les images correctement?

Lorsque vous enregistrez des images, vous devez prendre en compte deux éléments: format de fichier image, et compression. En choisissant la bonne combinaison, vous pouvez réduire la taille de votre image de 5 fois..

Pour la plupart d'entre nous, les deux seuls formats d'image importants sont JPEG et PNG. Pour simplifier les choses, utilisez les JPEG pour les photos ou les images très colorées, et les PNG pour les 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 n’est pas 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. JPEG, par contre, est un format de fichier compressé qui réduit légèrement la qualité de l’image afin de réduire considérablement la taille du fichier..

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

La prochaine étape est la compression, qui consiste à 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'image Taille de l'image
JPEG optimisé JPEG élevé 33 Ko
TinyPNG optimisé 57 Ko
JPEG Mini optimisé 70 Ko
Max optimisé pour Photoshop 93 Ko
JPEG max non optimisé 119 Ko
PNG optimisé pour Photoshop 135 Ko
PNG non optimisé 145 Ko

Outils de compression d'images pour les blogueurs

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

Adobe Photoshop

Adobe Photoshop est un logiciel haut de gamme doté d'une fonction 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, il vous indiquera é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 une 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 télécharger vos images. Ils vont compresser l'image et vous donner le lien de téléchargement.

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

JPEG Mini

JPEGmini utilise une technologie de recompression qui réduit considérablement la taille des images sans affecter leur qualité perceptuelle. 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 perte de qualité en recherchant les meilleurs paramètres de compression et en supprimant les profils de couleur inutiles..

Windows alternative à ceci est Trimage.

Comme vous pouvez le constater, vous pouvez utiliser plusieurs outils 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, mais la qualité en était affectée. TinyPNG était un gagnant clair 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. Toutefois, l’exécution de deux outils distincts pour télécharger des images peut augmenter légèrement votre charge de travail.

Réflexions finales sur l'optimisation d'image

Si vous n'enregistrez pas d'images optimisées pour le Web, commencez dès maintenant. Cela peut faire une énorme différence sur la vitesse de votre site, et vos utilisateurs vous en remercieront. Bien sûr, la qualité de l’image pourrait diminuer légèrement, mais la plupart des utilisateurs ne le remarqueront pas.

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

Dernier point, mais non le moindre, utiliser un CDN pour diffuser des images sur votre site WordPress peut considérablement accélérer votre site. Consultez cette infographie pour savoir ce qu'est un CDN et utilisez notre guide pour savoir comment configurer 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 enregistrent mal les images? Partagez cet article avec eux afin qu'ils puissent accélérer leur site. Ils vous en remercieront.

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