Coup de peinture quinquies
Même si maintenant cela tient surtout de la cuisine interne et de la tambouille quasi invisible pour les lecteurs et visiteurs, après les récents Coup de peinture, je partage mes avancées et recherches en matière d’optimisation, accessibilité et bricolage du blog, de son interface, de son code et de sa structure.
Grâce à Presse-Citron, j’ai découvert et dévoré Réussir son site web en 60 fiches. Tout est dit (je cite) :
De par la simplicité et la clarté de sa présentation, Réussir son site web en 60 fiches est certainement l’un des ouvrages de référence que l’on devrait trouver sur le bureau de nombreux concepteurs web, mais aussi sur celui des décideurs en entreprise dans ce domaine, qu’ils soient acheteurs, responsables informatiques ou qu’ils officient au marketing ou à la communication.
Un livre bien ficelé et pratique qui aide à réfléchir (malgré quelques données un peu datées de-ci de-là). Couplé au HS n°4 du magazine Web Design, on obtient une belle alchimie pour chiader son blog.
J’ai mis un peu en pratique tout ceci en creusant encore et encore. Par exemple, dans la partie haute de la colonne de droite, j’ai ajouté une sélection d’anciens articles, « Au fil des ans ». C’est tout à fait subjectif et arbitraire. En fouinant dans les archives et ses abysses, je me suis dit que j’allais régulièrement faire prendre l’air à quelques articles qui m’avaient amusés, intéressés ou enrichis à l’époque et qui peuvent encore être d’actualité.
La galerie, que je viens de mettre à jour et que j’ai tendance à délaisser, trop concentré sur le blog, profite d’un petit coup de frais avec un changement de fond, un titre en surimpression, etc.
Ensuite et pour finir, j’ai essayé de pousser le bouchon plus loin en matière de rapidité d’affichage des pages. Et c’est encore, toujours, possible ! Il existe des plugins permettant de synthétiser les scripts, combiner automatiquement les feuilles CSS, déplacer les scripts en bas de page pour alléger le chargement des pages, mettre en place un cache transformant – en bref – les pages et articles du blog en pages fixes pour gagner de précieuses secondes d’attente… Mine de rien, mis bout à bout, après pas mal d’essais et bidouilles, tout ceci permet de gérer et d’afficher au mieux un blog bourré d’images et d’infos sans tout plomber.
Ci-dessous les extensions WordPress citées plus haut que je n’ai pas encore toutes mises en place, j’attends pour certaines leur validation complète par leurs auteurs respectifs. Ce qui ne saurait tarder. Donc : Wp Minify et Javascript to Footer.
Sans compter aussi des astuces plus pointues et périlleuses de modifications d’htaccess & co…
Cet article sera certainement très obscur voire indéchiffrable pour beaucoup mais si cela peut aider ou aiguiller, je serai ravi. Le net sert aussi, et surtout, à ça 
« Mise à jour de printemps |
| Kodamas »
À propos, je suis moi-même en pleine refonte de mon site et le principe de ton cadre « illustré », avec la transparence progressive vers le fond parcheminé fixe, m’a tapé dans l’oeil ! Je vais m’en inspirer (dans les limites du raisonnable
)…
J’ai donc remarqué que ton image est très lourde, dimensions + transparence obligent. Ça m’a amené à faire quelques tests d’optimisation pour voir ce que me coûterait (en kilooctets) une image de ce genre ; je pensais ne pas avoir d’autre choix que 24-bits-très-lourd ou 8-bits-très-moche… Mais certains programmes permettent de sortir une image 15 bits et ma foi, c’est un assez bon compromis ! De cette manière, un cadre comme le tien passe d’1.2 Mo à 800 Ko, presque sans perte au niveau de l’alpha et des couleurs (par endroits un peu de bruit apparaît, mais rien de choquant).
Voilà, je rapporte l’info à toutes fins utiles.
Merci pour l’info ! En effet si je pouvais alléger la bannière ça ne ferait de mal à personne… De quel programme s’agit-il ?
C’est un programme nommé OPTPiX iMage Studio, qui est utilisé surtout dans le développement de jeux vidéo ; ce qui le rend assez inabordable, donc difficile à se procurer… Ça m’a conduit à faire quelques recherches sur le web, pour voir si je pouvais trouver une alternative viable. Et c’est le cas !
On trouve sur cette page : http://www.telegraphics.com.au/sw/#histotext deux plugins gratuits pour Photoshop qui s’en sortent très bien, il s’agit de « 12bits filter » et « 5_6_5 filter ». Ces filtres appliquent en fait du dithering à ton image, comme quand on convertit en 256 couleurs sauf qu’ici c’est beaucoup moins restrictif. Au final, tu sauvegardes quand même un PNG en 24 bits mais comme celui-ci n’utilise plus que 4096, 32768 ou 65536 couleurs, la compression est plus efficace et le fichier est plus petit.
J’ai fait quelques tests dans Photoshop et ça marche bien, après il s’agit juste de choisir si tu privilégies la qualité ou la taille du fichier. Et la technique de fourbe : tu fais plusieurs versions de ton image, en ayant appliqué à chacune un de ces filtres ; puis sur l’image la plus légère (donc la plus moche) tu remplaces les zones trop détériorées, avec leur équivalent pris sur une version de l’image où ça passe mieux !
C’est un peu plus long à faire mais ça permet d’avoir le meilleur compromis entre taille et qualité.
Excellent ! Merci beaucoup Pezito, ces scripts valent de l’or mais je n’arrive pas à les installer… Je les ai pourtant copié dans le répertoire Plugins de mon Photoshop mais je ne les retrouve pas dans l’interface, hum hum…
Ah oui, c’est vrai que les infos sur l’installation sont un peu spartiates. ^^; Pour ma part j’ai simplement copié les fichiers .8bf dans le dossier « Plug-Ins/Filters » et ça a ajouté les filtres comme il faut (dans un sous-menu nommé « Telegraphics »).
Excellents filtres, sauf qu’ils ne passent pas sur la version CS4 de Photoshop. J’ai installé la version d’évaluation CS2 pour en profiter