<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>les plans trop cools du web... &#187; animation</title>
	<atom:link href="http://www.trocool.com/tag/animation/feed" rel="self" type="application/rss+xml" />
	<link>http://www.trocool.com</link>
	<description>... sont sur trocool.com</description>
	<lastBuildDate>Thu, 05 Feb 2026 04:16:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>La meilleure compression pour un gif animé</title>
		<link>http://www.trocool.com/la-meilleure-compression-pour-un-gif-anime</link>
		<comments>http://www.trocool.com/la-meilleure-compression-pour-un-gif-anime#comments</comments>
		<pubDate>Thu, 24 Jun 2010 22:25:13 +0000</pubDate>
		<dc:creator>yvesdamin</dc:creator>
				<category><![CDATA[Graphisme]]></category>
		<category><![CDATA[Informatique]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[gif]]></category>
		<category><![CDATA[optimisation]]></category>
		<category><![CDATA[optimiser]]></category>

		<guid isPermaLink="false">http://yvesdamin.wordpress.com/?p=343</guid>
		<description><![CDATA[Pour faire simple, on enregistre essentiellement une image pour le web au format JPG, GIF ou PNG. JPG : pour les photos avec des nuances de couleurs plus fines GIF : pour les logos, pictos et lettrages, avec des couleurs &#8230; <a href="http://www.trocool.com/la-meilleure-compression-pour-un-gif-anime">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="padding-top:5px;padding-right:0px;padding-bottom:5px;padding-left:0px;;">
											<iframe
												style="height:25px !important; border:0px solid gray !important; overflow:hidden !important; width:550px !important;" frameborder="0" scrolling="no" allowTransparency="true"
												src="http://www.linksalpha.com/social?blog=les+plans+trop+cools+du+web...&link=http%3A%2F%2Fwww.trocool.com%2Fla-meilleure-compression-pour-un-gif-anime&title=La+meilleure+compression+pour+un+gif+anim%C3%A9&desc=Pour+faire+simple%2C+on+enregistre+essentiellement+une+image+pour+le+web+au+format+JPG%2C+GIF+ou+PNG.+JPG+%3A+pour+les+photos+avec+des+nuances+de+couleurs+plus+fines+GIF+%3A+pour+les+logos%2C+pictos+et+lettrages%2C+avec+des+couleurs+en+%C3%A0-plat%2C+avec+la+particularit%C3%A9+de+faire+des+animations.+PNG+%3A+pour+les&fc=333333&fs=arial&fblname=like&fblref=facebook&fbllang=fr_FR&fblshow=1&fbsbutton=1&fbsctr=1&fbslang=fr&fbsendbutton=1&twbutton=1&twlang=en&twmention=&twrelated1=&twrelated2=&twctr=1&lnkdshow=show&lnkdctr=1&buzzbutton=1&buzzlang=en&buzzctr=1&diggbutton=1&diggctr=1&stblbutton=1&stblctr=1&g1button=1&g1ctr=1&g1lang=en-US">
											</iframe>
										</div><p><img class="alignright size-full wp-image-23" title="certifie_trocool_vert" src="http://www.trocool.com/wp-content/uploads/2011/03/certifie_trocool_vert.png" alt="site trocool" width="200" height="140" />Pour faire simple, on enregistre essentiellement une image pour le web au format JPG, GIF ou PNG.<br />
<strong>JPG</strong> : pour les photos avec des nuances de couleurs plus fines<br />
<strong>GIF</strong> : pour les logos, pictos et lettrages, avec des couleurs en à-plat, avec la particularité de faire des animations.<br />
<strong>PNG</strong> : pour les deux, mais avec la spécificité de gérer la transparence (préférence pour le PNG-24 qui gère mieux antialiasing).<br />
<em>Aliasing : aspect crénelé autour des images qui ne fait pas très propre.</em></p>
<p><a href="../web-trocool"><img class="aligncenter" title="les plans web trop cool sur internet" src="../wp-content/uploads/2011/05/webtrocool_468x60.gif" alt="dépannage, astuces et tutoriels mac et pc" width="468" height="60" /></a></p>
<p>Partant de ce constat, Photoshop propose la fonction <strong><a href="http://yvesdamin.wordpress.com/2009/11/23/preparer-ses-images-pour-le-web" target="_self">&laquo;&nbsp;enregistrer ses images pour le web&nbsp;&raquo;, sur laquelle j&#8217;ai détaillé les spécificités ici.</a></strong></p>
<p>Le nerf de la guerre pour les <a title="Devenir graphiste freelance ou en agence, écoles et formations" href="http://www.trocool.com/devenir-graphiste-freelance-ou-en-agence-ecoles-et-formations">graphistes</a> fut un temps la rapidité d&#8217;affichage du fait de générations de modems 56k, l&#8217;ADSL étant loin d&#8217;être aussi démocratisée que maintenant. Cependant, comme j&#8217;en parle dans mon article sur la <strong><a href="http://http://yvesdamin.wordpress.com/2009/11/23/preparer-ses-images-pour-le-web" target="_self">préparation des images pour le web</a></strong>, il est primordial d&#8217;optimiser l&#8217;iconographie du web.<br />
Certes, le taux d&#8217;équipement des ordinateurs des foyers, entreprises et écoles est indiscutablement conséquent, et beaucoup ont souscrit une offre ADSL à gros débit, aussi on peut considérer qu&#8217;on peut se permettre de mettre des fichiers plus lourds en ligne&#8230;<br />
Oui&#8230; mais non. Il y a des cas de figures pour lesquels le poids est une contrainte majeure, je pense à une utilisation bien particulière : les e-mailings.</p>
<p>Un e-mailing, s&#8217;il est lourd, soit ne passera pas le seuil acceptable d&#8217;un poids limite, soit sera considéré par le <a title="Optimiser sa messagerie avec Entourage" href="http://www.trocool.com/?p=164">logiciel de messagerie</a> comme du spam et sera traité comme indésirable, soit tout simplement la lenteur pour ouvrir la pièce jointe (ou insérée) va décourager le destinataire qui le mettra illico à la corbeille.</p>
<p><strong>Il est donc important de veiller à gagner des octets là où l&#8217;on peut.</strong><br />
Fort de ce constat, j&#8217;ai étudié pas mal de paramètres pour l&#8217;enregistrement des images gif.<br />
Pour le jpg ou le png, il n&#8217;y a pas 36 options, c&#8217;est très simple. En revanche le gif a énormément plus d&#8217;options, de paramètres complémentaires qui peuvent détériorer la qualité d&#8217;image ou l&#8217;alourdir considérablement.</p>
<p><a href="http://action.metaffiliation.com/suivi.php?mclic=S411D1530B6B1333" target="_blank"><img class="aligncenter" src="http://action.metaffiliation.com/suivi.php?maff=S411D1530B6B1333" border="0" alt="" /></a><br />
<!-- END CODE NetAffiliation --><strong>Eh oui, il y a un équilibre à trouver, un compromis redoutable qui s&#8217;offre au graphiste : privilégier la qualité ou la taille de l&#8217;image</strong><strong>.</strong></p>
<p>Le gif animé peut être désespérant au niveau de l&#8217;enregistrement : lors de sa conception on n&#8217;a aucun souci de couleurs, les dégradés et nuances restent subtils, par contre le gif peut vraiment abîmer le rendu final.<br />
Déjà on n&#8217;a pas le choix du format, car le jpg et le png sont pour les images fixes, pour l&#8217;animation, à moins de faire du flash, pas d&#8217;alternative !<br />
Pour le coup où l&#8217;on a des photos faisant partie intégrante du projet, bonjour la dégradation d&#8217;image !</p>
<p style="text-align: left;">Je mets donc en ligne <strong>le meilleur réglage auquel je suis parvenu pour le  traitement des gifs animés,</strong> qui n&#8217;altère pas trop l&#8217;image et prépare un fichier de taille optimale :</p>
<p style="text-align: center;"><img class="aligncenter size-medium wp-image-384" title="Meilleure compression gif animation" src="http://www.trocool.com/wp-content/uploads/2010/06/gif_01-300x211.jpg" alt="" width="300" height="211" /><a href="http://www.trocool.com/wp-content/uploads/2010/06/gif_02.gif"><img class="aligncenter size-full wp-image-385" title="Meilleurs réglages taux de compression d'image dans Photoshop" src="http://www.trocool.com/wp-content/uploads/2010/06/gif_02.gif" alt="" width="327" height="263" /></a><a href="../web-trocool"><img title="les plans web trop cool sur internet" src="../wp-content/uploads/2011/05/webtrocool_468x60.gif" alt="dépannage, astuces et tutoriels mac et pc" width="468" height="60" /></a></p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-345" title="gif_01" src="http://yvesdamin.files.wordpress.com/2010/06/gif_01.jpg" alt="" width="470" height="330" /></p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-346" title="gif_02" src="http://yvesdamin.files.wordpress.com/2010/06/gif_02.gif" alt="" width="327" height="263" /></p>
<div style="padding-top:5px;padding-right:0px;padding-bottom:5px;padding-left:0px;;">
											<iframe
												style="height:25px !important; border:0px solid gray !important; overflow:hidden !important; width:550px !important;" frameborder="0" scrolling="no" allowTransparency="true"
												src="http://www.linksalpha.com/social?blog=les+plans+trop+cools+du+web...&link=http%3A%2F%2Fwww.trocool.com%2Fla-meilleure-compression-pour-un-gif-anime&title=La+meilleure+compression+pour+un+gif+anim%C3%A9&desc=Pour+faire+simple%2C+on+enregistre+essentiellement+une+image+pour+le+web+au+format+JPG%2C+GIF+ou+PNG.+JPG+%3A+pour+les+photos+avec+des+nuances+de+couleurs+plus+fines+GIF+%3A+pour+les+logos%2C+pictos+et+lettrages%2C+avec+des+couleurs+en+%C3%A0-plat%2C+avec+la+particularit%C3%A9+de+faire+des+animations.+PNG+%3A+pour+les&fc=333333&fs=arial&fblname=like&fblref=facebook&fbllang=fr_FR&fblshow=1&fbsbutton=1&fbsctr=1&fbslang=fr&fbsendbutton=1&twbutton=1&twlang=en&twmention=&twrelated1=&twrelated2=&twctr=1&lnkdshow=show&lnkdctr=1&buzzbutton=1&buzzlang=en&buzzctr=1&diggbutton=1&diggctr=1&stblbutton=1&stblctr=1&g1button=1&g1ctr=1&g1lang=en-US">
											</iframe>
										</div>]]></content:encoded>
			<wfw:commentRss>http://www.trocool.com/la-meilleure-compression-pour-un-gif-anime/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
