Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Choisir entre les formats d'images du web

Ce tutoriel va vous expliquer comment utiliser des graphiques conçus pour le Web dans Dreamweaver CS5.

Il est temps d'ajouter quelques images de nos pages.

Dans les premiers jours de sites web qu'ils contenaient uniquement du texte, et c'était un peu avant graphismes sont arrivés. De nos jours, la majorité des sites Web incluent des éléments graphiques, et pour beaucoup d'entre eux les photographies, les vidéos, les dessins et les animations sont une partie essentielle du message qu'ils donnent ou des informations qu'ils fournissent.

Il s'agit en fait étonnamment facile d'inclure des graphiques dans vos pages Web en utilisant Dreamweaver, mais vous devez être conscient de quelques choses d'abord. Les graphiques peuvent être présentés dans un certain nombre de formats différents, et il est important de choisir celui qui convient à vos besoins.

Images JPEG

Nous allons commencer avec une photo de Fleurs. Il est au format JPEG, ce qui nous y reviendrons dans un instant.

Fleurs en jpeg

Nous pourrions l'intégrer dans une page Web en utilisant l'une d'un certain nombre de formats différents. Pour choisir le bon format pour le travail que vous devez prendre en compte plusieurs facteurs clés, et en particulier ces trois.

Tout d'abord, l'image sera d'une certaine taille en termes d'espace de stockage informatique. Quelle que soit la taille, il est (en octets) permettra de déterminer combien de temps il faut pour télécharger sur les ordinateurs de vos visiteurs. Fondamentalement, le plus petit, il est en octets, mieux c'est.

Deuxièmement, la qualité de l'image doit être aussi haute que vous pouvez le faire. En termes simples, le plus de détails que vous avez, mieux c'est (haute résolution) sera l'image sur les écrans PC visiteurs. Cette situation est aggravée par le fait que les meilleurs résultats sont généralement atteint lorsque vous utilisez un grand nombre (en millions) de couleurs. Stocker un plus grand nombre de couleurs utilise également l'espace. Donc, dans la mesure où l'espace de stockage pour la qualité est concernée, le plus grand le meilleur.

Nous avons clairement besoin d'un compromis pour couvrir ces deux premiers points.

Le troisième facteur principal est que vous devez utiliser un format qui permet d'obtenir les meilleurs résultats à travers une gamme de navigateurs, versions de navigateurs et systèmes d'exploitation.

Les formats qui toujours obtenir les meilleurs résultats par rapport à ces trois exigences sont généralement considérés comme GIF, JPEG et PNG.

Images GIF

Voici la même photo de fleurs en format GIF.

Fleurs en GIF

Images PNG

Voici encore la photo de fleurs au format PNG.

Fleurs en PNG

Vous ne pouvez pas voir beaucoup de différence, mais cela dépend de votre résolution d'écran et de la configuration des couleurs.

Le format GIF (Graphic Interchange Format) est généralement utilisé pour les images telles que des dessins et des animations simples. GIF ne supporte que 256 couleurs, donc ce n'est pas vraiment adapté pour les images photographiques de haute qualité. L'image GIF utilise ci-dessus 45 KB (45 000 octets), qui est le moins des trois. Toutefois, la qualité de l'image en souffre en conséquence. GIF atteint un bon niveau de cohérence entre les différents navigateurs, et les images GIF peuvent contenir des zones transparentes, ce qui signifie qu'ils peuvent avoir des formes irrégulières.

Le format JPEG (Joint Photographic Experts Group) est principalement destiné aux photographies et peut prendre en charge des millions de couleurs. Des images JPEG en général peuvent bien paraître sur les écrans, mais ne s'impriment pas bien. JPEG ne supporte pas les zones transparentes dans une image. L'image ci-dessus utilise JPEG 133 Ko.

le format PNG (Portable Network Graphic) a été introduit en deux formats, l'un destiné à remplacer le format GIF et un uatre destiné à remplacer JPEG. Les images PNG peuvent avoir des zones transparentes et peuvent être particulièrement cohérentes entre les différents navigateurs et systèmes d'exploitation. Un inconvénient est que certaines versions de navigateurs anciens ne supportent pas le PNG. L'image PNG ci-dessus utilise 234 KB. Notez que la taille des images suggère un rapport constant, ce qui n'est pas le cas, l'espace nécessaire pour chaque graphique dépendra de plusieurs facteurs, mais il est généralement vrai de dire que le GIF occupera moins d'espace, mais perd la qualité là où il y a de la qualité à perdre!

 

Voir aussi comment optimiser les images pour le web

   

 

   

 

 

Chaîne YouTube

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site

-