Optimiser une bannière animée

[Bambouille]

Bonjour,

J'ai fait une bannière animée de 940x200 dans photoshop CS 5.5.
Je suis plutôt content du résultat si ce n'est qu'après l'avoir enregistrée pour le web, elle pèse 3,5 Mo :eek:
Suis-je condamné à réduire fortement ses dimensions ou existe t'il un moyen de diminuer son poids sans réduire sa qualité visuelle ?
J'ai bien sûr essayé toutes les options dans "enregistrer pour le web", mais toutes influent beaucoup trop sur la qualité.

 

[Niconemo]

J'ai fait une bannière animée de 940x200 dans photoshop CS 5.5.

Le problème déjà c'est 940x200 quoi ? mètres ?

Ensuite, dans quel format l'as tu enregistré ? Gif, je suppose ?

Combien d'images ?

Tu as bien réduit le nombre de couleurs indexées ? (bien tester les différentes options de couleurs indexées)

existe t'il un moyen de diminuer son poids sans réduire sa qualité visuelle ?

Non. Sauf si l'animation a déjà peu de couleurs à la base et des parties en aplats.

Il faut aussi que toute la surface ne soit pas animée (seulement un bout) pour que l'optimisation se fasse à plein régime (les pixels qui ne bougent pas ne sont codés qu'une fois).

Sur une grosse bannière (surtout avec beaucoup d'images) il faut obligatoirement gérer ces 3 critères (peu de couleurs, des aplats, des parties fixes). Tu va diviser au moins par 10 le poids de ton fichier. De toute façon tu n'as pas le choix. Même divisé par 20 ça reste un gros fichier.

---------- Nouveau message ajouté à 15h37 ---------- Le message précédent a été envoyé à 15h28 ----------

Et puis j'oubliais :
900 px d'animation gif, ça peut vite devenir énorme !
Une bannière ça peut se découper en plusieurs bouts.
Il faut animer un petit bout en gif et l'afficher à côté d'un fond fixe raccord.

Par exemple, cette bannière est absurde on voit bien qu'il n'y en a qu'une partie animée, le fond aurait du être fait à part et le tout superposé après.

Ou alors il faut passer par du flash.

 

[Bambouille]

Le problème déjà c'est 940x200 quoi ? mètres ?

Ensuite, dans quel format l'as tu enregistré ? Gif, je suppose ?

Tu chipotes là !
C'est en pixel et si c'est animé, c'est que c'est du gif.

Combien d'images ?

4 photos enregistrées au préalable pour le web

Tu as bien réduit le nombre de couleurs indexées ?

Quésako ?

Et puis j'oubliais :
900 px d'animation gif c'est énorme !
Une bannière ça peut se découper en plusieurs bouts.
Il faut animer un petit bout en gif et l'afficher à côté d'un fond fixe raccord.

Ou alors il faut passer par du flash.

Je ne peux pas la découper, c'est comme un diaporama.

 

[Niconemo]

OK. Alors…

d'abord…

Un diaporama de photos, ce n'est pas très adapté au Gif. C'est difficile à optimiser proprement à cause du nombre de couleurs et du fait qu'aucun pixel n'est fixe sur toute l'animation, et que une photo se prête généralement mal au gif, même fixe… et en plus on faut des trucs bien meilleurs en javascript (chercher dans les diaporama jquery, par exemple).

ensuite, concernant les couleurs indexées…

Le format Gif est un format d'image en couleurs indexées. Ça veut dire qu'il y a un nombre de couleurs limitées (et bien définies) sur chaque document : 256 au maximum. Mais on peut réduire volontairement le nombre de couleurs pour gagner du poids (avec un effet pointillé si les images ne sont pas bien adaptées à cette manipulation).

cela dit, arriver à un gif de 35,5 Mo avec seulement 4 images, ça veut dire, je pense, qu'il n'y a pas la moindre optimisation.

Dans enregistrer pour le web
Essaie de réduire le nombre de couleurs (autour de 128 pour commencer) et de jouer sur les paramètres de tramage (diffusion, sans, etc.) et de sélection des couleurs (adaptative, sélective, etc.) pour réduire le poids de ton image.

---------- Nouveau message ajouté à 16h42 ---------- Le message précédent a été envoyé à 16h25 ----------

Ici, par exemple, on a une animation de de 300 par 300 px (donc 2 fois moins de pixels que toi) qui fait 0,5 Mo (pour 17 vues quand-même !).

Mais à y regarder de plus près :

1. Des grosses parties de l'image sont fixes : une fois apparues, elles ne bougent plus
2. Il y a une gamme de couleurs très restreinte à la base (du beige au rouge brique) : on a pu réduire à 64 couleurs indexées au lieu de 256 en travaillant sur la méthode de tramage.
3. malgré ça, on distingue une trame diffuse. Cette animation n'aurait jammais été possible avec des photos de couleurs très différentes (ciels bleus, arbres verts, terres rouges, etc.)

Mais comme je le disais, maintenant on ne fait plus cela…

… mais ceci (exemple).

On utilise pour ça :
en XHTML 4 : javascript (une librairie type Jquery avec un plugin qui fait tout pour nous)
ou, désormais, en HTML 5.

 

[Bambouille]

cela dit, arriver à un gif de 35,5 Mo avec seulement 4 images, ça veut dire, je pense, qu'il n'y a pas la moindre optimisation.

Dans enregistrer pour le web
Essaie de réduire le nombre de couleurs (autour de 128 pour commencer) et de jouer sur les paramètres de tramage (diffusion, sans, etc.) et de sélection des couleurs (adaptative, sélective, etc.) pour réduire le poids de ton image..

Il ne fait pas 35 mais 3,5 Mo
Je suis une burne mais quand même

Concernant l'indexation des couleurs, oui j'avais tenté dans les options. J'ai tout essayé.
Je viens de faire l'essai avec Flash, c'est pas gagné :siffle:

Mais merci pour tes précieux conseils. Et je suis sûr que quelqu'un qui maîtrise te fait ça en 10 min !
Je rage !

Je vais regardé du côté du javascript.

 

[ccciolll]

Déjà, tu dis 4 images, mais est-ce que tu fais des fondus entre les images ? SI oui, ça fait bcp plus que 4.
Ensuite, s'il s'agit de photos, le gif est en effet à éviter. D'autant que, si je ne me trompe, avec 4 photos, tu auras 256/4 couleurs soit en moyenne 64 couleurs par photo, un peu pauvre (bon ça c'est le pire des cas, on peut imaginer que certaines couleurs sont présentes sur plusieurs photos donc plus que 64, mais quand-même.)
Je pense également que pour un diapo de photo, le gif animé n'est pas la bonne solution. Mais je n'ai pas de solution à te proposer, je connais très peu le web.

 

[Niconemo]

Je plussoie pour l'histoire des transitions : si il y a des fondus ou des mouvements, ce sont des images en plus au final.

La meilleure solution est à mon avis :

Une bannière/diaporama JavaScript (un plugin pour Jquery ou Motool, par exemple qui sont des librairies JavaScript) . C'est bien plus léger car chaque image bénéficie de sa propre compression Jpeg (plus léger et propre que le Gif pour les photos) et en plus on a des effets de transition de malade. Le choix est vaste mais j'en ai donné un exemple plus haut. Pratquement toutes les bannières en diaporama que l'on voit sur le web sont faites comme ça.

En voici un autre parmi les plus basiques (non stylé ici mais ça c'est à vous de le faire).
La partie html ressemble simplement à ça :

<div id="[COLOR=DarkRed][B]slider[/B][/COLOR]">
<ul>
<li><img src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/images/01.jpg"]/images/01.jpg[/URL]" /></li>             
<li><img src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/images/02.jpg"]/images/02.jpg[/URL]" /></li>             
<li><img src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/images/03.jpg"]/images/03.jpg[/URL]" /></li>             
<li><img src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/images/04.jpg"]/images/04.jpg[/URL]" /></li>             
<li><img src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/images/05.jpg"]/images/05.jpg[/URL]" /></li>                     
</ul>     
</div>

C'est du HTML tout ce qu'il y a de plus ordinaire et valide. Ça s'intègre à n'importe quel site, même à un CMS…

Il faut juste ajouter ça dans <head> :

<script type="text/javascript" src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/js/easySlider1.5.js"]js/easySlider1.5.js[/URL]"></script>
<script type="text/javascript">
$(document).ready(function(){ 
$("#[B][COLOR=DarkRed]slider[/COLOR][/B]").easySlider();
});     
</script>

Autant dire que ça ne vaut même pas la peine de s'em*****der avec un gif !

Les autres solutions sont :

Le HTML 5 (ça, pour faire simple, c'est plutôt pour l'avenir, même si des outils fonctionnels sont en train de voir le jour)

Le Flash (pratique et efficace, mais propriétaire et pas compatible avec les iBidules)

 

[Bambouille]

Vous avez parfaitement raison puisqu'avec mon fondu j'arrive à 36 images !
J'ai viré quelques fondus et j'ai gagné 1,5Mo et ça reste "joli".

Pour l'instant ma planche de salut serait flash.
Pour le javascript ou jquery, j'utilise déjà un plugin qui me permet d'afficher une bannière animée dans wordpress.
Je cherche.....

 

[Bambouille]

Bon et bien ça y est.
Je me suis sorti les doigts et j'ai fait ma bannière avec Flash !
Conclusion : fondu bien plus joli et elle ne pèse que 281 Ko :cool

Je suis trop fort

Merci pour tous vos conseils !

 

[jeanba3000]

hum, 281ko pour une bannière, comment dire ?

Tu devrais te poser la question de ce qu'elle apporte à ton site et si elle mérite un tel poids. Si c'est juste de la déco, c'est complètement disproportionné&#8230; Tu devrais viser dix fois moins !

 

[Niconemo]

hum, 281ko pour une bannière, comment dire ?

Tu devrais te poser la question de ce qu'elle apporte à ton site et si elle mérite un tel poids. Si c'est juste de la déco, c'est complètement disproportionné… Tu devrais viser dix fois moins !

Le gif se charge dans l'ordre des images. Avec les débits d'aujourd'hui, c'est acceptable comme poids si la page d'accueil n'est pas trop chargée, au pire le premier cycle sera un peu lent.

Par contre je pensais avoir démontré qu'il y a vait bien mieux et encore plus simple et plus souple dans mon précédent message…

J'aurais peut-être du ajouter qu'un diaporama jquery de 4 photos de 9 x 200 px avec compression jpeg qualité haute et des transitions très douces pèse seulement 150 ko.

 

[Bambouille]

Par contre je pensais avoir démontré qu'il y a vait bien mieux et encore plus simple et plus souple dans mon précédent message…

J'aurais peut-être du ajouter qu'un diaporama jquery de 4 photos de 9 x 200 px avec compression jpeg qualité haute et des transitions très douces pèse seulement 150 ko.

J'ai bien entendu tes remarques. J'ai pris la solution qui pour moi était la plus efficace de par mes connaissances.
De plus, vous avez parlé tout les deux de Flash. J'en ai conclu que ce n'était pas une mauvaise solution.

Jquery pour moi ça me rappelle vaguement une bibliothèque que j'avais installée dans un site Spip pour pouvoir me servir d'un plugin. Aucune idée de comment faire un diaporama avec.
Et c'est pas les recherches sur le net qui m'ont rassurées !

 

[Niconemo]

C'est pourtant simple.

1. Tu récupère une version récente de jquery (c'est gratuit et facile à trouver)
2. Tu récupères le plugin Jquery qui t'intéresse
3. Tu met ces deux fichiers à la racine de ton site dans un dossier (qu'on nomme habituellement JS comme "javascript" par commodité)
4. Tu inclue un appel vers ces deux fichiers dans le <head> de ton fichier.

Ça va ressembler à ça :

<script type="text/javascript" src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/js/jquery.js"]/js/jquery.js[/URL]"></script>
<script type="text/javascript" src="[URL="http://forums.macg.co/view-source:http://cssglobe.com/lab/easyslider1.5/js/easySlider1.5.js"]/js/easySlider1.5.js[/URL]"></script>

Tout le reste est décrit dans mon avant dernier message mais je détaille un peu&#8230;

il faut généralement placer un petit javascript d'initialisation (qu'on te donne)
Celui pour le plugin en question

<script type="text/javascript"> 
$(document).ready(function(){  $("#slider").easySlider(); }); 
</script>

Ici le script définit simplement que toute liste de photos qui sera placé dans une div avec l'id #slider (mais on met bien le nom qu'on veut) sera transformée en diaporama.

Là, par exemple au lieu d'afficher les images les unes au dessous des autres, (comportement par défaut d'une liste) le plugin easySlider va en faire un diaporama.

<div id="slider">
<ul>
<li><img src="/images/01.jpg" /></li>
<li><img src="/images/02.jpg" /></li>
<li><img src="/images/03.jpg" /></li>
<li><img src="/images/04.jpg" /></li>
<li><img src="/images/05.jpg" /></li>
</ul>
</div>

La plupart des plugins Jquery fonctionnent sur ce principe. Quand je dis que c'est simple, ça l'est vraiment !

Après il y a bien entendu des paramétrages possibles mais c'est rarement très complexe.

 

[Bambouille]

Et c'est la taille des photos qui détermine la taille de la bannière ou il faut l'indiquer dans le code ?

 

[Niconemo]

Ça dépend des plugins mais pour celui ci en particulier, ça a l'air d'être par défaut, ta taille des éléments (images mais ça peut être l'élément <li> une div, etc.) présentes dans la liste qui détermine la taille du diaporama.

Mais ça peut se styler sans problème de cette façon :
#slider li{ width:696px; height:241px; overflow:hidden; }

 

[momo-fr]

Conclusion : fondu bien plus joli et elle ne pèse que 281 Ko :cool
Je suis trop fort
Merci pour tous vos conseils !

Il ne fallait regarder le doigt qui te montrait la lune mais la lune elle même&#8230;