Développement : la guerre des thumbnails

Attention, cet article a été posté en 2009. Il est possible que les informations mentionnées ne soient plus d'actualité, ou que mon opinion ait évolué. Merci d'en tenir compte lors de votre lecture.

Également appelés Snapshots, les thumbnails sont des impressions-écran de votre site web, généralement affichés sous forme de vignettes. Je les utilise notamment sur les fiches des blogs, sur Blogonet. Souhaitant être indépendant, j’ai décidé de développer mon propre programme, qui se charge de les générer automatiquement.

Vu que cela semble susciter beaucoup de questions, je dévoile ici mon secret. Et quel secret ! Alors, comment prendre une impression-écran de manière automatique, avec un script ? La réponse est simple : vous ouvrez votre navigateur, vous affichez la page désirée, et vous prenez une impression écran. Le tout avec un script, bien entendu.

Par là, je veux dire que je n’ai pas inventé la poudre. Vous savez le faire manuellement, la manière de procéder est exactement la même. Les programmes sont juste lancés par un script. Par contre, c’est bien plus problématique au niveau des contrôles :

  • Les navigateurs ne fournissent aucun moyen de vérifier que le chargement de la page est bien terminé. Une solution est de fixer un délai, par exemple 10 secondes, mais ça reste très crade : si la page est chargée en 2 secondes, c’est une perte de temps ; si elle a besoin de 20 secondes, l’impression-écran ne sera pas bonne. Une autre idée : se baser sur une analyse réseau. Mais avec plusieurs tâches en parallèle, ce n’est pas évident.
  • Si le navigateur n’affiche pas la bonne page, ou si, pour une raison ou une autre, il reste bloqué sur l’onglet précédent, l’impression-écran ne captura pas le site désiré. Afficher le thumbnail de Presse-Citron à la place de celui de Fubiz est assez problématique… Et pourtant, c’est ce qu’il s’est passé sur Blogonet ces derniers jours ! D’ailleurs, ce n’est pas le seul, j’estime ce genre d’erreurs à 1% actuellement. Beaucoup trop.

Bien que le principe soit simple, contrôler des logiciels graphiques via un script n’est pas évident pour autant. Pour commencer, aucun écran n’est installé sur nos serveurs (sauf cas de force majeur, quand nous sommes sur place) : cela nous oblige donc à installer un serveur X sur une sortie virtuelle. Et même sur plusieurs, pour prendre plusieurs screenshots en parallèle. C’est buggé, il s’emballe assez régulièrement (toutes les 12 heures environ). C’est buggé, il s’emmêle parfois les pinceaux entre les différentes interfaces. C’est buggé.

Soit je laisse tombe l’idée du navigateur, et me tourne vers une solution utilisant directement webkit. Cela posera problème pour les sites utilisant massivement Javascript ou Flash. Soit je me tourne vers un service externe, spécialisé dans le domaine : ils ont plus de ressources à y allouer, leurs machines ne font que ça. Reste à trouver le service idéal, les limitations de websnapr étant trop fortes pour notre besoin.

Des suggestions ?

Vos réflexions

Ouille c'est bien compliqué pour moi tout ça, il est préférable d'utiliser un outil dédié fait pour ça non (ce n'ai d'ailleurs pas ce qui manque ...) ? Mais bon, ce que j'en dit hein !! ... ;)
@Jean-Marie: As-tu quelques outils de ce genre à citer ? J'en connais deux ou trois, mais certains m'ont sûrement échappé.
Ah, c'est donc pour ça que mon blog Gaiasphère a un beau X a la place de sa vignette ? :D
@Julien Appert : Oui, c'est pour ça. Nous travaillons dessus actuellement, pour corriger le problème au plus vite.
Je n'ai pas testé mais ces 2 softs semblent répondre à tes attentes

http://khtml2png.sourceforge.net/
ou
url2bmp (sous windows uniquement)

En cherchant url2bmp sur Google on trouve pas mal de ressources du genre.

Au passage je serais intéressé par un retour d'expérience quand tu auras mis le système en place.

Bonne continuation !
@moins52 :

Merci pour ces liens. khtml2png m'intéresse particulièrement, je vais essayer de voir ce que ça peut donner avec quelques tests de départ, puis des tests puis approfondis si ça peut valoir le coup (notamment pour la tenue en charge, etc).

Naturellement, je vous ferai un retour (mais pas avant quelques semaines, le temps de tout tester en profondeur, et sur le long terme).

Les autres conseils ou suggestions sont bien entendus les bienvenus :)
J'ai pensé à ça hier soir, alors que l'insomnie me frappait (encore). La méthode la plus simple, pour moi, c'est de récupérer le fichier index.html et les feuilles de style, les générer sur ton serveur et après prendre la capture d'écran, au moins t'es plus dépendant de personne (et si le site retourne une erreur 404, tu réessayes plus tard).

Bonne idée ou pas ? Allez savoir ^^
@Araen :

Ce n'est pas bête comme idée, cela permettrait de s'affranchir du temps de chargement. Cependant, cela oblige a télécharger toutes les images aussi, y compris celle utiliser dans la feuille de style (et c'est encore plus vrai si des liens relatifs sont utilisés dans la page).

De plus, ça ne résoudra probablement pas tous les problèmes : actuellement, les "mélanges" entre les différentes captures est essentiellement lié à un problème de gestion des onglets, au niveau du navigateur (en effet, je ne charge jamais plus pages de suite dans un même onglet).

Cela dit, l'idée est à creuser.
Sinon, j'ai aussi regardé un peu du coté de khtml2png.

Le premier problème : il ne semble pas reconnaître le flash et le Javascript. Ca peut poser quelques soucis pour certains sites web.

De plus, j'ai eu quelques bugs pendant mes premiers tests (notamment des boucles infinies, et une consommation croissante au niveau de la mémoire vive : d'après mes rapides recherches, j'ai l'impression que certains sémaphores sont créés sans jamais être détruis...)
Hum, en effet, j'avais pas pensé aux images. Erf, je sèche là ^^
Je n'ai malheureusement pas d'idée, par contre est-ce normal que je n'ai aucun thumbnail pour mon blog sur Blogonet : http://blogonet.fr/blogs/blog-marrant-com-10458.html ?