Publié par le 29 février 2016 • 80 Commentaires

Savez-vous ce qui le plus long à charger sur une page ?

Ce ne sont ni les fichiers CSS, ni les fichiers Javascript.

Ce sont les images.

On cherche souvent à optimiser la vitesse de son site en optimisant le code (comme on a pu le voir avec le fichier .htaccess) mais il est possible d’y parvenir sans trop se casser la tête.

Avant de vous parler du plugin WordPress que j’utilise pour réduire significativement le poids des images de la Marmite, je tiens à vous transmettre…

3 Bonnes habitudes à prendre avec les images

Lorsque l’on gère des sites, il est important de toujours penser aux visiteurs. Dans mon cas, j’essaie de toujours faire ce qui est le mieux pour vous.

Par exemple, au lieu de vous parler directement d’un plugin ou d’autre chose, je tiens à vous transmettre des informations qui vous seront utiles à l’avenir.

Ça prend un peu plus de temps mais je sais qu’à long terme, c’est ce qui fera la différence 😉

Allez, trêve de bavardage. Passons à ces 3 conseils !

1. N’envoyez pas d’images surdimensionnées

Que vous soyez ou non un adepte de la photo, les fichiers créés par un appareil numérique sont aujourd’hui très volumineux.

Ils peuvent peser de 4 à 8Mo, parfois plus ! Tout dépend de vos réglages.

Pour les imprimer ou pour les retoucher sur votre ordinateur, c’est génial.

Par contre pour les diffuser sur le web, c’est tout de suite plus embêtant.

En effet, si une page doit charger une dizaine d’images de 8Mo, vos visiteurs ont intérêt d’être raccordés à la fibre optique…

La meilleure chose à faire est de redimensionner vos images avant de les envoyer sur votre site. 2000 pixels de largeur sont plus que correct.

N’importe quel éditeur d’image peut s’en charger mais à la longue, j’avoue que cela peut s’avérer fastidieux.

Sur la Marmite, les images font toujours 600 pixels de large dans les articles (pas besoin de 2000 pixels de largeur). Du coup, j’utilise le code suivant pour que WordPress redimensionne automatiquement les images envoyées :

/* Ajout d'une nouvelle taille d'image
 * nommée "image-recette" de 600px de large
 */

add_action( 'after_setup_theme', 'wpm_image_recette' );
function wpm_image_recette() {
    add_image_size( 'image-recette', 600 );
}

/* Ajout dans la liste des tailles d'images
 */

add_filter('image_size_names_choose', 'wpm_image_sizes');
function wpm_image_sizes($sizes) {
    $addsizes = array(
    "image-recette" => __( "Image Recette")
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
}
Code à placer dans functions.php du thème enfant

La seconde partie du code permet d’ajouter l’image générée dans la liste des tailles disponibles :

image-liste-taille-wordpress

Ce petit bout de code ne mange pas de pain mais il vous fera gagner de précieuses secondes, c’est certain 😉

Choisissez le bon format de fichier

Vous connaissez certainement les deux principaux formats d’images disponibles à l’heure actuelle :

JPG et PNG.

Savez-vous comment ils se différencient ? C’est un peu technique mais cela réside dans la façon dont ils sont encodés.

En gros, comment les images sont enregistrés dans le fichier.

Cette divergence fait que certaines seront moins lourdes en JPG qu’en PNG et vice versa.

Pour vous aider à choisir le meilleur format, retenez que :

  • JPG = Photos, images dotés de milliers de couleurs ou de nuances de gris
  • PNG = Schémas, images simples, logos ou images dotées de transparence

Vous pourrez en savoir plus sur les formats d’images grâce à cette infographie trouvée chez Korben (en anglais).

Pour vous en convaincre, convertissez une photo prise avec votre téléphone, convertissez-là en PNG et regardez son poids.

Compressez les images avant de les envoyer

Avant d’envoyer des images sur un site, je prends toujours soin de les compresser.

Par exemple, après en avoir retouché une sur Photoshop, j’utilise toujours Fichier > Enregistrer pour le web pour trouver le meilleur compromis entre poids et qualité :

enregistrer-pour-web-photoshop

Passez en mode 2 vignettes et regardez le poids final en bas à gauche. Vous pouvez jouer avec les formats et les réglages en haut à droite (et éventuellement la taille en bas à droite).

Il est évident qu’il ne faut pas trop dégrader la qualité, sinon le rendu sera horrible.

Si vous êtes sur Mac, je vous conseille l’utilitaire ImageOptim pour compresser davantage sans perdre en qualité.

Voilà pour les conseils de base. Toutefois, vous allez me dire que cela peut être assez contraignant à la longue.

Et vous aurez raison !

De plus, comment faire avec les fichiers déjà présents dans votre bibliothèque de médias ?

C’est là qu’intervient…

Imagify, le service qui va compresser vos images comme jamais

Imagify

Si vous en avez marre de faire des manipulations sans arrêt, la suite de cet article va vous plaire. Vous pourrez même vous passer des 3 conseils cités auparavant !

En effet, l’équipe derrière le plugin de cache WP Rocket a lancé un nouveau service nommé Imagify.

Quand on y réfléchit bien, ce service est la suite logique de WP Rocket. Au lieu d’y intégrer la compression d’images, ils ont préféré développer un service en ligne (Saas).

Cela à l’avantage de pouvoir être utilisé par n’importe quel type de site (et même manuellement).

Alors vous allez me dire que ce genre de chose existe déjà. On peut citer TinyPng, WP Smush ou encore Kraken.

Vous avez tout à fait raison mais ce n’est pas pour ça qu’il ne faut pas se lancer. Il y a toujours des choses à améliorer.

Le moins que l’on puisse dire est qu’ils ont bien fait car selon ce test paru en décembre 2015, Imagify est désigné comme le meilleur service de compression d’images.

Ça me rappelle un certain plugin de cache 😉

Comment fonctionne Imagify

Je vous le disais tout à l’heure, Imagify est un service. C’est à dire qu’il n’est pas uniquement disponible sous forme d’extension. N’importe qui peut donc s’en servir.

Le service en ligne

Pour l’utiliser, il suffit de se rendre sur Imagify pour commencer immédiatement. Je vous conseille toutefois de créer un compte gratuit pour bénéficier de davantage de fonctionnalités.

Compression de service Imagify

Une fois sur le site, il suffit de choisir un mode de compression puis de glisser déposer ses images dans la zone de droite.

Pour mon test, vous pouvez voir que le gain de compression est de :

  • 1,16% en mode normal
  • 18,49% en mode agressif
  • 33,76% en mode ultra

Suite à l’optimisation, il ne reste plus qu’à les télécharger en cliquant sur le bouton « Download » situé à droite. On peut aussi toutes les récupérer dans un fichier .zip en cliquant sur « Download all optimized files ».

Notez qu’avec un compte gratuit, vos images ne seront conservées que 24 heures (contrairement à 1h sans compte).

L’extension WordPress gratuite

Plugin WordPress Imagify

Si vous voulez que la compression des images soit automatisée, il va falloir opter pour l’extension.

Ainsi, toutes les images envoyées sur votre site seront compressées à la volée, c’est à dire dès leur mise en ligne.

C’est un gain de temps non négligeable car il n’y aura plus besoin de s’occuper de toutes les tâches rébarbatives dont nous avons parlé précédemment.

Pour ce faire, il vous suffit d’installer Imagify depuis le répertoire officiel de WordPress.

Avec un compte gratuit, vous aurez le droit à 25Mo de compression par mois. Si vous bloguez de temps en temps, cela sera amplement suffisant.

Pour avoir installé deux autres plugins similaires, je peux vous dire que la mise en route est bien plus aisée avec Imagify (le plugin est aussi en français).

Ce que j’apprécie avec cette extension, c’est que l’on est guidé pas à pas (comme sur WP Rocket) :

Activation Imagify

Vous allez devoir créer un compte et entrer votre clé API (via le menu API) pour connecter le plugin à votre compte.

Voyons à quoi ressemblent les réglages :

Réglages du plugin Imagify

Les options disponibles sont assez simples. Vous pourrez :

  • Choisir la puissance de la compression (Normal, Agressif ou Ultra)
  • Activer l’optimisation automatique (laissez coché)
  • Conserver les images d’origine (laissez coché également)
  • Redimensionner automatiquement les images trop grandes (2000 pixels seront très bien mais vous pouvez mettre moins selon votre site)
  • Garder les données EXIF, c’est à dire la date de la photo, l’appareil photo utilisé et d’autres informations (sauf cas exceptionnel, ne cochez pas cette case)
  • Sélectionner les tailles d’images à compresser
  • Masquer le menu Imagify dans la barre d’outils

Concernant les tailles d’images à cocher, sélectionnez bien thumbnail, medium, medium_large et large en plus des tailles dont vous avez besoin.

Même si cela consomme du crédit de compression, WordPress pourra charger ces images sur des petits écrans.

Intéressons-nous à présent au mode d’optimisation en masse. Cette fonctionnalité permet de traiter toutes les images présentes sur son site.

Rendez-vous dans Médias > Optimisation en masse pour afficher la page suivante :

Optimisation en masse dans Imagify

Dans le cas de WPMarmite, on peut voir que le poids des images a été divisé par 2 !

Je pense que le résultat aurait pu être encore meilleur si mes fichiers n’avaient pas été préalablement optimisés avant l’envoi.

Concernant l’utilisation, encore une fois c’est assez simple. Sélectionnez un mode de compression et cliquez sur « Imagif'em all » (soit Imagifiez-les toutes).

Vous pouvez voir « qu’imagifier » est même devenu un verbe !

Si jamais vous désirez optimiser des images au cas par cas, rendez-vous dans la bibliothèque de médias pour retrouver une colonne Imagify.

Bibliothèque de médias avec Imagify

Grâce à elle, vous y trouverez les statistiques de compression de chaque image, vous pourrez les optimiser dans d’autres modes ou restaurer l’image d’origine (si vous avez coché l’option dans les réglages bien sûr).

Répondons maintenant à la question que vous vous posez certainement.

Combien coûte Imagify ?

Jusqu’à présent, je vous ai dit que 25Mo de compression vous étaient offerts chaque mois.

C’est très bien lorsque l’on a un petit blog mais si vous avez besoin de plus de ressources, il faudra opter pour une de leurs offres. Les voici en détail :

Les tarifs d'Imagify

Comme vous pouvez le voir, ce sont des abonnements mensuels (il est possible de régler annuellement pour obtenir deux mois gratuits).

Si la formule par abonnement ne correspond pas à vos besoins, vous pouvez acheter des crédits de 250Mo (3,49$), 500Mo (5,99$) ou 1Go (9,99$).

Ces offres à l’unité sont intéressantes si vous avez pas mal d’images à traiter dans votre bibliothèque de médias. Pour les trouver, allez sur cette page une fois que vous aurez créé votre compte gratuit.

Conclusion

Vous l’aurez compris, je vous recommande grandement d’installer l’extension Imagify pour optimiser les images de votre site.

Si vous bloguez une à deux fois par semaine, l’offre gratuite vous conviendra amplement (à condition de ne pas envoyer des images de 5Mo !).

Au pire des cas, optimiser toute votre bibliothèque vous coûtera moins de 10$ (cela représente environ 6000 images).

Pour les plus voraces d’entre vous, optez pour un abonnement et dormez sur vos deux oreilles 😉

Avez-vous déjà prêté attention à la compression des images sur votre site ? Si oui, que pensez-vous d’Imagify ?