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.

Optimization tools - Actualités: Twitter - Google+

PDF (re)write: High PDF Compression

14.11.2013 (27.11.2013) - PDF layout format and high compression

Last year, i wrote a tool that is able to detect some HTML tags in a file, then convert whole data to PDF uncompressed stream to make very small PDF files. The tool is called PDFWriteCL, is not public yet, and this page is an overview of results and project.

Gzip pre-compression

15.10.2012 (28.10.2013) - Less CPU charge, better compression

You've probably heard about gzip compression. This method shows you how to compress file better — by doing Zopfli compression — on your server, that will give already compressed content to users, saving CPU ressources.

PNG Test Corpus

17.08.2012 (24.10.2013) - PNG Optimizers tests with special files

A PNG Test Corpus that contains special PNG files that can be optimized. This test shows the potential to find the best settings automatically for PNG optimizers. Please note you can have better results with some of them with manual settings.

PNG Tools Overview

26.07.2012 (21.10.2013) - Compression and reduction tests with PNG tools

This is an overview of PNG optimization tools, comparing them with a set of special files (PNG Test Corpus files) that requires reductions, better filtering or compression. Those tests show tools limitations, and why combination of them is better.

Outil: les couleurs dans la palette

22.07.2013 (02.10.2013) - PNGPalTest: outil pour tester l'organisation des couleurs

PNGPalTest est un outil qui permet de modifier le classement des couleurs dans une palette afin de favoriser la compression des fichiers PNG. En testant les différentes combinaisons, il peut emmener l'utilisation de filtres pour les PNG Paletted.

TruePNG

29.09.2013 (31.03.2014) - TruePNG tutorial

If you have to choose one, TruePNG is a must have tool: it's the reason why ScriptPNG is very efficient comparing to other tools that not use it. Mainly based on OptiPNG, the tool also includes a lot of extra features which are described here.

Expérience d'optimisation du Gamma (PNG)

29.09.2013 - : Une expérience pour optimiser les PNG Paletted avec gAMA

Une tentative pour optimiser les images PNG Paletted disposant d'un correctif gAMA: est-il possible d'optimiser le PNG en supprimant le chunk, mais en conservant le même correctif d'affichage? Dans cet expérience encore en cours, je montre comment c'est possible.

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.

L'optimisation facile avec ScriptCX

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

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

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.

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

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?

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?

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.

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.

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.

Me contacter: Contact (e-mail)