Présentation

Avec la multitude de formats graphiques existant à l’heure actuelle, il peut s’avérer délicat de choisir la meilleure méthode pour exporter vos images à utiliser dans Edge Animate. Edge Animate prend en charge les images aux formats PNG, GIF, JPG et SVG. Ce guide vous explique ces différents types de format et vous indique quand les utiliser.

Exemple des différents formats

JPEG

Les images JPEG (ou JPG) présentent souvent une meilleure compression que les images PNG et possèdent ainsi une taille réduite. Utilisez les images JPEG lorsque vous n’avez pas besoin de transparence (pour les images d’arrière-plan, par exemple). Dans environ 90 % des cas, vous obtiendrez un fichier plus petit avec le format JPEG, ce qui réduira le temps de chargement de vos compositions. La plupart des outils de conception offrent une option de qualité pour l’exportation au format JPEG, celle-ci est utile lorsque vous souhaitez obtenir un rapport taille d’image/qualité optimal. Plus la qualité est basse, plus la taille du fichier est petite, et inversement. Les fichiers JPEG sont rastérisés et se pixellisent lorsqu’ils sont agrandis.

PNG

Les fichiers PNG conviennent parfaitement lorsque vous avez besoin d’utiliser des images avec de la transparence. Ils prennent également en charge la transparence Alpha, ce qui les rend particulièrement adéquats pour la création de graphiques avec des couleurs transparentes. Les fichiers PNG sont rastérisés et se pixelisent lors de la mise à l’échelle.

Il existe trois principaux formats de PNG.
(Les PNG animés existent également, et peuvent rivaliser avec les GIF animés, mais ils ne font malheureusement pas l’objet d’une prise en charge très étendue sur les navigateurs.)

PNG-8

Le format PNG-8 exporté depuis Photoshop ou Illustrator ne prend pas en charge la transparence Alpha, ce qui signifie que chaque pixel est transparent ou opaque, produisant ainsi des effets de crénelage au niveau des courbes ou des bords de diagonale (voir le graphique ci-dessus). Cependant, si votre graphique contient des lignes droites et que vous avez besoin de transparence (par exemple pour un carré bleu avec un arrière-plan transparent), le format PNG-8 est le choix de prédilection pour obtenir une taille de fichier optimale.

PNG-24

Le format PNG-24 prend en charge la transparence Alpha, ce qui signifie que vous pouvez utiliser de fines variations de translucidité. Il s’agit du format le plus répandu pour Edge Animate car les images PNG transparentes permettent de profiter de graphismes nets avec prise en charge de la transparence pour organiser vos éléments en calques.

PNG-32

PNG-32 est semblable à PNG-24 à l’exception près qu’il offre également 8 bits de transparence.

SVG

Le format SVG préserve votre contenu vectoriel à l’exportation de manière à ce qu’il puisse être redimensionné sans pixellisation dans le navigateur. A l’heure actuelle, Edge Animate gère les fichiers SVG en tant que graphiques aplatis. Ainsi, lorsque votre contenu est transféré dans Edge Animate, il ne peut plus être modifié (même si vous pouvez toujours mettre à jour et réenregistrer votre graphique à la volée dans votre programme de création graphique). Le format SVG ne doit être utilisé que lorsque vous avez besoin de mettre à l’échelle vos graphiques en raison de leur taille de fichier accrue. Il est actuellement plus sûr d’utiliser le format PNG sur le Web en raison de la présence de problèmes relatifs à la prise en charge inter-navigateurs.

Lorsque vous utilisez Illustrator pour exporter des fichiers SVG, n’oubliez pas que ce que vous voyez n’est pas forcément ce que vous obtenez. Adobe Illustrator exporte en effet les fichiers et les calques masqués, ce qui peut considérablement augmenter la taille des fichiers. La taille de votre fichier SVG sera également la taille du plan de travail, avant de l’enregistrer, veillez donc à réduire la taille du plan de façon à ce qu’elle corresponde à la taille de l’image.

Il existe plusieurs formats SVG avec des restrictions différentes. SVG 1.1 est le format recommandé par le W3C.

GIF

Les fichiers GIF sont utiles lorsque vous souhaitez que l’animation soit contenue dans votre graphique (par exemple, un preloader). Le format GIF prend également en charge la transparence, avec toutefois les mêmes restrictions que le format PNG-8. Les images PNG présentent généralement une meilleure compression avec une qualité plus élevée que les images GIF. Il est donc recommandé d’utiliser les images GIF uniquement lorsque vous souhaitez que l’animation soit contenue dans un graphique.

Dimensions de l’image

Quel que soit le format de fichier que vous utilisez, en raison de la nature du Web, certaines situations produiront des problèmes lors de la gestion de graphiques.

Graphiques pour iOS

A l’heure actuelle, les images sur iOS se déforment et sont redimensionnées si elles dépassent 1 024 x 1 024 px. Si vous avez besoin d’images de dimensions supérieures à celles-ci pour une utilisation sur iOS, essayez de couper l’image en au moins deux images plus petites et rassemblez-les à l’aide d’un symbole ou d’un groupe dans Edge Animate.

Problèmes connus avec l’animation d’image

Au moment de la rédaction du présent document, il existe quelques problèmes relatifs à certains styles d’animations en raison de limitations de navigateur.

  • L’animation d’un élément sur une longue période de temps avec de très petits incréments peut rendre l’animation instable. Par exemple, l’animation d’une image de 100 à 103 % sur une période de 2 s. Pour éviter ce problème, essayez d’augmenter la durée de la transition ou d’augmenter la valeur de la transition.
  • L’animation d’images de très grande taille ou la création de transitions redimensionnant l’image à très grande échelle, peuvent entraîner des problèmes dans certains navigateurs.

En savoir plus

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne