mes gifs dans les catégories font planter le forum.

[cslayers]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis un moment
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir

Je reviens vers vous pour un autre soucis
La dernière fois, j'avais un problème concernant l'apparence de mon forum, il était lent et avait beaucoup de bugs ! J'ai finalement trouvé d'où venait le problème et ça vient simplement des gifs que vous voyez sur la capture (dans les catégories)

J'ai tout essayé ! J'ai vidé mes cookies, ceux du forum, j'ai hébergé les gifs, j'ai tenté de mettre en code directement sur la description, ensuite je suis passée par le css, j'ai essayé d'installer en "span" l'image mais rien à faire

Ce que je ne comprends pas, c'est que j'ai fais ça sur un autre forum avec le même code et ça fonctionne très bien et le forum ne rame pas

Alors, je me demande, est-ce que mon forum n'est pas tout simplement en surcharge (j'ai plus de 1000 lignes niveau css) ? Ou j'ai dû louper une étape mais, je suis en manque d'idée xD

Voici ma description:

Code:

<img class="imgcat2" src="https://medias.andromede.pics/img/e2345b70-d4b3-11.gif" /><span class="name3"><strong>l'espace invités</strong></span> ϟ On connaît tous le moment difficile de faire connaitre son forum qui vient d'ouvrir, heureusement l'entraide existe. C'est pourquoi, comme sur de nombreux autres forums, on vous laisse la possibilité de venir nous demander un partenariat ou de faire votre publicité, mais sous certaines conditions évidemment. Vous trouverez un règlement pour chaque partie, pour les partenariats, il y aura moins de contraintes que pour les publicités. C'est également la partie dédiée aux invités.

le css:

Code:

.imgcat2 {
opacity: 0.8;
 float: left;
 padding-left: 2px; padding-right:3px; margin-bottom: -3px; width: 90px; height: 55px;  
}

Si avez une solution, je suis preneuse
Merci et bonne soirée

[Toryudo]

Bonjour !
Alors, voici les informations sur ce gif animé https://medias.andromede.pics/img/e2345b70-d4b3-11.gif :
File size: 9.75MiB, width: 540px, height: 400px, frames: 58, type: gif

Nous avons donc un gif qui fait pas loin de 10Mo (je suppose que les autres font également autour de ce poids), et qui est ensuite redimensionné à width: 90px; height: 55px; dans votre code CSS. Quand on est dans ce genre de situation, on va essayer de redimensionner le fichier gif à la taille qu'il va avoir dans le rendu final. Un gif de width: 90px, height: 55px sera ainsi beaucoup beaucoup plus léger.

Je vous propose cet outil : https://ezgif.com/resize
Vous mettez votre gif, et vous changez la taille avec les informations voulues. Vous cliquez sur le bouton "Resize image!" et hop, il vous génère le même gif animé en plus petit (et moins déformé aussi, parce qu'il resize et crop si besoin). Résultat :



Sur mon test, on passe de 10 Mo à 160.86KiB, donc -98.39% de taille de fichier.
Vous sauvegardez ce résultat, vous l'hébergez, vous faites pareil avec tous vos gifs et c'est gagné !

[cslayers]

Boooonjour

Merci énoooooormément ça fonctionne très bien maintenant
Dire que j'ai enlevé tout mon css et mes templates à l'époque ou je ne comprenais pas XD C'était si simple au final

Encore un grand merciii
Je vais mettre le sujet en résolu du coup

Bonne journée