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 la Marmite, 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 ?