Exploration de types d'image et de formats pour la conception Web - les logiciels graphiques

Les paquets de logiciel de graphisme ne viennent pas bon marché, ainsi avant que vous fassiez une décision sur lequel utiliser, vous devez déterminer quel type de travail graphique vous allez faire pour vos projets de conception de sites Web. Les concepteurs Web se répartissent en trois catégories standard, et votre style de design peut tomber en un, deux ou trois:

• Graphiste: Vous pouvez vous considérer comme un illustrateur parce que vous créez tous les graphiques que vous utilisez. Vous commencez avec une ardoise vierge, et grâce à différents outils et techniques utilisés dans votre logiciel de retouche d'image préféré, vous créez vos propres graphiques uniques.

• Manipulateur graphique: Vous êtes maître dans la prise de graphiques ou de photos que quelqu'un d'autre a créés et manipulés pour les utiliser dans vos projets de conception Web. Grâce à l'utilisation de différents outils et techniques, vous pouvez modifier les couleurs et les tailles, et même modifier les formes et les positions des différents éléments d'un graphique (en particulier si vous travaillez avec des graphiques vectoriels, abordés dans la section suivante).

• Consommateur graphique: Vous téléchargez des images à partir de ressources sur le Web et vous utilisez ces images pour ajouter des éléments de couleur et de design visuel à vos projets de site Web.

Vous pouvez adapter une, deux ou toutes ces trois catégories, ce qui est parfaitement acceptable lorsque vous concevez des thèmes pour des sites Web si vous respectez les restrictions de copyright et de licence sur les graphiques que vous utilisez (si vous êtes un manipulateur graphique et / ou consommateur). En outre, il est important de comprendre les types de graphiques que vous pouvez utiliser pour atteindre vos objectifs pour vos projets de conception Web. Les sections suivantes couvrent différents types de graphiques et de formats de fichiers pour vous aider à comprendre quels types de graphiques vous devez utiliser à des fins différentes.

Comparaison d'images raster et vectorielles

En tant que graphiste, vous travaillerez très probablement avec deux types de graphiques - raster et vectoriel. En tant que concepteur Web, vous travaillerez certainement avec des images raster, et vous pourrez travailler avec des images vectorielles. Le logiciel que vous utilisez pour éditer et créer des graphiques dépend du type de fichier d'image avec lequel vous travaillez. Voici un bref aperçu des différences entre les images raster et vectorielles:

• Raster: Ces images sont constituées de centaines de petits points, ou pixels. Chaque pixel peut avoir une couleur différente, permettant des images et des photographies riches en couleurs. La création et la modification d'une image raster nécessitent un programme d'édition raster, tel que PaintShop Pro ou Photoshop de Corel.

• Vecteur: Ces images sont constituées de courbes plutôt que de pixels. Les images vectorielles ont quatre points vectoriels, un dans chaque coin de l'image, et vous reliez les points avec des courbes. Ensuite, les courbes peuvent être remplies de couleurs et d'effets.

Images raster

Les images raster, telles que les photographies et les graphiques utilisés dans la conception du thème du site Web, sont le plus souvent utilisées pour la conception Web et l'affichage sur des sites Web. Les images raster ne sont pas bien à l'échelle. Si vous essayez de redimensionner l'image plus ou moins grande, vous constatez une perte notable de qualité d'image car les pixels sont redimensionnés et l'image devient granuleuse. Les images raster sont à plat - il n'y a qu'une seule couche sur les éléments de l'image - ce qui rend difficile (et parfois impossible) d'éditer certains des différents éléments de l'image dans le fichier graphique. Toutefois, pour une utilisation sur le Web, les images raster se chargent rapidement car elles ont généralement une petite taille de fichier et ne nécessitent pas beaucoup de bande passante pour le transfert.

Images vectorielles

Les images vectorielles sont utilisées pour la conception d'imprimés, telles que les cartes de visite, les brochures, les publicités dans les magazines et les panneaux d'affichage. Comme les images vectorielles sont composées de courbes plutôt que de pixels statiques, les images vectorielles peuvent être redimensionnées sans aucune perte de qualité. Par conséquent, vous pouvez réduire une image vectorielle à la taille d'un timbre-poste ou augmenter sa taille pour s'adapter au côté d'un gros camion, et la qualité de l'image reste la même. C'est pourquoi les images vectorielles sont idéales pour les logos et les travaux d'impression. Généralement, les images vectorielles sont en couches - chaque élément de l'image possède son propre calque - vous permettant d'utiliser votre éditeur d'image vectorielle préféré, tel qu'Illustrator, pour manipuler et modifier les différents éléments du fichier image vectoriel.

Les tailles de fichier des images vectorielles peuvent devenir assez importantes, elles ne sont donc pas idéales pour l'affichage sur un site Web. vous voudrez utiliser des images raster à la place. Cependant, vous pouvez commencer à travailler avec un fichier vectoriel pour votre travail de conception Web, puis enregistrer le fichier final dans un format raster optimisé pour le Web.

Recherche de formats de fichier image

Il est important de comprendre les types de formats de fichier image que vous utiliserez pour la conception sur le Web. Les images - que ce soit des photos ou des logos - que vous enregistrez et utilisez sur votre site Web doivent être des types de fichiers raster en raison de la taille réduite du fichier et de l'affichage des couleurs riches. Dans les sections suivantes, vous découvrez comment la compression affecte la taille des images raster et découvrez quels types de formats de fichiers vous pouvez utiliser dans vos propres projets.

Comprendre la compression

Lorsque vous utilisez des images raster dans votre conception Web, elles doivent avoir une certaine compression, ou une diminution de la taille globale du fichier. La compression d'image se produit lorsque vous enregistrez un fichier image raster au format JPG, GIF ou PNG. La compression d'un fichier réduit la taille du fichier image afin que l'image se charge plus rapidement sur une page Web.

Plus la taille du fichier image est grande, plus le chargement de cette image sur votre page Web est long.

La compression de fichiers image peut utiliser deux algorithmes différents, selon le format de fichier que vous avez choisi pour votre fichier image.Pour les fichiers d'images numériques, la compression s'effectue de deux façons:

• Compression sans perte: Toutes les données du fichier image sont conservées pendant et après la compression, ce qui entraîne une perte de qualité nulle du fichier d'image original.

• Compression avec perte: Cela réduit la taille d'un fichier image en supprimant certains bits de données du fichier original ou en combinant des parties de l'image qui sont similaires les unes aux autres. Cela entraîne généralement une perte de qualité d'image à partir du fichier d'origine.

Détermination des types de fichiers à utiliser pour vos projets

Le tableau suivant répertorie six formats de fichiers communs que vous utiliserez pour la conception Web, ainsi que le type de fichier et de compression. Bien que les fichiers d'image finale que vous enregistrez et utilisez dans votre travail de conception de sites Web doivent être raster, vous pouvez commencer avec des images vectorielles pour modifier et manipuler des graphiques en fonction des besoins de vos projets de conception Web.

Format de fichier image	Type de fichier image	Type de compression
JPG	Raster	Perdant
GIF	Raster	Sans perte
PNG	Raster < Sans perte	AI
Vecteur	N / A *	EPS
Vecteur	N / A *	CDR
Vecteur	N / A * > *	Les images vectorielles ne subissent aucune compression.

Voici les trois principaux formats d'image vectorielle que vous rencontrerez probablement dans votre travail de conception graphique: AI:

Adobe Illustrator, un fichier propriétaire développé par Adobe pour représenter des images vectorielles

• EPS: Format d'image vectorielle PostScript encapsulé

• CDR: CorelDRAW, un fichier graphique propriétaire développé par Corel pour représenter les images vectorielles

• Pour déterminer le format de fichier d'image raster à utiliser dans votre projet, tenez compte chaque format. En plus des différents types de compression, les formats de fichier contiennent des quantités variables de couleurs. Les caractéristiques des trois formats de fichier d'image raster les plus courants sont les suivantes: JPG:

Ce format convient aux photographies et aux images plus petites utilisées dans vos projets de conception Web. Bien que le format JPG compresse avec une compression avec perte, vous pouvez ajuster la quantité de compression qui se produit lorsque vous enregistrez le fichier. Vous pouvez choisir un niveau de compression de 1 à 100; vous ne voyez généralement pas beaucoup de perte de qualité d'image avec les niveaux de compression 1 à 20.

• PNG: Ce format est adapté aux graphismes plus grands utilisés dans la conception Web, tels que le logo ou l'en-tête principal identifiant la marque et l'ensemble, le visuel du site. Le format PNG utilise une compression d'image sans perte et ne subit donc aucune perte de données pendant la compression, créant ainsi une image plus nette et plus nette. Les fichiers PNG peuvent également être créés et enregistrés sur un canevas transparent, contrairement aux fichiers JPG. Les fichiers JPG doivent avoir au moins un blanc

• canvas (arrière-plan) ou une autre couleur que vous avez désignée. GIF: La compression d'un fichier GIF est

• sans perte , rendant l'image exactement telle que vous l'avez conçue sans perte de qualité. Cependant, les fichiers GIF sont limités à 256 couleurs. Pour les images de plus haute qualité, GIF n'est pas le meilleur format à utiliser; utilisez le format PNG à la place.