Explorer les types et les formats d'image pour la conception web

Logiciels graphiques ne viennent pas pas cher, donc avant de prendre une décision sur laquelle utiliser, vous devez déterminer quel type de travail graphique que vous allez faire pour vos projets de conception web. Concepteurs de sites Web répartissent en trois catégories standard, et votre style de conception peuvent tomber dans un, deux, ou les trois:

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

• Manipulateur graphique: Vous êtes un maître dans l'art de prendre des photos ou des graphiques, que quelqu'un d'autre a créé et les manipuler pour un usage dans vos projets de conception web. Grâce à l'utilisation de différents outils et techniques, vous pouvez faire des choses comme ajuster les couleurs et tailles, et même changer les formes et les positions des différents éléments d'un graphique (surtout si vous travaillez avec des graphiques vectoriels, couvert dans la section suivante) .

• Consommateurs graphique: Vous télécharger des images à partir de ressources sur le web, et que vous utilisez ces images pour ajouter de la couleur et des éléments de conception visuelle pour vos projets de sites web.

Vous pouvez adapter à un, deux, ou trois de ces catégories, et que est parfaitement acceptable lors de la conception des thèmes pour les sites web aussi longtemps que vous respectez les droits d'auteur et de licence des restrictions sur les graphiques que vous utilisez (si vous êtes un manipulateur graphique et / ou consommateurs) . 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 formats de fichiers graphiques et pour vous aider à comprendre quels types de graphiques que vous devez utiliser à des fins différentes.

En comparant les images vectorielles et matricielles

En tant que graphiste, vous aurez plus de chances de travail avec deux types de graphiques - raster et vecteur. En tant que concepteur de sites Web, vous aurez certainement de travailler avec des images raster, et vous pouvez 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 que vous travaillez avec. Voici un bref aperçu des différences entre les images raster et vecteur:

• Raster: Ces images sont constituées de centaines de petits points, ou pixels. Chaque pixel peut être d'une couleur différente, permettant de riches, des images et des photographies couleur. Création et modification d'une image raster appelle à un programme d'édition raster, comme PaintShop Pro de Corel ou Photoshop.

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

Les images raster

Les images matricielles, telles que des photographies et des graphiques utilisés dans la conception du thème du site, sont le plus souvent utilisés pour la conception web et affichage sur les sites. Les images raster ne pas échelle bien si vous essayez de redimensionner l'image plus grande ou plus petite, vous voyez une perte sensible de la qualité d'image, car les pixels se redimensionnées et l'image devient granuleuse. Les images raster sont appartement - il ya une seule couche d'éléments d'image - ce qui rend difficile (et parfois impossible) pour modifier certains des différents éléments de l'image dans le fichier graphique. Pour l'utilisation sur le web, cependant, des images raster charge rapidement, car ils ont généralement une petite taille de fichier et ne nécessite pas beaucoup de bande passante pour transférer.

Les images vectorielles

Les images vectorielles sont utilisés pour la conception d'impression, tels que cartes de visite, brochures, publicités dans les magazines et les panneaux d'affichage. Parce que des images vectorielles sont constituées de courbes plutôt que de pixels statiques, les images vectorielles peuvent être redimensionnées sans perte de qualité. Par conséquent, vous pouvez réduire une image vectorielle de la taille d'un timbre-poste ou d'augmenter sa taille pour adapter le côté d'un gros camion, et la qualité d'image reste la même. Voilà pourquoi des images vectorielles sont idéales pour les logos et les travaux d'impression. Typiquement, les images vectorielles sont couches - chaque élément de l'image a sa propre couche - vous permettant d'utiliser votre éditeur favori image vectorielle, comme Illustrator, de manipuler et de modifier les différents éléments dans le fichier image de vecteur.

Les tailles de fichiers d'images vectorielles peuvent être assez grand, donc ils ne sont pas idéal pour l'affichage sur un site web- vous aurez envie d'utiliser des images raster place. Cependant, vous pouvez commencer à travailler avec un fichier vectoriel pour votre travail de conception de sites Web et puis enregistrez le fichier final dans un format raster qui est optimisé pour le web.

En regardant les formats de fichier d'image

Il est important de comprendre les types de formats de fichiers image que vous allez travailler avec la conception sur le web. Les images - si des photos ou logos - vous enregistrez et utilisez sur votre site devrait être types de fichiers raster en raison de la plus petite taille de fichier et riche écran couleur. Dans les sections suivantes, vous découvrirez comment la compression affecte la taille des images raster et de découvrir quels types de formats de fichiers que vous pouvez utiliser dans vos propres projets.

Comprendre la compression

Lorsque vous utilisez des images raster dans votre conception de sites Web, ils ont besoin d'une certaine quantité de compression, ou une diminution de la taille globale du fichier. Compression de l'image se produit lorsque vous enregistrez un fichier d'image raster au format JPG, GIF ou PNG. Compresser un fichier diminue la taille du fichier d'image de sorte que les charges d'image plus rapide sur une page web.

Plus la taille de fichier d'image, plus il faut pour que l'image à charger sur votre page Web.

Compression des fichiers d'image peuvent utiliser deux algorithmes différents, en fonction du format de fichier que vous avez choisi pour votre fichier image. Pour les fichiers d'images numériques, la compression se produit dans une des deux façons suivantes:

• La compression sans perte: Toutes les données du fichier d'image sont conservées pendant et après compression, résultant généralement de la perte de la qualité de zéro à partir du fichier de l'image originale.

• Compression avec pertes: Cela réduit la taille d'un fichier d'image en supprimant certains des bits de données à partir du fichier original, soit par combinaison de parties de l'image qui sont similaires les unes aux autres. Cela se traduit généralement dans l'image perte de qualité du fichier d'origine.

Déterminer quels types de fichier à utiliser pour vos projets

Le tableau suivant répertorie six formats de fichiers courants vous travaillez pour la conception web et le type de fichier et de compression. Bien que les fichiers image finale que vous enregistrez et utilisez dans votre travail de conception web devrait être raster, vous pouvez commencer avec des images vectorielles pour éditer et manipuler des graphiques pour répondre aux besoins de vos projets de conception web.

* Les images vectorielles ne connaissent pas la compression.

Voici les trois principaux formats d'image vectoriel que vous aurez probablement rencontrez dans votre travail avec la conception graphique:

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

• EPS: Format d'image vectoriel PostScript encapsulé

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

Au moment de décider quel format de fichier d'image raster à utiliser dans votre projet, tenir compte des caractéristiques de chaque format. En plus des différents types de compression, les formats de fichiers contiennent des quantités variables de couleur. Les caractéristiques des trois formats les plus courants de fichiers d'images tramées sont les suivants:

• JPG: Ce format est adapté pour les photographies et les petites images utilisées dans vos projets de conception web. Bien que le format JPG compresse avec 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 habituellement ne voyez pas beaucoup de perte de qualité d'image avec des niveaux de compression de 1 à 20.

• PNG: Ce format est adapté pour les grands graphiques utilisés dans la conception web, comme le logo ou principale tête graphique qui identifie la marque et l'aspect global, visuelle du site. PNG utilise une compression sans perte de qualité et donc, ne subit aucune perte de données lors de la compression, créant une image plus nette plus nette. Fichiers PNG peuvent également être créés et enregistrés sur une toile transparente, alors que les fichiers JPG ne peux pas. Fichiers JPG doivent avoir au moins un blanc toile (arrière-plan), ou d'une autre couleur que vous avez désigné.

• GIF: Compression d'un fichier GIF est lossless, rendu de l'image exactement comme vous l'avez conçu sans perte de qualité. Cependant, les fichiers GIF sont limités à 256 couleurs. Pour les images couleurs supérieur, GIF est pas le meilleur format à utiliser-utiliser le format PNG place.