Les différents formats d'image

créé le .

Jpeg

Le format Jpeg est certainement le format d'image le plus connu de tous. Il a pris le relais des très anciens format pour offrir une image de grande qualité. Ce format enregistre tous les pixels ainsi que d'autres informations tels que le logiciel utilisé pour créer l'image. Son poids est relativement léger mais peut être très lourd lorsqu'il s'agit d'une photo par exemple.

PNG

Moins connu que le format jpeg mais pourtant très utile, le format Png propose des images de bonne qualité également à l'instinct du format Jpeg. Son gros avantage est d'accepter les fonds transparents. Grâce au format Png, vous pourrez aisément détourer une image pour l'incruster sur le fond que vous souhaitez.

Gif

Le format Gif, également très connu est en fin de vie. Ce format a été longtemps utilisé pour proposer des animations simples et légères. grâce à la superposition de calques, Le .gif permet de résoudre une animation en proposant des temps d'affichage avant de passer au prochain calque. Ce format léger permet alors de proposer des dizaines de calques et d'offrir des animations élaborées. Aujourd'hui, les animations se font plus rares en dehors de celles proposées en javascript. Les sites proposant des Gifs sont jugés vieillots comme leurs animations. Sympatiques pour des sites d'enfants, les animations gifs ont tendances à nuire à la qualité du site. De nombreux sites proposent aujourd'hui des gifs gratuits sur des thématiques très variées.

SVG : un format d'image vectoriel pour le web ultra léger

Le format .svg pour Scalable Vector Graphic est un format utilisé, comme son nom l'indique, pour des images ou du dessin vectoriel. Compatible avec la majorité des navigateurs ( à partir de IE9), SVG est léger car ne comporte que quelques informations sur la forme, la couleur ou l'effet. Le gros avantage du dessin vectoriel est qu'il permet d'être étirable à volonté sans perte de qualité. Le format .svg est présent dans le DOM et peut-être édité avec un simple éditeur de texte. Ainsi, le format .svg peut-être manipulé dans le CSS. Un autre avantage est qu'il interagit avec les autres langages tels que le javascript. Des outils tels que Inskape, Open office, Illustrator permettent la création d'un tel format d'image. Par contre, le célèbre Gimp ou Paint.net sont incompatibles. Les images .svg peuvent être introduites comme toutes autres images via la balise <img>. Cependant, une balise <svg> existe également. La balise <svg> est utilisé davantage pour créer une image au format html, css et javascript alors que la balise <img> est utilisée pour insérer une image déjà créée. Voici le code du dessin présenté sur fond jaune :

<svg style="height:200px; width:200px; background-color:yellow;">
<rect x="100px" y="100px" width="90" height="50" stroke="rgba(0,0,0,0.5)" stroke-width="4" fill="#ddd" />
<circle cx="90" cy="90"  r="85" stroke="#000" stroke-width="2" fill="none" />
<circle cx="45" cy="45" r="40" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" />
</svg>
Le format svg étant fonctionnel avec du javascript, vous pouvez alors créer de superbes animations !



Vous notre contenu ?

Lisez toute l'info de Formaweb avec votre café


Laissez nous un commentaire...