Share
L'objectif de la fonction Enregistrer pour le Web dans Adobe Illustrator est d'optimiser les graphiques pour une utilisation sur un site Web ou un autre affichage à l'écran, tel qu'un téléphone avec tablette. Le mot "optimiser" désigne l'équilibre optimal entre la taille et la qualité du fichier. Nous voulons des fichiers de petite taille pour qu'ils se chargent rapidement sur une page Web, mais nous ne voulons pas sacrifier leur apparence. Enregistrer pour le Web vous permet de prévisualiser l’aspect d’un graphique vectoriel optimisé et de choisir le meilleur compromis..
Dans cet article, je vais passer en revue les formats de fichier disponibles dans Enregistrer pour le Web et vous montrer quels formats conviennent le mieux à différents types d'illustrations..
Vous accédez au Enregistrer pour le Web dialogue sous le Fichier menu. Enregistrer pour le Web est presque une application en soi et la fenêtre de dialogue occupe la majeure partie de votre écran..
Vous pouvez choisir de prévisualiser votre illustration de trois façons. Vous pouvez simplement montrer l'original seul. Cela semble toutefois plutôt inutile, car vous voudrez probablement voir à quoi ressemblera le graphique une fois optimisé. Vous pouvez afficher l’aperçu optimisé seul ou choisir 2-Up, qui vous donnera des aperçus côte à côte. Vous pouvez cliquer sur l'un des volets pour ajuster ses paramètres. Dans l'image ci-dessous, l'original est à gauche et la version optimisée (dans ce cas, au format GIF) à droite.
Vous pouvez ajuster la taille de l'aperçu dans le menu déroulant en bas à gauche et utiliser des raccourcis clavier connus, tels que Commande / Contrôle-0 pour adapter l’œuvre dans la fenêtre, ou Commande / Contrôle-plus ou moins augmenter ou diminuer le grossissement.
En cliquant sur le Aperçu Le bouton ouvrira le graphique optimisé dans votre navigateur par défaut. Si vous voulez voir à quoi ça ressemble dans d'autres navigateurs, vous pouvez en ajouter d'autres en cliquant sur la petite icône de globe située à côté du bouton Aperçu..
L'une des sections les plus importantes de l'interface Enregistrer pour le Web est la taille du fichier. Sous chaque aperçu se trouve le type de fichier et sa taille respective. Ainsi, dans l'image ci-dessous, le fichier EPS d'origine se trouve à gauche, avec une taille de fichier de 2,44M. Le fichier GIF optimisé est à droite, avec une taille de fichier beaucoup plus petite d'environ 39 Ko. Comme le but de Save for Web est de trouver l'équilibre idéal entre taille et qualité, vous observerez souvent ces chiffres..
Le format GIF est l’un des formats les plus anciens et les plus utilisés du Web. C'est idéal pour les images avec des zones de couleur unie, comme dans cet exemple. L'espace couleur GIF est une couleur indexée. Cela vous permet de spécifier un nombre exact de couleurs dans la table des couleurs, de sorte que vous ne puissiez utiliser que celles dont vous avez besoin, réduisant ainsi la taille globale du fichier..
La boîte de dialogue Enregistrer pour le Web comporte plusieurs préréglages GIF. Choisissez différents paramètres et gardez un œil sur l'image et la taille du fichier qui en résulte. Dans l'image ci-dessous, j'ai utilisé un préréglage de 128 couleurs. Comme vous pouvez le constater, l’image est belle et la taille du fichier est de 37,72K.
Dans l'exemple suivant, j'ai choisi seulement 8 couleurs. Vous pouvez voir que la taille du fichier est maintenant 23.3K. C'est une économie importante, mais l'image commence à perdre en qualité. Les bords sont rugueux car il n'y a pas assez de couleurs pour remplir les transitions entre chaque forme. Bien que l'illustration ne comporte que cinq couleurs - trois nuances de bleu, de jaune et de blanc - Illustrator utilise davantage de couleurs dans le processus d'anti-aliasing afin que les bords et les courbes apparaissent en douceur..
Les couleurs GIF peuvent être limitées à celles considérées comme "Web safe". Ce n'est plus vraiment une préoccupation de nos jours, maintenant que les moniteurs peuvent afficher des millions de couleurs, mais il fut un temps où il était conseillé aux concepteurs d'utiliser uniquement les 216 couleurs partagées par les systèmes Windows et Macintosh. Donc, si vous voulez vous assurer que votre graphique a la même apparence sur chaque plate-forme, limitez ses couleurs à cette palette. Dans l'exemple ci-dessous, j'ai utilisé le Palette Web préréglé, et vous pouvez voir comment la couleur bleu clair est passée à un bleu verdâtre.
Un fichier GIF peut être en noir et blanc et il utilise ce que l’on appelle le dithering pour simuler une tonalité continue. Vous pouvez choisir différentes méthodes de dithering, mais elles ont toutes un look résolument années 1980.
Les GIF prennent en charge un niveau de transparence. Cela signifie que chaque pixel est soit plein soit complètement transparent - vous n'utiliseriez pas de GIF pour une image avec une ombre ou un dégradé transparent.
En regard de la case à cocher Transparence, vous pouvez choisir une couleur matte. Cela ajoutera un léger contour autour de l'image dans cette couleur. Ainsi, si vous placez le GIF sur un arrière-plan coloré, vous pouvez sélectionner la même couleur que la couleur mate. De cette façon, la transition entre le graphique et l’arrière-plan apparaîtra lisse.
Vous pouvez choisir d’attacher l’image à la planche d’art pour que les dimensions en pixels du graphique enregistré soient identiques à celles de la planche d’art Illustrator. Ou vous pouvez choisir de laisser cette case décochée, ce qui coupera l'image aux limites du graphique vectoriel. C’est le paramètre que vous utiliserez probablement la plupart du temps, car il n’est pas nécessaire d’accroître la transparence autour de l’image. La taille du fichier résultant sera également plus petite.
Dans la section Taille de l'image, vous pouvez choisir de réduire ou d'agrandir le graphique optimisé. La nomenclature est un peu ambigu ici. Il ne s'agit pas de la taille du fichier de l'image en kilo-octets, mais des dimensions en pixels, exprimées en largeur et en hauteur..
C'est là qu'Illustrator a un avantage par rapport à une application à base de pixels ou de pixels telle que Photoshop. Si vous agrandissez l'image pour une sortie optimisée, Illustrator utilise les informations vectorielles contenues dans le fichier pour l'agrandissement et le graphique obtenu est net et lisse. Si vous deviez utiliser Enregistrer pour le Web dans Photoshop et essayer d’agrandir une image raster, l’illustration agrandie aurait un aspect flou..
Sous les champs Taille de l'image se trouve un menu déroulant dans lequel vous pouvez sélectionner la méthode d'optimisation. Si votre graphique contient beaucoup de texte, vous pouvez choisir le type optimisé. Dans les exemples ci-dessous, vous pouvez voir la différence entre une image optimisée et une image sans optimisation..
La table des couleurs contient des échantillons pour chaque couleur qui sera contenue dans le graphique optimisé. En fait, vous pouvez double-cliquer sur une nuance et changer sa couleur. Ici, j'ai changé le jaune en rose. Vous pouvez voir que la nuance est maintenant à moitié jaune et à moitié rose dans la table des couleurs et, lorsque vous la survolez, l'info-bulle vous donne la ventilation RVB de l'original et de la nouvelle couleur. Cela peut être utile si vous enregistrez une série de la même image et que vous souhaitez qu'un élément ait une couleur différente dans chaque version. En remplaçant la couleur dans Enregistrer pour le Web, vous n'avez pas à modifier le vecteur d'origine..
Sous la table des couleurs se trouve une série d’icônes vous permettant d’ajuster davantage la couleur. Lorsque vous sélectionnez une nuance, vous pouvez la rendre transparente, la limiter à une couleur Web sûre, la verrouiller ou la supprimer. Un diamant dans une nuance de couleur indique une couleur sûre pour le Web. Lorsque vous la survolez, le code hexadécimal s'affiche..
Il existe quelques paramètres et pratiques supplémentaires que vous pouvez utiliser avec les GIF. Par exemple, vous pouvez choisir d'entrelacer le GIF, ce qui chargera l'image en plusieurs passes dans un navigateur. Cette méthode a été développée à l'époque où la plupart des gens utilisaient une connexion lente par ligne commutée. Un graphique entrelacé semble se charger plus rapidement qu'il ne le fait réellement. Il n'y a pas beaucoup de raisons de l'utiliser aujourd'hui, surtout avec un fichier relativement petit comme un fichier GIF. Les autres options des paramètres GIF sont soit hautement spécialisées, soit un peu démodées, je ne vais donc pas y consacrer plus de temps. Passons aux autres formats!
Le format PNG (certaines personnes disent "P-N-G" et d'autres le "ping") est souvent une meilleure alternative au format GIF. Le format PNG-8 est similaire au format GIF en ce sens qu’il utilise 256 couleurs, prend en charge la transparence 1 bit et peut utiliser le dithering. Le "8" signifie qu'il s'agit d'une image de 8 bits. La principale différence entre les deux réside dans la manière dont ils compressent les informations d'image. Le format GIF utilise une méthode "avec perte", ce qui signifie qu'une partie des données est supprimée (ou "perdue") afin de réduire la taille du fichier. La méthode PNG est sans perte, mais en raison de son algorithme de compression, la taille des fichiers qui en résulte est souvent beaucoup plus petite qu'un GIF. Alors, pourquoi voudriez-vous même utiliser un GIF, si le format PNG est meilleur? Eh bien, tous les navigateurs ne supportent pas le format PNG (je vous regarde, Internet Explorer 6!). Mais à mesure que de plus en plus de personnes utilisent de nouveaux navigateurs, ce n’est pas un problème. Alors n'hésitez plus et essayez PNG-8 sur des images qui nécessiteraient normalement un GIF. La plupart des options pour PNG-8 sont les mêmes que pour GIF dans la section précédente..
JPEG a été développé à l'origine pour compresser les photos. Il convient donc mieux aux vecteurs à tons continus. Les fichiers JPEG sont au format 24 bits et prennent donc en charge plus de 16 millions de couleurs. La compression JPEG entraîne des pertes et l'image se dégradera si vous essayez de la compresser trop. Dans l'image ci-dessous, vous pouvez voir des «artefacts» JPEG, qui ne sont pas souhaitables. Choisissez un paramètre de qualité supérieure jusqu'à obtenir un graphique de meilleure qualité avec une taille de fichier acceptable..
Vous pouvez choisir de charger l'image en plusieurs passes en sélectionnant Progressif. Vous pouvez également rendre l'image floue pour atténuer certains des artefacts. Aucune de ces méthodes n'est idéale, ni réellement nécessaire. Ce sont des retours en arrière du temps des connexions commutées et des machines plus lentes.
Comme avec GIF et PNG-8, vous pouvez spécifier une dimension en pixels dans le champ Taille de l'image, sélectionner la méthode d'optimisation et choisir de couper ou non l'image dans le plan de travail. Il n'y a pas de table de couleurs car les fichiers JPEG sont en mode RVB et non en couleurs indexées..
Le format JPEG convient bien aux images à ton continu, mais il n’est pas aussi performant pour les graphiques comportant de grandes zones de couleur unie. Dans l'exemple ci-dessous, le JPEG est à droite. Même avec le réglage de qualité le plus élevé, il semble pire que le GIF et montre des artefacts.
PNG-24 est, comme son nom l’indique, une image 24 bits. À certains égards, il combine le meilleur des deux mondes, le GIF et le JPEG, et constitue un format supérieur. Comme JPEG, il peut supporter des millions de couleurs. PNG-24 peut également contenir une transparence alpha. Il peut donc être utilisé pour les graphiques comportant des bords flous et des ombres transparentes. Toutes ces couleurs et la transparence ont un prix, cependant, dans un fichier plus volumineux. Dans l'exemple ci-dessous, vous pouvez voir qu'un fichier JPEG enregistré avec le réglage haut correspond à près de 22 Ko, alors que le format PNG correspond à environ 95 Ko. Mais la transparence vous permet de placer le graphique PNG-24 sur un arrière-plan à motifs ou texturé. Donc, si vous avez besoin de ce genre de flexibilité, le format PNG-24 est la voie à suivre..
J'espère que vous avez une meilleure compréhension des formats de fichier de la fonction Enregistrer pour le Web d'Illustrator. Chaque format a ses avantages et ses inconvénients, mais avec quelques tests minutieux, vous pouvez trouver les meilleurs paramètres pour vos illustrations. C’est un outil puissant qui peut rendre votre travail Web beaucoup plus facile et plus rapide. Une fois que vous avez déterminé les paramètres idéaux pour vos images, vous pouvez les enregistrer en tant que préréglage personnalisé. Vous pouvez ensuite traiter par lots des dossiers entiers contenant des images similaires en un rien de temps.
Les graphiques vectoriels de cet article ont été achetés chez GraphicRiver: vecteur Janitor, vecteur citrouille.
Accentsconagua