Création de bannières web en HTML5 (Google Web Designer, Animate CC.

Bonjour à tous,

Je cherche à réaliser une bannière publicitaire de 300x250px et en optimiser le poids. Je précise que je débute en bannières en HTML5. J'ai eu des specs de la régie publicitaire, et je dois créer une bannière qui doit faire moins de 50ko, que ce soit du gif ou du HTML5.

Pour ce faire, j'ai utilisé l'outil Google Web Designer ainsi que Animate CC pour m'initier aux bannières pubs en HTML5. Dans les 2 cas, j'ai fait une animation toute simple : 3 étapes - chacune contenant une phrase, un picto en png (moins de 5Ko), avec un aplat de couleur - qui arrivent de la droite, restent 4 secondes, et repartent vers la gauche. Et c'est tout.

Lorsque j'exporte mes fichiers, mon dossier final fait 78Ko pour Animate, 81Ko pour Google Web Designer. Pour l'un, mon fichier html (qui combine html + css + js) fait 63Ko, pour l'autre, rien que le fichier .js fait 60Ko. (et mes images toutes confondues 15Ko).

Bref, j'essaie d'être la plus précise possible pour que vous compreniez mon soucis : mais comment diable faire rentrer une animation en HTML5 dans 50Ko tout compris, sur un format pas très grand, animée de façon simple, avec que des aplats et une palette de 6 couleurs grand max ???? Est-ce que ça veut dire que ces outils ne sont pas adaptés aux exigences des régies ? Est ce qu'il vaut mieux coder tout soi-même ?

Merci beaucoup pour vos réponses

Pour le JS (ou même le css ^^ ) tu peux essayer de le minifier

https://jscompress.com/

tu copie colle ton javascript, tu clic sur minify et tu n'aura plus de saut de ligne etc.. c'est bien pour les gros fichiers.

Par contre la différence que cela va apporter si tu as 18 Ko de plus..... plus personne a de Modem 56K.

Bjr, la réponse m'intéresse osi...

Les fichiers googl sont crados à balle (blindé de java et tout), faut pas mieux tout coder à la mano ?

Mais Ui La Technique Idéale m'intéresse aussi

Avec Google Web Designer, c'est déjà minifié je crois. Pour animate, j'ai minimifié et j'ai gagné 8Ko, un truc comme ça. ça dépasse toujours

J'ai également testé de séparer le CSS du JS et du HTML, en me disant que j'allais héberger les fichiers autre part et faire des appels, mais la régie ne veut pas. Il faut que tout soit livré ensemble.

Je vous mets un petit screen de tous les fichiers que l'app de Google me sort, une fois l'exportation faite.
J'avoue que je ne sais pas ce qui est nécessaire, ce que je peux virer pour alléger. J'ai testé plein de paramètres à la création de mon fichier, à l'exportation, enlevé des typos, allégé au maximum mes images, mais mes fichiers sont toujours trop lourds. J'avoue que je sèche sur le sujet, et je ne trouve pas grand chose sur le net pour m'aider


Modifié par MyCeline (31 Aug 2016 - 15:32)

MyCeline a écrit :
Est-ce que ça veut dire que ces outils ne sont pas adaptés aux exigences des régies ? Est ce qu'il vaut mieux coder tout soi-même ?

Non, ils ne sont pas adaptés.
Oui, enfin quand les exigences sont si draconiennes. (au vu de la discription, en 5 ko on peut largement écrire le code, reste 45 pour les images)

Peut-être que je peux gagner encore quelques Ko en faisant des fondus plutôt que des translates, mais je trouve que c'est faire du bricolage.. Soit ce sont les régies qui sont déconnectées avec le monde du Web actuel, soit ce sont les outils qui ne sont pas en phase avec la réalité du terrain...

Et bien si chaque bannière de 300x200 pesait entre 300 et 400 ko, on ne s'en sortirait pas.
Après j'ai vu des bannière vidéo de 2 ou 3 mégas, mais généralement ça se paie (cher).

Il y a plein de tarifs et de limitation différentes (parfois qui diffère avec l'initiation par l'utilisateur, genre 100ko avant, 800 ko supplémentaire après ), après on ne peut pas faire un contrat sure une limitation de 50ko et espérer l'animation ultime qui épatera la galerie.

Sinon, les limitations sont source de créativité!