Ce site a pour but de fournir des techniques et outils pour optimiser vos sites Internet, et particulièrement la compression des images aux formats PNG et JPG. ScriptPNG et ScriptJPG sont des outils pour réduire le poids de vos images Web avec ou sans pertes.
ScriptPNG - ScriptJPG - Outils - Actualités: Twitter - Google+
Je note dans ce document toutes les évolutions du ScriptPNG, du ScriptJPG (ainsi que les autres outils) et les idées pour les améliorer. Je tenterais de le mettre à jour lorsque l'un des scripts aura évolué de manière significative.
ZopfliPNG est un nouvel outil développé par Lode Vandevenne, ingénieur chez Google, qui a associé ses travaux sur PNG avec l'algorithme de compression Zopfli. Je soumets l'outil à des images spéciales, dont les caractéristiques permettent de démontrer le potentiel de réduction.
Une méthode applicable sur des sites modernes qui utilisent des sliders
avec des images de type photographie, ou icônes PNG de haute définition; elle consiste à intégrer l'arrière-plan et à convertir efficacement en JPG pour obtenir un excellent rapport qualité / poids.
A few tests with WebP format using cwebp 0.2.1 encoder and PNG converter, which compare the lossy way (vs. PNG-8 quantification), and the lossless one (vs. PNG reductions / compression). Should you have to choose WebP now or just convert your PNG to PNG-8?
ScriptCX-c est un outil qui vous permet d'optimiser les PNG et JPG depuis le menu contextuel sur un dossier: il liste les fichiers présents dans le dossier (et sous-dossier), et peut lancer trois routines d'optimisation avec ou sans pertes visuelles: simple et rapide.
Conçue par Frédéric Kayser, cette vidéo de présentation du format PNG synthétise bien les caractéristiques et montre les facteurs déterminants que doit travailler un bon outil d'optimisation pour arriver à réduire le poids des images PNG.
Dans ce test, je tente d'inclure 20 dessins SVG via CSS, en compressant très fortement le CSS avec ScriptGZIP (Zopfli), et en appliquant une mise en cache grâce à la modification des entêtes HTTP. Le fichier obtenu nécessite alors 3,8 Ko seulement pour son chargement.
Un test de mon utilitaire PDFWriteCL, qui formate le PDF fournit, et qui permet une ré-écriture complète du fichier; cela permet de diminuer fortement le poids du fichier, particulièrement en appliquant la compression Zopfli. Ne fonctionne pas (encore) forcément sur les mobiles.
L'algorithme de compression Zopfli a récemment été déployé en open source. Il n'a pas tardé a être intégré dans ScriptGZIP, et c'est maintenant à ScriptPNG d'en profiter pour maximiser la compression des PNG. Il est donc désormais intégré sur les routines d'optimisation.
Le ScriptPNG propose à partir de la version 27.02.2013 une recherche vraiment têtue du meilleur paramètre pour PNGOUT. Cette option, aux résultats totalement aléatoires, permet dans certains cas de grignoter des octets supplémentaires.
Durant mes nombreux tests, il semblerait que les PNG Truecolor+alpha (ou PNG-32, PNG24+Alpha) s'optimisent mieux de manière indépendante, en séparant la zone RVB du Canal Alpha. La méthode décrite ici ne devrait être utilisée en production, il s'agit, pour le moment, de simples tests.
Un lecteur m'a récemment demandé s'il était préférable d'utiliser ScriptGZIP avant ou après ScriptPNG, ou autrement dit, s'il faut appliquer la compression GZIP sur un PNG optimisé ou sur un PNG pas encore optimisé. Cette confusion me rappelle un point important à souligner.
Un article écrit en 2005, concernant la mise en valeur d'un contenu dans HTML, et réactualisé au goût du jour: quelques conseils pour pratiquer un référencement de contenu pertinent, des moyens pour promouvoir votre projet et de gagner ainsi en visibilité.
Le format SVG peut contenir certaines données inutiles pour sa restitution. SVGWriteCL permet de compacter ou de convertir un SVG afin que celui-ci dispose d'une restitution identique, mais avec un poids nettement allégé. Il peut également intégrer un SVG dans un PDF.
Ancien mais incroyablement puissant, le SVG est tout à fait d'actualité: à l'heure du tactile, du Responsive Web Design, de la mode des icônes épurées de complexité, le SVG est le format idéal, et les atouts ne manquent pas: dimensionnement, poids, performance, et langage XML.
Une petite brève pour mettre un point sur le PNG, et particulièrement sur sa convention de nommage particulièrement archaïque: pourquoi tant de noms différents, à quoi correspondent-ils, et pourquoi beaucoup d'utilisateurs (et d'auteurs de livres) écrivent un peu n'importe quoi.
GIF, PNG ou JPG: vous hésitez sur le format? Vous souhaitez optimiser l'intégration, la qualité ou la performance de votre site? Cet article va vous permettre d'optimiser vos images pour le Web en suivant quelques principes simples.
Les PNG8 ne sont pas tous identiques selon le logiciel utilisé; la différence se situe sur la diffusion des couleurs dans l'image. Ainsi il est possible d'avoir des rapports qualité / poids très variables. Avez-vous choisi le meilleur compromis pour vos images?
Le ScriptCX est un outil qui succède à mon ancien Fast Image Optimizer
. Plus puissant et plus flexible, il dispose des dernières évolutions du ScriptPNG et du ScriptJPG, et hérite également d'un meilleur multi-processus
. Il est pensé pour les intégrateurs Web.
Si vous avez des images volumineuses, adaptez votre contenu selon le navigateur ou le mobile de destination. Vous pouvez créer des versions différentes de vos images (JPG, ou WebP pour Chromium), ou encore des images aux définitions et qualités amoindries pour les mobiles.
Vous souhaitez rendre vos PNG transparents pour IE6, sans utiliser de hack, ni javascript, ni aucune autre ressource que PNG? Vous n'aimez pas le résultat en convertissant en PNG8, notamment au niveau des bordures de l'image? Regardez cette video d'illustration qui vous explique ma méthode.
This test shows those online PNG Optimizers: SmushIt, PunyPNG and Kraken; they are tested with special files (from PNG Test Corpus) to determine their potential to find the best settings automatically — results in Bytes, reductions, compression etc.
Dans ce test, j'expérimente le format mid, un vieux classique qui peut accompagner certaines vidéos de démonstrations. Très ancien mais particulièrement léger, il est également fortement compressible; il est possible de convertir certaines mélodies avec un poids inférieur au Ko.
Cet article vous montre comment créer des vidéos optimisées pour le Web avec l'encodeur VP8, et le format conteneur WebM: comment effectuer les paramétrages pour obtenir des fichiers au rapport qualité / poids adapté pour votre site.
Modifier les entêtes HTTP va permettre de limiter le nombre de requêtes HTTP superflues. Cela permet d'optimiser l'utilisation du cache du visiteur pour les ressources fixes. Les gains de performances constatés sont souvent assez impressionnants.
Pour illustrer cette théorie, faites comparez à votre entourage ces deux photographies (ou comparez les vous même), et faites une analyse ponctuelle : quelle est l'image qui est de meilleure qualité, et pourquoi est-ce cette image et pas l'autre?
Le format PDF peut contenir certaines données inutiles pour sa restitution. PDFWriteCL
permet de récupérer du texte et des images trouvés dans un PDF, et réécrire complètement les données collectées dans un nouveau PDF particulièrement léger.
Optimiser vos photos personnelles en réduisant leur définition et leur qualité pour les envoyer plus rapidement par mail grâce au ScriptPHOTO. Il utilise les mêmes optimisations que ScriptJPG et supporte également les dossiers et le traitement en parallèle.
La technique de la pré-compression GZIP peut vous permettre d'éviter la charge sur le CPU du serveur — car les données envoyées sont déjà compréssées — et d'augmenter la compression de tous vos documents non compréssés comme HTML, CSS ou JS.
Cet article vous montre comment optimiser votre installation internet et profiter du débit proposé par votre ligne. Ce sont des modifications personnelles, pas forcément adaptables pour tous, mais dont vous pourrez sans doute vous inspirer.
sprites
Dans ce test, je tente d'inclure 10 captures d'écran avec une seule requête HTTP, le tout pesant moins de 32 Ko. Pas forcément adapté en production, sémantiquement discutable, mais très efficace pour économiser des requêtes HTTP, en dépit d'une mémoire requise plus volumineuse.
Le format PNG propose différentes méthodes pour utiliser la transparence dans une image. Chaque ColorType du format PNG peut attribuer une valeur de transparence à une image, avec des restitutions différentes, et des supports différents.
La problématique principale du PNG concernant la compression est le nombre important de facteurs rentrant en jeu. Ces facteurs peuvent être astucieusement combinés pour obtenir différents résultats, tout en conservant la qualité au pixel près.
Dans ce test, je conçois une animation avec trois images: une photographie, une image PNG transparente et un GIF animé. Il en résulte une animation légère, compatible avec la plupart des navigateurs, incluant IE6. Ne nécessite ni javascript, ni plug-in.
Dans cette démonstration purement expérimentale, je vous montre comment on peut modifier la structure d'une image PNG afin de l'alléger au maximum, en sacrifiant la qualité, mais en conservant tout de même un certain rendu.
Choisir le bon format pour une image n'est pas la seule chose à faire pour effectuer de bonnes captures d'écran. Je vous livre ici quelques méthodes simples pour réussir vos captures, et obtenir le meilleur rapport qualité / poids.
Le TrueColor+Alpha est un PNG qui utilise un Canal Alpha pour rendre certains pixels plus ou moins translucides. Lorsqu'il contient beaucoup de couleurs complexes, il peut occuper un espace poids important. Voici quelques méthodes pour en diminuer le poids.
Lorsque vous produisez des PNG, il est important de penser aux facteurs d'optimisation, tels que le filtrage. Laisser le logiciel faire le choix à votre place peut avoir des conséquences non négligeables sur la qualité, ou sur le poids de sortie.
Le WebP est un format très prometteur. Sa faculté essentielle réside à réduire la qualité d'une image. Ce petit test rapide montre néanmoins les lacunes de la génération de fichier via l'option -lossless, qui peut générer des fichiers plus lourds.
Tous les quantifieurs ne se valent pas; si vous en avez la possibilité, affinez les options de votre quantifieur avant d'utiliser une méthode de tramage: il est ainsi possible d'obtenir une image de bien meilleure qualité, avec un poids nettement plus léger.
Avant de produire votre PNG, veillez à penser à son optimisation. Comme c'est le cas dans cet exemple, un seul pixel peut avoir un impact très négatif sur le poids du PNG. Les images suivantes sont identiques à 1 pixel près; la différence de poids elle est de 7287 octets.
Je teste différentes solutions pour améliorer la compression des PNG32, plus particulièrement concernant la modification des valeurs RGB qui ne sont pas restituées à cause du Canal Alpha. Cela pourrait être une nouvelle méthode pour améliorer le stockage des PNG TrueColor+alpha.
Dans ce test, je teste différentes stratégies pour optimiser les PNG-8, et particulièrement ceux qui disposent de couleurs gradientes: les résultats sont variables, et les différentes méthodes pour organiser la palette sont très nombreuses.
Un travail plutôt simple pour restaurer une qualité d'image supérieure, avec un poids nettement allégé: une capture en JPG en entrée, avec éliminations des artefacts, amélioration de la lisibilité, et conversion de l'image en PNG optimisé.
Il peut arriver dans certains cas que le format GIF soit plus léger que le format PNG: cela peut être vrai avec de très petites icônes — et même dans ce cas, les sprites PNG sont à tester. Dans les autres situations, il s'agit souvent d'un mauvais comparatif.
A PNG Test Corpus that contains special PNG files, which can be optimized. This test shows the routine of PNG optimizer and their potential to find the best settings automatically. Please note you can have better results with some of them with manuals settings.
An overview of differents PNG optimization tools, including pure compressors. They are tested with differents PNG files with special charactestics that require a good optimization routine to determine the best output settings.
Me contacter: Contact (e-mail)