CSS & Webdesign » Optimisation

Optimiser les images PNG, JPG, GIF

Bruno Bichet — Sun, 29 Apr 2012 18:01:32 +0000

Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site :

Outils en ligne

PunyPNG — Réduit le poids des fichiers PNG, JPEG et GIF
Smush.it — Compresse les images au format PNG

Logiciels à installer

ScriptPNG et ScriptJPG sont des logiciels pour Windows 32 bits permettant d’optimiser les fichiers images en utilisant différents niveaux de compression pour réduire la taille des fichiers :

ScriptPNG convertit les formats GIF, BMP, JPG, PCX, ou TGA vers le formats PNG.
ScriptJPG optimise les fichiers JPG grâce à un algorithme avec ou sans perte en fonction de la qualité d’image que vous voulez.

Autres outils

→ Comparatif entre les différentes solutions. Merci @nhoizey pour le lien o/

Articles sur le même sujet

CleverCSS — Mettez un Python dans vos CSS

Bruno Bichet — Fri, 05 Feb 2010 17:10:32 +0000

CleverCSS est une manière de produire des CSS inspirée par le langage de programmation Python : les accolades sont remplacées par l’indentation des différentes règles CSS et les déclarations sont introduites par le signe deux-points. Jusque-là, rien de bien fou, mais CleverCSS ne s’arrête pas à l’économie de quelques signes et propose de nombreuses améliorations à CSS : de l’optimisation de la syntaxe à l’utilisation des constantes en passant par le calcul sur les valeurs, y compris les couleurs.

Référence

a:
    &:hover:
      color: red
    &:visited:
      color: blue

Attributs

#main p:
    font->
      family: Verdana, sans-serif
      size: 1.1em
      style: italic

Constantes

background_color = #ccc

#main: background-color: $background_color

Calcul sur les valeurs

#fff - #ccc            -> #333333
cornflowerblue - coral   -> #00169d
crimson - 20             -> #c80028
10px * 2                 -> 20px

Faudrait pas que le python étouffe l’éléphant ;)

cleverCSS est très séduisant et la seule chose que l’on peut lui reprocher est d’être un script Python et non PHP !

Notes : il existe des scripts dans d’autres langages comme Ruby ou PHP :

CSS Cacheer (PHP)
LESS (Ruby)
ALAMANO ;) (PHP)

Articles sur le même sujet

Gérer les Post Revisions (et les backup) sur WordPress

Bruno Bichet — Mon, 22 Jun 2009 00:07:50 +0000

Depuis la version 2.6 de WordPress, la fonction Post Revisions permet de conserver les versions successives d’un billet. C’est pratique mais à la longue, c’est encombrant. Je n’ai fait appel à cette fonction qu’une ou deux fois et comme j’ai tendance à modifier mes billets assez souvent (j’utilise le bouton Save Draft en cours de rédaction ou Update Post lors des corrections ultérieures), en quelques mois, j’ai eu jusqu’à 113 Post Revisions pour un total de 320 billets… Il est temps de faire le ménage !

Mais avant de modifier la base de données, je vous conseille d’en faire un backup. Pour cela, plusieurs solutions s’offrent à vous :

5 solutions pour sauvergarder votre BDD

Utiliser la fonction Export intégrée à WordPress pour obtenir un fichier XML sans les liens de votre blogroll préférée (d’ou la pauvreté de la mienne à ce jour) et sans toutes les tables ajoutées par les plugins que vous avez installés. Autant dire que cette option est à réserver lorsqu’on remet son blog à plat.
Installer un plugin dédié à cette tâche comme WordPress Database Backup qui va sauvegarder les tables selon votre bon vouloir. Notez que ce plugin permet de ne pas enregistrer les commentaires considérés comme du spam dans la table wp_comments et d’exclure les Post Revisions de la table wp-posts. Dans le même genre, wp-dbmanager offre un menu étoffé pour effectuer des opérations de maintenance de votre base de données sans quitter WordPress !
Profiter des fonctions de votre hébergeur préféré qui devrait permettre de faire des sauvegardes quotidiennes de l’ensemble de vos bases : les fichiers compressés seront probablement enregistrés à la racine de votre hébergement.
Trouver le lien Exporter dans phpMyAdmin puis cliquer sur Transmettre pour sauvegarder votre base sur votre poste de travail ou obtenir un joli fichier texte si vous laissez les choses en l’état. Enfin, vous pouvez cliquer sur Exécuter.
Enfin, pour les Jedi, il reste la ligne de commande comme mysql -h host -u user -ppass base_de_donnees > fichier_dump — Plus d’information sur aidenet.

Opération Search & Destroy avec Delete Revisions

Une fois la BDD à l’abrit, faites intervenir l’excellent Delete-Revision commis par gohsy. Ce plugin va simplement dégraisser la base de données et lui redonner une deuxième jeunesse en supprimant toutes les révisions redondantes. Comme ça, d’un seul clic. Je l’ai mis en place sur ce blog et tout à l’air de fonctionner correctement.

Le coup de la constante WP_POST_REVISIONS

Il est possible de se prémunir une fois pour toutes de ces révisions intempestives en ajoutant une constante dans le fichier wp-config.php situé à la racine du blog :

define('WP_POST_REVISIONS', false);

Et en la plaçant juste avant le commentaire :

/* That's all, stop editing! Happy blogging. */

Dans le même esprit, il est possible de ne conserver qu’un nombre définit de révisions avec la ligne (ici 3) :

define('WP_POST_REVISIONS', 3);

Le coup de la requête SQL DELETE

Si vous n’avez pas ajouté WP_POST_REVISIONS dès l’installation de votre blog, il faudra supprimer les révisions existantes. Pour cela, cette requête SQL — à copier-coller dans le champs phpMyAdmin qui va bien — est votre amie :

DELETE FROM wp_posts WHERE post_type = 'revision';

Plus d’information sur Comment désactiver le suivi des versions sous WordPress 2.6 chez Korben et Malaiac qui nous offre une page consacrée à l’optimisation pour WordPress.

Quelques pistes pour optimiser WordPress

Supprimer les Post Revisions, c’est bien, mais pourquoi s’arrêter en si bon chemin alors que le réseau regorge de liens plus intéressants les uns que les autres ?

Profitons-en pour profiler notre outil de blog comme une voiture de course :

Articles sur le même sujet

13 outils en ligne pour organiser et compresser vos CSS

Bruno Bichet — Fri, 12 Jun 2009 09:20:11 +0000

Tout est dans le titre :

cleancss — La version française propose 4 niveaux de compression et permet de personnaliser les paramètres avec un gabarit de formatage pour votre feuille de style (exemple de compression maximale).
Styleneat — Trie (ou pas) les sélecteurs ou les déclarations par ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la feuille de style ou de l’uploader depuis votre poste de travail. (via roget.biz).
dustmeselectors — Cette extension pour Firefox traque les sélecteurs CSS inutilisés dans la page web affichée à l’écran.
Em Calculator — Pratique pour obtenir des valeurs en `em` pour les éléments de votre document HTML à partir d’une taille exprimée en `px`.
Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique.
pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les `%`, les `px` ou les `em`. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets.
drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné.
CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !
CSS Compressor.
CSS Compressor Advanced (cssdrive).
List-u-Like CSS Generator.
Cascading Style Sheets Optimization.
Labo CSS.