Cet article fait suite a un autre article que j’avais rédigé concernant la compression des PNG avec Optipng et Pngnq.

Grâce à Franck, j’ai découvert un nouvel utilitaire permettant l’optimisation de la compression des images au format PNG: ScriptPNG.

Il permet notamment deux types de compression: la compression sans pertes et la conversion en 256 couleurs (ou moins). Ainsi, il vous sera possible d’adapter la compression de vos images en fonction de l’utilisation que vous souhaitez en faire.

Par exemple, pour une photo destinée au web, il est préférable de la convertir en 256 couleurs afin de réduire significativement sa taille sans trop détériorer la qualité de l’image. J’utilise d’ailleurs ce type de compression pour toutes les images du blog et j’ai noté un gain de performances très net.

J’ai aussi comparé la compression effectuée avec les outils du précédent article et ScriptPNG. Les résultats sont très peu différents. Certaines fois l’ancienne méthode se révèle plus performante, d’autres fois c’est ScriptPNG, mais la variation dépasse rarement la  centaine d’octets.

Pour le téléchargement vous pouvez récupérer le programme sur cette page, malheureusement, il n’est actuellement disponible que pour Windows (contrairement à la méthode évoquée plus haut).

[Photo]

Articles similaires:

• 31 mai 2008 -- Optimiser la compression des PNG
• 23 novembre 2008 -- Optimisez votre CSS avec CSS Compressor
• 5 mars 2009 -- Zemanta: enrichir ses articles, textes et autres contenus
• 16 février 2009 -- WebWait: mesurer le temps de chargement de vos pages
• 21 août 2008 -- Vectoriser une image avec Vector Magic

WebWait est un site web qui permet, grâce à un script Ajax, de mesurer le temps de chargement des pages de votre site.

Le test est entièrement paramétrable: vous pouvez choisir le nombre de fois que votre site devra être chargé, ainsi que le temps d’attente entre chaque chargement. Il en résulte un temps moyen de chargement vous permettant d’évaluer si votre site est plutôt rapide ou lent.

Si votre site met trop longtemps à s’afficher ou que le chargement reste bloqué en plein milieu pendant plusieurs secondes, il est important de vérifier que l’ensemble des scripts (java, …) sont situés à la fin de la page (footer). Ainsi tous les autres éléments de la page seront chargés, permettant au visiteur de consulter le contenu même si les scripts ne sont pas encore actifs.

Une autre astuce est d’optimiser la compression de vos images. Je vous renvois pour ça vers un articles que j’avais écrit sur la compression des PNG.

[Source] – [Photo]

Articles similaires:

• 5 mars 2009 -- Zemanta: enrichir ses articles, textes et autres contenus
• 18 mars 2010 -- Ce message s’autodétruira…
• 4 mars 2009 -- Optimiser la compression des PNG (2)
• 22 février 2009 -- Twit2do: Une To Do List (liste de tâches) pour Twitter
• 21 février 2009 -- Rapidstack: La recherche Rapishare en temps réel

Avec les nouveaux thèmes graphiques, toujours plus innovant, l’utilisation du CSS sur les sites Web a fortement augmenté produisant des codes assez volumineux et ralentissant le chargement des pages.

Une bonne méthode pour limiter cet effet, serait, selon moi, de diviser le CSS des pages en plusieurs fichiers et de ne charger que ceux utiles pour la page courante, ou encore, de gérer dynamiquement (via PHP par exemple) la génération du CSS en fonction des éléments présent dans la page (mais il faudrait recharger ce fichier à chaque fois … ).

Mais cette méthode nécessite certaines connaissances en programmation ou d’avoir des contenus vraiment différents entre les pages.

Je vous propose donc une alternative qui peut se révéler efficace dans certains cas: CSS Compressor. Il s’agit d’un outils qui permet d’optimiser votre feuille de style en supprimant tous les éléments inutiles, dont les commentaires, pour en réduire la taille. Personnellement, j’ai réussi à réduire de 25% la taille du code, en utilisant le mode Super Compact et le CSS généré reste valide W3C …

Je pense donc que c’est un compromis plutôt intéressant.

J’en profite aussi pour faire un petit feedback sur mon expérience en matière de CSS: préférez toujours un fichier à part pour votre code CSS sous peine d’allonger le temps de chargement de la page.

En effet, si le liens vers votre fichier CSS est placé suffisamment tôt dans votre page (le plus tôt possible sera le mieux), le CSS et le code source de la page seront chargés en parallèle, divisant ainsi le temps de chargement.

[Source]

Articles similaires:

• 4 mars 2009 -- Optimiser la compression des PNG (2)
• 31 mai 2008 -- Optimiser la compression des PNG
• 16 février 2009 -- WebWait: mesurer le temps de chargement de vos pages
• 1 février 2008 -- Faites améliorer votre code

L’optimisation de la compression des images est un facteur important de rapidité de chargement des pages web. Comme je suis dans ma période optimisation, j’ai cherché une méthode permettant de réduire la taille des PNG.

Voici donc, deux outils absolument indispensables:

Pngnq, permet de convertir un fichier PNG en 256 couleurs en définissant une palette de teintes représentant au mieux l’ambiance de l’image.

Optipng, lui, teste plusieurs méthodes de compression afin d’obtenir une image PNG d’une taille optimale. Il supprime aussi toutes les informations inutiles.

Ensuite, il suffit d’utiliser les commandes suivantes pour convertir l’image:

pngnq -vf -s1 image.png
optipng -o7 image-nq8.png

Notez que Pngnq enregistre l’image image.png sous le nom image-nq8.png. Enfin, bien entendu, si la réduction des couleurs donne une image de trop mauvaise qualité, on n’utilisera qu’Optipng.

A titre d’exemple l’image en tête de cet article faisait à l’origine 128ko, et n’en fait plus que 33ko, pourtant la qualité reste correcte.

Pour les utilisateurs de Linux, j’ai fait un petit programme bash afin d’automatiser les commandes:

#!/bin/bash
pngnq -vf -s1 $1.png
optipng -o7 $1-nq8.png
echo "Conversion Terminée !"

Pour l’utiliser, entrez la commande ./png.sh image ou « image » est le nom de l’image sans l’extension et png.sh le nom du fichier dans lequel j’ai entré le script.

Pour l’installation sous Linux (Debian, Ubuntu):

sudo apt-get install pngnq optipng

Ces programmes sont aussi disponibles pour Windows:

• Optipng
• Pngnq

Source

Articles similaires:

• 4 mars 2009 -- Optimiser la compression des PNG (2)
• 23 novembre 2008 -- Optimisez votre CSS avec CSS Compressor
• 19 mars 2010 -- Test de la preview d’Internet Explorer 9 (IE9)
• 12 mai 2009 -- HADOPI voté, il va falloir payer … (ou innover)
• 5 mars 2009 -- Zemanta: enrichir ses articles, textes et autres contenus

RefactorMyCode est un site d’entraide pour améliorer et optimiser votre code.

Postez votre code, les autres utilisateurs vous proposeront des améliorations ou des astuces pour l’optimiser, corriger les éventuelles lourdeurs … A mon avis c’est aussi un bon moyen d’apprendre à programmer, en regardant les exemples de code postés.

Enfin, ce site peut aussi être une ressource très utile.

Articles similaires:

• 4 mars 2009 -- Optimiser la compression des PNG (2)
• 16 février 2009 -- WebWait: mesurer le temps de chargement de vos pages
• 23 novembre 2008 -- Optimisez votre CSS avec CSS Compressor
• 31 mai 2008 -- Optimiser la compression des PNG