Optimisation PNG améliorée avec l’intégration de Pngquant

Kevin van Zonneveld

Cofondateur · Amsterdam, Pays-Bas · Afficher la bio

Mise à jour : cet article décrit la version de 2014. Le paramètre png_tool présenté ci-dessous a été supprimé en 2015 EN (English). Pour les intégrations actuelles, utilisez la documentation de /image/optimize ; lossy: true active l’optimisation PNG avec perte. L’exemple historique ci-dessous n’est pas valide avec l’API actuelle.

Quelques clients nous ont signalé que notre optimisation PNG laissait à désirer. Même si nous parvenions déjà à réduire la taille des PNG volumineux d’un facteur huit, ces clients ont indiqué que des services spécialisés comme TinyPNG⁠ et kraken.io⁠ donnaient des résultats encore meilleurs, en particulier pour les images plus petites.

De toute évidence, si ces services parviennent à réaliser des économies plus importantes, c’est aussi ce que nous devrions viser.

Nous avons commencé à étudier différents outils et avons finalement retenu pngquant⁠. Aujourd’hui, nous le lançons comme extension de notre Robot /image/optimize existant. Nous ne faisons toutefois pas de pngquant l’option par défaut, car cela romprait la rétrocompatibilité, mais aussi parce que cet outil n’est pas capable de préserver les métadonnées.

Préserver les métadonnées relève du bon civisme sur Internet, car elles peuvent contenir des informations de droits d’auteur. C’est aussi pourquoi, si vous choisissez d’utiliser pngquant, nous rendons obligatoire le réglage de l’option preserve_meta_data sur false, en plus de la spécification de png_tool. Nous voulons éviter que des personnes suppriment accidentellement les informations de propriété de leurs fichiers.

Voici à quoi pourrait ressembler un Step dans vos Templates :

optimize: {
  robot             : "/image/optimize",
  use               : ":original",
  preserve_meta_data: false,
  png_tool          : "pngquant"
}

Comme avec tous les Robots, vous pouvez brancher ce Robot directement sur un autre, comme des LEGO®. Ainsi, vos miniatures vidéo, avatars téléversés, etc. seront automatiquement stockés de manière optimisée.

Après avoir testé cette nouvelle fonctionnalité avec certains de nos clients, nous avons pu atteindre des réductions de 65 % pour les images de taille moyenne, soit à peine quelques points de moins que des services comme TinyPNG et kraken.io.

Simon⁠, de Yarnee, nous a confié ceci :

Avec Yarnee, vous pouvez créer des collections de médias qui, autrement, se perdraient dans des services basés sur des fils d’actualité comme Facebook. Nous utilisions déjà le Robot /html/convert de Transloadit pour capturer des aperçus, mais pour être acceptés par Facebook, ils devaient être réduits en taille. Grâce à la nouvelle compression de Transloadit, nous avons réussi à faire fonctionner tout cela à merveille !

Nous continuerons bien sûr à optimiser pour grappiller aussi ces derniers pourcents, mais nous tenions déjà à vous annoncer la nouvelle aujourd’hui. 😄

Bonne utilisation !