Tutoriel d'utilisation de la balise thumb

Remarques et suggestions d'améliorations du forum

Tutoriel d'utilisation de la balise thumb

Messagepar rastali » 04 Mai 2014, 13:33

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 :yeah:
Image
Avatar de l’utilisateur
rastali
Card Hunter (Double Hunter)
Card Hunter (Double Hunter)
 
Messages: 1745
Enregistré le: 20 Nov 2008, 20:30
Localisation: Paris

Re: Tutoriel d'utilisation de la balise thumb

Messagepar Everithingdbz » 04 Mai 2014, 16:18

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?
Image
Avatar de l’utilisateur
Everithingdbz
Hidden Prism Card
Hidden Prism Card
 
Messages: 405
Enregistré le: 14 Avr 2014, 16:24
Localisation: Reims

Re: Tutoriel d'utilisation de la balise thumb

Messagepar rastali » 05 Mai 2014, 09:14

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...
Image
Avatar de l’utilisateur
rastali
Card Hunter (Double Hunter)
Card Hunter (Double Hunter)
 
Messages: 1745
Enregistré le: 20 Nov 2008, 20:30
Localisation: Paris

Re: Tutoriel d'utilisation de la balise thumb

Messagepar Stephane88 » 05 Mai 2014, 12:22

Dans le doute et ayant poster deja pas mal de photos sur mon topic , j'ai repassé toutes les photos en balise thumb.
Ech/Ventes/Achats Réussis:
- Loran(x1)
- Titinho (x1)
- Sanji12 (x1)
Avatar de l’utilisateur
Stephane88
Deluxe Prism Card
Deluxe Prism Card
 
Messages: 278
Enregistré le: 18 Avr 2014, 18:19

Re: Tutoriel d'utilisation de la balise thumb

Messagepar Everithingdbz » 06 Mai 2014, 15:45

rastali a écrit: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 :yeah:
Image
Avatar de l’utilisateur
Everithingdbz
Hidden Prism Card
Hidden Prism Card
 
Messages: 405
Enregistré le: 14 Avr 2014, 16:24
Localisation: Reims

Re: Tutoriel d'utilisation de la balise thumb

Messagepar rastali » 06 Mai 2014, 15:48

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 ;-)
Image
Avatar de l’utilisateur
rastali
Card Hunter (Double Hunter)
Card Hunter (Double Hunter)
 
Messages: 1745
Enregistré le: 20 Nov 2008, 20:30
Localisation: Paris

Re: Tutoriel d'utilisation de la balise thumb

Messagepar Everithingdbz » 07 Mai 2014, 12:46

rastali a écrit: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]?
Image
Avatar de l’utilisateur
Everithingdbz
Hidden Prism Card
Hidden Prism Card
 
Messages: 405
Enregistré le: 14 Avr 2014, 16:24
Localisation: Reims

Re: Tutoriel d'utilisation de la balise thumb

Messagepar rastali » 07 Mai 2014, 13:12

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 :yeah:
Image
Avatar de l’utilisateur
rastali
Card Hunter (Double Hunter)
Card Hunter (Double Hunter)
 
Messages: 1745
Enregistré le: 20 Nov 2008, 20:30
Localisation: Paris

Re: Tutoriel d'utilisation de la balise thumb

Messagepar Everithingdbz » 09 Mai 2014, 09:29

Je pense en effet ^^"
Donc moins de 700px = thumb pas utile, au-dessus, thumb=700 !
Image
Avatar de l’utilisateur
Everithingdbz
Hidden Prism Card
Hidden Prism Card
 
Messages: 405
Enregistré le: 14 Avr 2014, 16:24
Localisation: Reims


Retourner vers Remarques et suggestions sur le forum

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité

cron