Optimisation Web (images, performance)

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+

Scripts, les évolutions

29.08.2012 (15.05.2013) - Notifications des mises à jour des outils ScriptPNG et ScriptJPG

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.

Test de ZopfliPNG: réductions

12.05.2013 - Test concernant les réductions sans pertes visuelles

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.

Intégrer les PNG transparents (haute définition)

11.04.2013 - Optimiser considérablement l'intégration des images avec JPG

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.

WebP 0.2.1 Test

03.04.2013 - Compression tests with WebP

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?

L'optimisation facile avec ScriptCX

27.03.2013 - Optimiser PNG et JPG d'un simple clic droit

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.

Présentation du format PNG

18.03.2013 - Vidéo de présentation du format PNG

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.

Test de compression SVG et cache CSS

14.03.2013 - Mise en cache via CSS et compression

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.

Test PDFWriteCL avec Zopfli

06.03.2013 - Test de ré-écriture de fichier PDF

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.

ScriptPNG utilise Zopfli

03.03.2013 (05.03.2013) - Algorithme de compression Zopfli pour ScriptGZIP et ScriptPNG

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.

Essais aléatoires de PNGOUT

05.01.2013 (19.03.2013) - A la chasse des octets superflus

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.

Hacks PNG et tests d'optimisation

19.01.2013 - Test d'optimisation des PNG32

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.

N'appliquez pas GZIP partout

18.01.2013 - Compression selon le format

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.

Optimiser le référencement

27.12.2012 (16.01.2013) - Des méthodes pour optimiser le référencement de son site

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é.

Optimisation des SVG

10.01.2013 - Réduire le poids des documents SVG

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.

SVG: le format graphique d'actualité

29.12.2012 - Un format de plus de 10 ans, toujours largement sous exploité

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.

Différents types de PNG: PNG8, PNG24, PNG32

28.12.2012 - Le point sur les différents noms de PNG

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.

Optimiser les images pour le Web

21.12.2012 (23.12.2012) - Préparer vos images Web: choix entre GIF, PNG, JPG et comment les utiliser

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.

Quantification des images PNG

19.12.2012 - Un PNG8 peut en cacher un autre

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?

Outil pour optimiser PNG et JPG avec pertes

30.11.2012 (19.03.2013) - Outil automatisé pour optimiser PNG et JPG avec pertes

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.

Adapter le contenu pour les mobiles

27.11.2012 - Changer le format ou la définition des images pour les mobiles

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.

PNG transparents pour IE6

19.11.2012 (26.11.2012) - Rendre un PNG transparent compatible avec Internet Explorer 6

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.

Online PNG Optimizers

21.11.2012 - Online PNG Optimizers reduction tests

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.

Test du format Mid

14.11.2012 - Test de compression du format Mid

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.

Générer des vidéos optimisées

26.10.2012 - Créer des vidéos pour le Web

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

26.10.2012 - Optimiser le cache en diminuant les requêtes

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.

Optimisation JPEG: focalisation

17.10.2012 - Compression de JPEG par zones et attirance de l'oeil

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?

Optimisation des PDF avec PDFWriteCL

04.10.2012 (18.10.2012) - Réduire le poids des documents PDF

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

15.10.2012 - Envoyer plus vite vos photos par mail

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.

Pré-Compression Gzip

15.10.2012 (18.10.2012) - Eviter la charge CPU, augmenter la compression

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.

Optimisation de l'installation Internet

28.09.2012 (03.10.2012) - Augmenter votre vitesse de connexion

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.

10 captures d'écran: 1 requête HTTP

28.09.2012 - Utilisation extrême de la méthode 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.

Transparence PNG: le guide

17.09.2012 (26.09.2012) - Tout sur la transparence du format PNG

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.

Optimisation PNG sans pertes, par étapes

14.09.2012 - Théorie sur l'optimisation sans pertes du format PNG

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.

Une animation très légère

14.09.2012 - Animation GIF avec transparence

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.

Lissage: Optimisation extrême

14.09.2012 - Modification extrême de la structure d'une image

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.

Faire de bonnes captures d'écran

06.09.2012 - Comment faire des captures d'écran de qualité

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.

Diminuer le poids des PNG32

05.09.2012 - Réduire les couleurs d'une image en conservant une bonne qualité

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.

L'importance de la création pour le filtrage PNG

03.09.2012 - Penser aux facteurs de filtrage pour la création

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.

Test de WebP 0.2.0

01.09.2012 - Test de compression avec le format WebP

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.

Pas de tramage, utilisez un bon quantifieur

27.08.2012 (29.08.2012) - Le PNG8 peut avoir différentes qualités

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.

Pourquoi 1 pixel peut-il tout changer

21.08.2012 - Un pixel peut changer le type du PNG

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.

Test de modification des données RGB pour les PNG32

19.08.2012 (21.08.2012) - Modification de la structure RGB non restituée

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.

Test d'organisation de palette pour les PNG8

19.08.2012 (08.03.2013) - Organisation des couleurs dans la palette

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.

Retravailler des captures d'écran (artefacts JPG)

19.08.2012 - Diminuer le nombre de couleurs et supprimer les artefacts

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é.

Mes GIF sont mieux que PNG

18.08.2012 - Mythes: la transparence du GIF est mieux supportée, le GIF est plus léger

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.

PNG Test Corpus

17.08.2012 - PNG Optimizers tests with special files

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.

PNG Tools Overview

26.07.2012 - Compression and reduction tests with PNG tools

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)