Tutoriel d'utilisation de la balise thumb

[rastali]

ERRATUM : L'utilsation de la balise thumb est dorénavant obligatoire pour les images de plus de 700px, sinon votre image sera rognée...

Comment s'utilise-t-elle ? De la meme façon que la balise img, sauf qu'à la suite du mot thumb, on met la taille voulue :
[thumb=700].

Bonjour à tous!

Je vais vous présenter la balise thumb. Cette balise est très utile lorsque vous créez des galeries d'images, que ce soit pour présenter vos collections ou pour réaliser des reviews sur tel ou tel sujet.

Dans ces cas, la balise thumb est bien plus efficace que la balise image. Elle est donc à privilégier. Je sais que la plupart des hébergeurs d'images vous proposent des liens tout fait à copier/coller dans vos rédactions de messages, mais l'utilisation de la balise thumb est vraiment cruciale à l'affichage rapide de vos pages, voir même à l'affichage tout court pour les très grosses galeries.

Pourquoi la balise thumb est plus efficace ? Tout simplement car dans la balise thumb, on va renseigner nous même la taille de l'image redimensionnée.

Les dimensions du forum permettent d'afficher des images ayant un maximum de 700px de largeur. De ce fait, afin d'éviter que vos images ne sortent du cadre du forum lorsqu'elles dépassent 700px de largeur, la balise img va faire une opération couteuse en temps avant d'afficher l'image : elle va vérifier la taille de l'image, et si celle-ci dépasse 700px en largeur, elle la redimensionne. Cette opération qui consiste à vérifier la taille de l'image avant de l'afficher se fait sur toutes les images, qu'elles soient très grandes ou très petites. S'il n'y a que quelques images, la page va s'afficher, mais sur une grande galerie, cette opération couteuse répétée des dizaines de fois va fortement ralentir l'affichage de la page, et éventuellement la faire tomber en time out : la page ne s'affichera donc pas.

C'est là que la balise thumb entre en jeux. Puisqu'on indique nous-même la nouvelle taille de l'image, on saute l'étape qui consiste à vérifier la taille de l'image. Ca va donc nous permettre de gagner énormément de temps d'affichage.

Comment s'utilise-t-elle ? De la meme façon que la balise img, sauf qu'à la suite du mot thumb, on met la taille voulue :
[thumb=700].
Bien sur il ne faut pas oublier de refermer la balise.

La balise thumb se trouve à droite de la balise spoiler dans la liste des balises utilisables.

J'espère que vous ferez l'effort de l'utiliser, mais de toute façon pour certains topics ça sera absolument nécessaire, donc autant prendre la bonne habitude tout de suite

[Everithingdbz]

Merci pour le conseil!

Est-ce qu'il y a une différence avec le fait d'utiliser la balise spoiler?
Car en prenant une image et en la mettant sous spoiler, la vitesse d'affichage est censée être courte non?

[rastali]

En fait, là, on parle du temps de construction de la page, et non du temps d'affichage. Pendant la construction de la page, le fait que la balise [img] calcule la taille de l'image affichée est gourmand en temps, et ce, qu'il y ait ou non des balises [spoil]. La balise [spoil] permet une meilleure visibilité, et également un gain de temps lors de l'affichage, mais le temps de construction de la page reste long si l'utilisation de la balise [img] est gardée.
Bien sur, je ne dis pas qu'il faut tout le temps utiliser la balise [thumb]. Son utilisation est surtout nécessaire sur les topics avec de grosses galeries d'images. Et puis je ne peux pas forcer tout le monde à le faire, mais à terme vos topics collections peuvent être très long à afficher...

[Stephane88]

Dans le doute et ayant poster deja pas mal de photos sur mon topic , j'ai repassé toutes les photos en balise thumb.

[Everithingdbz]

En fait, là, on parle du temps de construction de la page, et non du temps d'affichage. Pendant la construction de la page, le fait que la balise [img] calcule la taille de l'image affichée est gourmand en temps, et ce, qu'il y ait ou non des balises [spoil]. La balise [spoil] permet une meilleure visibilité, et également un gain de temps lors de l'affichage, mais le temps de construction de la page reste long si l'utilisation de la balise [img] est gardée.
Bien sur, je ne dis pas qu'il faut tout le temps utiliser la balise [thumb]. Son utilisation est surtout nécessaire sur les topics avec de grosses galeries d'images. Et puis je ne peux pas forcer tout le monde à le faire, mais à terme vos topics collections peuvent être très long à afficher...

Je pense comprendre!
Et donc un coup de [thumb=700] et c'est bon? Peu importe l'image?
Je le ferai aussi à l'avenir dans ce cas

[rastali]

Bah du coup le [thumb=700] il est à faire que sur les images de plus de 700px de large. Si tu le fais sur une image plus petite, ça va l'agrandir à 700px, et donc elle sera plus moche

[Everithingdbz]

Bah du coup le [thumb=700] il est à faire que sur les images de plus de 700px de large. Si tu le fais sur une image plus petite, ça va l'agrandir à 700px, et donc elle sera plus moche

Donc pour une image plus petite que 700px, c'est juste [thumb]?

[rastali]

Nop, pour une image plus petite que 700px tu peux mettre soit thumb et la largeur réelle de l'image, soit thumb et une largeur plus petite que la largeur réelle de l'image, soit la balise [img].
[thumb] sans taille derrière ne fonctionne pas.

Pour plus d'explication, mais là ça va devenir technique: quand la balise [img] vérifie la taille de l'image pour savoir si elle doit la redimensionner, elle utilise la fonction php getimagesize(). Cette fonction renvoie la taille de l'image. Mais pour cela, elle charge complétement l'image en taille réelle afin d'en calculer sa taille.
Du coup imaginons une image qui fait 2Mo et 2500px/2500px.
Si elle est affichée avec la balise [img] : on la charge une première fois en taille réelle pour calculer sa taille, on calcule sa taille, elle fait plus de 700px donc on la redimensionne, et on affiche l'image redimensionnée.
Si elle est affichée avec la balise [thumb=700] : on la redimensionne à 700px, et on affiche l'image redimensionnée.

Maintenant, sur une petite image qui fait 50ko et 500px/500px. Si on utilise la balise [img], le fait de l'afficher une première fois afin de calculer sa taille ne sera pas très couteux en temps car l'image est petite. Donc dans ce cas on peut utiliser la balise [img].

Imaginez un topic collections avec 50 images de 2Mo et 2500px/2500px affichées avec la balise [img]. Chacune de ces images vont être chargées une première fois en taille réelle, puis on en calcule la taille, puis on les redimensionne. C'est dans ce cas que le serveur finit par planter car le temps de traitement est trop long.

J'espère avoir été un peu plus clair

[Everithingdbz]

Je pense en effet ^^"
Donc moins de 700px = thumb pas utile, au-dessus, thumb=700 !