Les formats d'image les plus courants sur les pages Web. Graphiques sur une page Web en HTML. Placement d'une image graphique à partir d'un fichier

liste numérotée très semblable à celui marqué. La seule différence est que dans une liste numérotée, des chiffres ou des lettres séquentiels sont automatiquement placés devant chaque élément au lieu de marqueurs graphiques.

La liste numérotée est spécifiée à l'aide de balises. Un péché liste à puces, chaque élément reçoit une étiquette

mot-clé RUBAN.

TAPE=1 - Numérotation standard (1,2,3,4,5, ...)

TAPE=A - Lettres majuscules (A, B, C, D, ...)

TAPE=a - Lettres urgentes(a, b, c, d, ...)

TAPE=I - Chiffres romains (I, II, III, IV, ...)

TAPE=i - Chiffres romains minuscules (i, ii, iii, iv, ...)

Les listes de définitions sont légèrement différentes des autres types de listes. Dans ce cas, deux balises sont utilisées pour décrire chaque élément de la liste, et non une balise

1. . Étiquette
   ensembles élément séparé, c'est-à-dire le terme défini et la balise
   - le reste des informations qui s'affichent sur la ligne en retrait suivante. La deuxième ligne d'information est appelée définition. La liste des définitions est spécifiée de la même manière que les autres listes. La seule différence est que chaque élément nécessite deux balises.

   L'un des avantages des listes est qu'elles peuvent être imbriquées les unes dans les autres. L'imbrication d'une liste dans une liste se fait de la même manière que la simple création d'une liste. Il n'y a pas de spécial Balises HTML. Pour éviter de confondre le navigateur, assurez-vous de fermer chaque liste interne avec une balise. Vous pouvez même investir l'un dans l'autre différents types listes.

   Jouez toutes les listes ci-dessus

   Les listes ont un inconvénient : elles sont unidimensionnelles. Cela signifie que vous ne pouvez placer des informations que sur des lignes consécutives. Les tableaux, en revanche, vous permettent d'organiser les données non seulement en lignes, mais également en colonnes.

   Un certain nombre de balises sont utilisées pour définir des tables. Mots clés

   et encadrent le tableau entier, et un certain nombre d'autres balises déterminent comment les informations seront affichées. Le tableau montre Description complète balises de tableau.

   
   
   

   Balises HTML pour la création de tableaux :

   Balises Description

   et Ces balises recouvrent le tableau. Étiquette

   indique aux navigateurs qu'une description du tableau suit. Si vous souhaitez que la grille séparant les lignes et les colonnes soit visible, ajoutez le mot-clé BORDER.

   affiché sous forme d'en-tête. Vous pouvez également utiliser des balises pour définir le titre. et.

   Les balises affichent le texte sous forme d'en-têtes de ligne ou de colonne dans une police en gras légèrement plus grande.

   et Les balises définissent chaque ligne du tableau. Étiquette facultatif, mais cela rend votre code HTML plus complet et compréhensible.

   Cette paire de balises sépare le texte de chaque cellule du tableau.

   Créez un fichier dans lequel vous construisez un tableau avec cinq lignes et cinq colonnes.

   Il existe un certain nombre de balises qui vous permettent de définir les couleurs d'arrière-plan et de grille du tableau. Dans le premier cas, le mot clé BGCOLOR est inséré dans la balise

   et Texte marqué avec ces balises,

   et
   et

   les images suivantes :

   Outre le mot-clé BGCOLOR, il existe d'autres moyens de contrôler la couleur :

   BORDERCOLOR Changer la couleur de la grille du tableau

   BORDERCOLORDARK/ Utilisé pour changer la grille de

   BORDERCOLORLIGHT pour un effet tridimensionnel supplémentaire

   Changer la couleur de la grille du tableau avec effet 3D.

   Leçon 12-13. Utilisation de graphiques

   Les images et les graphiques sont très importants pour le WWW. C'est le seul outil Internet qui vous permet de visualiser simultanément des images et du texte à l'écran.

   Pour placer une image sur une page Web, vous devez savoir comment appliquer la balise . Entrez une balise et le mot-clé SRC= pour spécifier les graphiques à charger.

   

   Lors de la saisie de cette balise, veuillez noter que le fichier doit se trouver dans le même dossier que votre fichier HTML.

   Graphiques et trafic

   Les exigences de beauté et d'expressivité de la conception des pages Web sont en conflit constant avec les capacités techniques de l'hébergement Web moderne. Par conséquent, le concepteur du site doit devenir un intermédiaire entre le concepteur et l'utilisateur et maintenir strictement un équilibre entre l'attrait visuel et une vitesse raisonnable de diffusion de l'information sur le Web. Pour résoudre ce problème avec succès, vous devez connaître tous les formats graphiques utilisés sur Internet, comprendre les différences entre eux, leurs domaines d'application et leurs modes d'utilisation.

   Pour faire face au grand nombre de formats et de protocoles adoptés sur Internet et créer votre propre page, vous devez sélectionner ce qui convient le mieux à vos besoins spécifiques. Certains formats peuvent être spécifiques à un seul navigateur, tandis que d'autres nécessiteront un plug-in spécial. Nous n'avons choisi parmi toute la variété des formats que ceux qui sont le plus souvent utilisés par les auteurs de sites populaires et acceptés par les utilisateurs.

   GIF et JPEG sont deux des formats d'image les plus populaires et sont depuis longtemps les normes de facto à utiliser sur le WWW. Les deux sont assez universels, lus par la plupart des navigateurs et ne nécessitent pas de Logiciel(ou modules complémentaires). GIF et JPEG sont des formats d'image raster qui, respectivement, déterminent un format fixe (résolution) lors de l'affichage de telles images à l'écran. Lorsque vous essayez de mettre à l'échelle (fourni dans certains navigateurs), les images bitmap (pixel) perdent beaucoup de qualité. Pour le format GIF 8 bits (256 couleurs), en plus, le choix de la palette de couleurs est un sérieux problème.

   Les formats graphiques vectoriels sont beaucoup plus attrayants pour une utilisation sur le Web. Contrairement aux bitmaps, les graphiques vectoriels sont basés sur une représentation mathématique (géométrique) des données. De telles images sont beaucoup plus petites en termes de stockage/transmission, sont facilement mises à l'échelle et ne perdent pratiquement pas en qualité lors des transformations. Malheureusement, les formats vectoriels sont encore peu utilisés sur Internet, mais les normes sont déjà formées et devraient intéresser les concepteurs.

   Plusieurs normes vectorielles ont été proposées relativement récemment, et les formats PGML et VML sont actuellement envisagés par le World Wide Web Consortium (W3C). Cependant, Macromedia, qui promeut le VML, a depuis longtemps ouvert son format vectoriel. Shockwave Flashà d'autres développeurs et implémenté des modules supplémentaires pour visualiser les graphiques dans ce format pour les navigateurs populaires.

   Cependant, les nouveaux outils ne sont pas nécessairement les meilleurs pour toutes les applications. Les images les plus courantes publiées sur Internet sont encore des photographies numériques, des dessins et des images numérisées, très laborieuses et peu recommandables à convertir au format vectoriel.

   Par conséquent, le choix du format dépend en fin de compte de vos tâches et des images les plus adaptées à vos besoins. public cible, c'est à vous.

   GIF - format pour la conception

   CompuServe a initialement conçu son format GIF pour des applications interactives dans handicapées graphiques standard sur un ordinateur personnel. Il s'agissait à l'origine d'un format bitmap 4 bits et plus tard d'un format bitmap à mappage de couleurs 8 bits prenant en charge un maximum de 256 couleurs. L'un des avantages non négligeables du format est que les images peuvent être indexées sur une palette spécifique (un ensemble de couleurs), tandis que les images JPEG ne peuvent pas être "liées" à une palette et leur affichage "correct" n'est pas toujours possible. Cette propriété est particulièrement importante pour les développeurs qui utilisent l'indexation de palette pour optimiser le rendu d'image pour toutes les plateformes sans exception (que ce soit PC, Mac, Web-TV ou autres), quelle que soit la profondeur de couleur avec laquelle tel ou tel système fonctionne. Cette polyvalence peut être obtenue avec une palette limitée de 216 couleurs, qui comprend toutes les couleurs courantes utilisées à la fois sous Windows et, par exemple, sous MacOS. Concevoir un site dans une palette universelle garantit un affichage cohérent, multiplateforme et indépendant du matériel. De plus, le format GIF utilise un schéma de compression sans perte (avec un algorithme de codage à répétition simple : une séquence d'octets de la même couleur est remplacée par un mot de deux octets, dont l'un contient un motif de remplissage, et le second détermine le nombre de répétitions), afin que les données graphiques dans ce format ne perdent pas d'informations lors du processus de compression et de récupération.

   Cependant, précisément à cause de ces restrictions de couleurs intégrées, le format GIF ne peut être utilisé que pour les images qui ont un nombre limité de couleurs, telles que les combinaisons en noir et blanc ou celles qui contiennent grandes surfaces d'une seule couleur, comme des cadres de dessins animés ou des dessins numériques avec une seule couleur de remplissage. Bien sûr, vous pouvez enregistrer n'importe quelle image au format GIF en appliquant ce que l'on appelle le lissage des tons de couleur (dithering) et ainsi obtenir une qualité suffisamment décente, mais dans ce cas, vous risquez "de rencontrer" une augmentation significative de la taille du fichier après l'application les répétitions de compression de mémoire décrites ci-dessus (dans le cas dégénéré, lorsqu'il n'y a pas de répétitions adjacentes dans l'image, vous obtiendrez une augmentation du fichier exactement deux fois par rapport à l'original non compressé).

   Ainsi, les principaux avantages du format GIF sont l'utilisation d'une compression sans perte et la préservation économique des zones de couleur unies avec une bordure claire et des transitions de couleur strictes. Le format JPEG diffère de celui décrit en ce que, selon le niveau de compression, les zones pleines y sont détruites et les transitions de couleurs nettes sont lissées ou délavées.

   Le principal critère de choix du format GIF : si vous avez vous-même dessiné une image dans un logiciel graphique tel que Photoshop ou Painter comportant de grandes zones de la même couleur, ou si vous avez traité une image existante et souhaitez conserver un contraste élevé (nécessaire, par exemple, lors de l'affichage de texte), puis enregistrez-le dans ce format (en particulier pour les dessins en noir et blanc ou peu colorés).

   Pour les photos, les images vidéo ou d'autres images en couleur utilisant des transitions de couleurs douces (dégradés), utilisez format jpeg.

   Il est également important de garder à l'esprit que si vous essayez d'enregistrer des images GIF à tons continus, vous devrez probablement supprimer autant d'informations dans le processus de préparation de l'image (lors de la conversion en une palette fixe) et la compression du GIF méthode sera si inefficace que vous perdrez également financièrement (à la fois en termes de coûts de main-d'œuvre et de taille de fichier).

   Entre autres choses, le format GIF prévoit l'apparence dite entrelacée (Entrelacé), qui aide les utilisateurs de canaux lents au tout début de la réception à évaluer le contenu de l'image (l'effet est similaire au dessin progressif d'un flou image) et le temps nécessaire à sa transmission complète, et en conséquence accepter la décision de continuer à la prendre ou s'il vaut mieux la refuser. Cependant, contrairement au JPEG progressif, l'effet ici est plus psychologique que réel (voir fig.).

   N'oubliez pas non plus qu'un avantage important du format GIF, dont on ne peut se passer dans certains cas même avec tous ses défauts, est le support de la transparence (extension GIF89a), qui permet d'afficher une silhouette aux contours non rectangulaires sur un arrière-plan existant. La transparence au format GIF est implémentée de manière primitive - une couleur (généralement l'arrière-plan) est désignée comme transparente. Cet avantage est souvent utilisé lors de la création de boutons et d'icônes dans la conception de pages (JPEG n'offre aucune prise en charge de la transparence).

   En conclusion, nous pouvons dire ce qui suit : GIF - meilleur choix pour parvenir à un compromis efficace entre le matériel et les logiciels existants, et la possibilité d'indexer une image GIF 8 bits jusqu'à 216 couleurs universelles est essentielle lorsque vos images sont destinées à être affichées sur plusieurs navigateurs et plates-formes inconnues.

   JPEG - format pour les photographies et les images vidéo

   Le format JPEG tire son nom de l'abréviation du comité Joint Photographic Experts Group (Joint Committee of Photographic Experts), qui a créé cette norme à la fin des années 80 et au début des années 90. Le format JPEG est basé sur un algorithme de compression avec perte (transformée en cosinus discrète), au moyen duquel votre image est divisée en régions (généralement des carrés de 8x8 pixels), à l'intérieur desquelles la distribution des couleurs est remplacée par une fonction mathématique et seuls les coefficients de cette fonction sont stockées, vous permettant de restaurer son apparence. Naturellement, vous subirez une perte de qualité (en fonction de la complexité de la fonction utilisé pour remplacer l'image) et après restauration, vous n'obtiendrez plus une image réelle, mais son "substitut" mathématique. Cependant, selon la qualité de votre original et le degré de compression, la perte de qualité peut être complètement invisible pour le spectateur. Mais le principal avantage de JPEG par rapport à GIF est que, alors que GIF n'est que 8 bits (256 couleurs), JPEG est 24 bits et peut afficher jusqu'à 16,7 millions de couleurs.

   Pour cette raison, le JPEG couleur reproduit naturellement beaucoup plus d'informations vidéo que le GIF. Ce format convient mieux aux images de la vie réelle - images numérisées ou photographies numériques, ainsi qu'aux images vidéo numérisées ou aux scènes d'infographie 3D rendues.

   Un autre avantage de JPEG est que, contrairement au GIF, il vous permet de définir la quantité de compression appliquée à l'image d'origine, ce qui permet de maintenir l'équilibre nécessaire entre taille et qualité.

   Les taux de compression varient considérablement pour les JPEG, selon le programme d'édition d'image utilisé, mais les pages Web utilisent généralement des taux de 10:1 ou 20:1 (exprimés en tant que rapport en volume par rapport à l'image d'origine), qui offrent généralement une qualité acceptable. . Néanmoins, il est possible de compresser l'image jusqu'à des valeurs extrêmes de 100:1 (bien sûr, avec une perte de qualité importante).

   Ainsi, lorsque vous travaillez avec une photo au format JPEG, vous avez la possibilité d'enregistrer une image 24 bits avec 16,7 millions de couleurs, et malgré la perte de qualité lors de la compression, elle correspond toujours beaucoup plus à l'original qu'un GIF 256 couleurs. performance. Dans ce cas, la perte inévitable de qualité dépend fortement de la taille, de la qualité et du type de l'image d'origine.

   De plus, JPEG permet de définir l'affichage dit progressif, c'est-à-dire lorsque, lors du chargement, une représentation "brute" de l'image apparaît immédiatement à l'écran, qui, au fur et à mesure de la réception d'informations, s'améliore progressivement (au En même temps, vous pouvez avoir l'idée nécessaire de l'essence du matériel alimenté avant même que le téléchargement ne soit terminé et interrompre le processus à tout moment, ce qui permet de gagner beaucoup de temps en parcourant le contenu du réseau).

   Vous pouvez utiliser ces outils à volonté, et une telle manifestation progressive peut être d'une grande aide dans la lutte contre la congestion des canaux. Le seul problème avec le JPEG progressif (par opposition au GIF entrelacé) est que les anciens navigateurs peuvent ne pas le prendre en charge.

   PNG - nouveauté raster universelle

   La prochaine génération de formats raster, PNG, a pris les meilleures fonctionnalités de JPEG et GIF et a ajouté sa propre approche unique à la présentation des images, ce qui permet de les intégrer dans un seul fichier. différentes versions la même image pour les basses, moyennes et hautes résolutions.

   Le format PNG (Portable Network Graphics) est un format graphique raster relativement nouveau qui a été approuvé comme standard par le consortium W3C et devrait progressivement remplacer les deux formats « obsolètes » : GIF et JPEG. PNG offre à la fois l'indexation des couleurs (jusqu'à 256 couleurs), la prise en charge des couleurs 24 et 48 bits (True-Color) et fonctionne avec un canal de transparence (canal alpha). De plus, il est beaucoup plus efficace que le stockage bitmap traditionnel. formats.

   L'algorithme de compression pour une image en couleur dépasse la qualité JPEG, et avec la prise en charge d'une palette indexée limitée (jusqu'à 256 couleurs), le nouveau format effectue une compression sans perte de 10 à 30 % supérieure à celle mise en œuvre dans le format GIF, qui le rend optimal pour une utilisation dans tous les cas. Malheureusement, le nouveau format ne permet pas de sacrifier la qualité d'image en échange d'un taux de compression plus élevé, comme dans le format JPEG.

   La prise en charge de la transparence PNG, contrairement au GIF, est à part entière, c'est-à-dire que vous pouvez créer des images ou des bordures translucides, de sorte que le problème des bordures "propres", si difficile à résoudre lors de l'utilisation de la transparence dans un fichier GIF, est facilement surmonté ici .

   Cependant, malgré toutes les améliorations offertes par PNG, le nouveau format ne décollera qu'une fois qu'il sera utilisé par les concepteurs de sites Web et les fabricants de logiciels à la fois pour restituer les images dans le nouveau format et pour les préparer à la publication. En attendant, il est assez difficile de trouver des images PNG n'importe où sur Internet, malgré l'inclusion récente de la prise en charge de ce format dans Netscape Navigator et Microsoft Internet Explorer.

   Et bien qu'ils dernières versions et prennent en charge PNG, ils le font de manière très limitée. Actuellement, la seule solution pour les utilisateurs qui souhaitent voir un fichier PNG complet est d'installer eux-mêmes un plug-in (comme PNG Live).

   Apparemment, les développeurs ralentissent, attendant la transition complète des utilisateurs vers de nouveaux formats. Eh bien, un conservatisme sain ne fait jamais de mal, mais nous vous recommandons fortement de passer progressivement au format PNG, en remplaçant au moins toutes les utilisations existantes du format GIF.

   Représentation vectorielle

   JPEG, GIF et PNG sont tous deux des formats raster basés sur une représentation discrète (pixel ou point) d'une image, tandis que les formats vectoriels sont basés sur des formules mathématiques (représentation géométrique des formes). Graphiques vectoriels offre des avantages significatifs par rapport au raster, en particulier lorsqu'il s'agit de diagrammes, de texte et de graphiques industriels (et la rentabilité des formats est d'une grande importance pour Internet).

   Ainsi, le premier avantage est la taille nettement plus petite des images vectorielles par rapport aux bitmaps, car tous les pixels de l'image ne sont pas décrits, mais la figure entière (par exemple, pour définir un cercle, vous devez transférer 3-4 nombres : rayon, coordonnées du centre et, peut-être, type ou épaisseur de la ligne et ses attributs). Les formules mathématiques qui décrivent la représentation vectorielle prennent beaucoup moins de place que les pixels individuels et leurs attributs.

   Un autre avantage important de la représentation vectorielle est la possibilité de mettre à l'échelle pratiquement illimitée une image (ou de détailler ses parties) sans aucune perte de résolution ou de clarté de l'image. Aucun effort n'est requis pour adapter une représentation vectorielle à une palette, une plate-forme, un matériel ou une conception particulière ; et le schéma de compression et la qualité d'affichage correspondaient sans aucun problème.

   Cependant, toutes les images raster ne peuvent pas être converties en une forme vectorielle (par exemple, les photographies, les images numérisées ou les dessins raster sont difficiles à vectoriser). Mais les dessins vectoriels spécialement préparés (tels que les dessins au trait, les pictogrammes, les illustrations techniques, les cartes, les graphiques d'information et autres qui sont historiquement vectoriels) sont tout simplement stupides à pixelliser pour publication sur Internet, comme c'est le cas aujourd'hui.

   Problèmes d'affichage des graphiques vectoriels pendant Internet est né parce qu'il n'y avait pas d'autre méthode d'affichage autre que raster, et le plug-in pour afficher les fichiers au format PDF qui est apparu n'offrait pas la flexibilité nécessaire et nécessitait de stocker tout le contenu dans un seul formulaire - PDF.

   Pour garantir que les graphiques vectoriels peuvent être intégrés de manière transparente au format HTML traditionnel sans aucun logiciel supplémentaire, deux nouvelles normes vectorielles sont actuellement à l'étude par le comité des normes du W3C : PGML (Precision Graphics Mark-up Language) et VML (Vector Mark-up Language). . PGML est pris en charge par Adobe Systems, IBM, Netscape et Sun Microsystems, tandis que VML est pris en charge par Microsoft, Hewlett-Packard, Autodesk, Macromedia et Visio. Les deux normes sont basées sur des extensions du langage de balisage XML, promues pour une utilisation sur le Web en tant que successeur de HTML et recommandées par le W3C pour une utilisation future.

   Mais actuellement, aucun des navigateurs ne prend en charge les normes graphiques vectorielles, bien que des plug-ins soient déjà disponibles. Le format SWF (Shockwave Flash) de Macromedia et le format encore sous-estimé Xara Flare sont parmi les moyens les plus populaires d'afficher des images vectorielles statiques sur le Web.

   Éclater- bonne décision, qui permet l'inclusion d'images vectorielles qui vous permettent d'augmenter le niveau de détail d'une page de manière presque illimitée, alors que leurs tailles sont comparables à celles de Shockwave Flash. Cela ne veut pas dire que l'utilisation de modules supplémentaires pour visualiser les images est si gênante, mais lorsque vous utilisez de tels outils sur vos pages, assurez-vous d'en avertir l'utilisateur et de lui donner la possibilité de télécharger le module approprié avant qu'il ne se rende sur la page qui contiendra ces éléments. À court terme, cela ralentira bien sûr le processus de navigation pour nouveaux utilisateurs, mais progressivement vous gagnerez de plus en plus d'adhérents, jusqu'à ce que les moyens appropriés soient enfin inclus dans prochaine version Un navigateur et un module supplémentaire ne seront plus nécessaires pour les débutants.

   Animation, interactivité et interaction

   De manière générale, les images GIF peuvent être organisées en une pile spéciale dans un seul fichier, et le "film" résultant (flipbook) peut être lu en créant une simple animation bitmap. Netscape et Microsoft supportent le format GIF "animé" depuis les troisièmes versions de leurs navigateurs, de sorte que leur présence sur le Web est maintenant difficile à éviter. De nombreux animateurs GIF qui vous permettent de créer de telles piles GIF sont largement utilisés (à la fois commerciaux et publics). Cependant, la "revitalisation" du format GIF peut conduire à des tailles de fichier, parce que chaque "niveau" d'une telle pile est une image GIF individuelle, donc 15 images par seconde typiques pour l'animation par ordinateur peuvent "produire" un nombre incalculable de kilo-octets.

   En combinaison avec Java ou JavaScript, vous pouvez également créer des animations interactives qui répondront à l'utilisateur.

   Et maintenant, regardons d'autres solutions pour l'animation Web et l'interaction utilisateur interactive, et le rôle principal ici continue d'être joué par Macromedia, qui est entré sur le marché il y a longtemps avec ses programmes Shockwave et Flash et améliore continuellement ses produits, augmentant leur efficacité en fonction des besoins des utilisateurs et des concepteurs. .

   Créé à l'origine comme un format pour Macromedia Director, Shockwave est une famille de protocoles principalement destinés à produire du contenu interactif et graphique créé spécifiquement pour une utilisation sur Internet. Et Shockwave Flash est généralement un outil unique et l'un des plus de meilleures façons pour créer une animation et la publier sur une page Web. Shockwave Flash génère de très petits fichiers (car il utilise un format de représentation principalement vectoriel) et, par rapport aux autres formats, est le plus pratique en termes de préparation.

   Lors de la publication d'une telle animation sur vos pages, n'oubliez pas d'en informer l'utilisateur afin qu'il s'approvisionne à l'avance en module supplémentaire et se prépare à l'attente fastidieuse du téléchargement. Cependant, les versions récentes de Netscape Navigator et Internet Explorer avoir des visionneuses pour les animations Flash même dans le package de base. Netscape a confirmé que les futures versions de Navigator prendront en charge Flash, même au niveau du code.

   La décision finale vous appartient

   Ainsi, l'attitude vis-à-vis de la présentation du contenu Web évolue, de nouveaux formats de données et des outils de développement les supportant apparaissent. Cependant, les anciens formats (pour représenter les graphiques sont GIF et JPEG) sont encore très populaires. Ils sont pris en charge par presque tous les navigateurs et la plupart des développeurs ont une vaste expérience de travail avec eux. Il est important d'utiliser le bon format pour votre application spécifique afin d'assurer un équilibre entre la qualité de l'image et la taille des fichiers. Par exemple, une image GIF peut prendre plus de place et produire un résultat de qualité inférieure à une image JPEG, tandis qu'une autre sera l'inverse.

   Cependant, lors de la représentation d'images bitmap, le PNG devient plus préférable, et si vous allez encore plus loin et essayez d'utiliser une image vectorielle, alors le format Shockwave Flash de Macromedia est à votre service aujourd'hui.

   Le format SWF (Shockwave Flash) n'est pas un format couramment utilisé, mais un format vectoriel interne du programme Macromedia Flash (voir " Les leçons de Macromedia Flash" sur CD-ROM), donc pour obtenir votre propre image ou animation, vous devrez acheter le package multimédia approprié auprès de Macromedia, et l'utilisateur devra installer un module supplémentaire pour visualiser le résultat. Ainsi, pour placer simplement un dessin vectoriel sur votre page Web, vous devez surmonter un certain nombre d'inconvénients.

   Néanmoins, d'autres formats vectoriels sont en route, qui deviendront bientôt la norme.

   OrdinateurPress 5 "1999

   L'ajout d'une image se déroule en deux étapes : d'abord, un fichier graphique est préparé au format et à la taille souhaités, puis le fichier est affiché sur la page à l'aide de l'élément .

   Formats de fichiers

   Deux formats sont largement utilisés pour les graphiques Web - PNG et JPEG. Leur polyvalence, leur polyvalence, leur petite quantité de fichiers source avec une qualité suffisante pour le site, les ont bien servis, les définissant en fait comme la norme pour les images Web. En plus d'eux, les formats GIF et SVG sont utilisés sur les sites.

   Format PNG-8

   PNG-8 (Portable Network Graphics, graphiques réseau portables) est un format libre créé pour remplacer le GIF, dans lequel pendant longtemps des algorithmes propriétaires ont été utilisés.

   Particularités

   • Il utilise une palette 8 bits (256 couleurs) dans l'image, pour laquelle il a reçu le numéro huit dans son nom. Dans ce cas, vous pouvez choisir le nombre de couleurs qui seront enregistrées dans le fichier - de 2 à 256.
   • Contrairement au GIF, il n'affiche pas d'animation.

   Champ d'application

   Format PNG-24

   PNG-24 est un format similaire à PNG-8, mais utilise une gamme de couleurs de 24 bits. Similaire à JPEG, préserve la luminosité et la teinte des couleurs des photographies. Comme GIF et PNG-8, conserve les détails de l'image tels que les dessins au trait, les logos ou les illustrations.

   

   Particularités

   • Utilise environ 16,7 millions de couleurs par fichier, c'est pourquoi ce format est utilisé pour les images en couleur.
   • Prend en charge la transparence à plusieurs niveaux, cela vous permet de créer une transition en douceur de la zone transparente de l'image à la couleur.
   • En raison du fait que l'algorithme de compression utilisé conserve toutes les couleurs et tous les pixels de l'image inchangés, par rapport aux autres formats, PNG-24 a la plus grande taille finale du fichier graphique.

   Champ d'application

   Photos, dessins contenant des zones transparentes et translucides, dessins avec beaucoup de couleurs et des bords d'image nets.

   Format JPEG

   JPEG (Joint Photographic Experts Group) est un format de fichier image populaire largement utilisé pour créer des sites Web et stocker des photos. JPEG prend en charge les couleurs 24 bits et conserve inchangées la luminosité et la teinte des couleurs des photos. Ce format est appelé compression avec perte car l'algorithme JPEG rejette sélectivement les données. La méthode de compression peut introduire une distorsion dans l'image, en particulier si elle contient du texte, des détails fins ou des contours nets. Le format JPEG ne prend pas en charge la transparence. Lorsque vous enregistrez une photo dans ce format, les pixels transparents sont remplis de la couleur spécifiée.

   

   Particularités

   • Le nombre de couleurs dans l'image est d'environ 16,7 millions, ce qui est tout à fait suffisant pour maintenir la qualité photographique de l'image.
   • La principale caractéristique du format est la "qualité", qui vous permet de contrôler la taille finale du fichier. La qualité est mesurée de 0 à 100, plus la valeur est élevée, meilleure est l'image, mais la taille du fichier augmente également.
   • Prend en charge une technologie appelée JPEG progressif, dans laquelle une version basse résolution d'une image apparaît dans la fenêtre d'affichage avant que l'image elle-même ne soit entièrement chargée.

   Champ d'application

   Principalement utilisé pour les photographies. Peu adapté aux dessins contenant des zones transparentes, de petits détails ou du texte.

   Format GIF

   GIF (Graphics Interchange Format) est un format de fichier graphique largement utilisé pour créer des images animées. GIF utilise des couleurs 8 bits et comprime efficacement les zones de couleur unie tout en conservant les détails de l'image.

   

   Particularités

   • Le nombre de couleurs dans une image peut être compris entre 2 et 256, mais il peut s'agir de n'importe quelle couleur de la palette 24 bits. Le fichier GIF peut contenir des zones transparentes. Si un arrière-plan autre que blanc est utilisé, il apparaîtra à travers des "trous" dans l'image.
   • Prend en charge le changement image par image des images, ce qui rend le format populaire pour créer des animations simples.
   • Utilise une méthode de compression sans perte

   Champ d'application

   Textes, logos, illustrations aux arêtes vives, graphiques animés, images avec zones transparentes, bannières.

   Format SVG

   SVG (Scalable Vector Graphics, graphiques vectoriels évolutifs) est un format vectoriel dans lequel l'image n'est pas constituée de pixels, mais d'objets et de courbes. Pour cette raison, il ne convient pas aux photographies raster composées de points, mais il est excellent pour les illustrations contenant des contours distincts.

   Particularités

   • Les images au format SVG peuvent être mises à l'échelle autant que vous le souhaitez sans perte de qualité d'image.
   • La taille du fichier est généralement petite.
   • Prend en charge l'animation et l'interactivité.

   Champ d'application

   Textes, logos, illustrations aux bords nets.

   Ajout d'une image

   Un élément est utilisé pour ajouter une image à une page Web. , dont l'attribut src spécifie l'adresse du fichier graphique. La syntaxe générale pour ajouter une image est la suivante.

   "alt="(!LANG :<альтернативный текст>!}">

   Les attributs src et alt sont obligatoires.

   L'attribut src spécifie le chemin vers fichier graphique, une adresse absolue ou relative peut être utilisée pour le spécifier. Ensuite, considérez quelques différentes façons, comment déterminer le chemin d'accès à une image pour la placer sur une page Web. Prenons comme exemple un fichier appelé target.png , qui est stocké dans le dossier images de la racine du site.

   http://example.ru/images/target.png
   Si l'adresse commence par un protocole (http:// ou https://), il s'agit alors d'une adresse absolue. L'image sera toujours téléchargée à partir de l'adresse Internet spécifiée, même si la page Web est enregistrée sur l'ordinateur local.

   //exemple.ru/images/cible.png
   Il s'agit de l'adresse absolue de l'image sans préciser le protocole. Le navigateur remplacera indépendamment le protocole requis sur lequel le site fonctionne (http:// ou https://). Veuillez noter que ces types d'adresses ne fonctionnent pas sur les pages Web locales, mais uniquement sur Internet sous le contrôle d'un serveur Web.

   /images/cible.png
   S'il y a une barre oblique (/) au début de l'adresse, cela signifie que le dossier images est situé à la racine du site. Un dossier peut être imbriqué dans un autre, le chemin peut donc augmenter. Par exemple, /assets/images/target.png signifie que le dossier assets est situé à la racine du site, il contient le dossier images, à l'intérieur duquel se trouve le fichier target.png.

   ../images/target.png
   Les deux barres obliques (../) indiquent que le dossier image est un niveau plus haut dans la structure de dossiers que le document HTML. Sur la fig. La figure 1 montre le fichier source.html dans lequel l'image target.png doit être insérée.

   

   Riz. 1. Placement des fichiers

   images/cible.png
   Le nom du dossier sans point au début de l'adresse indique que le document HTML et le dossier avec l'image sont au même niveau (Fig. 2).

   

   Riz. 2. Placement des fichiers

   cible.png
   Le nom de fichier unique indique que l'image et la page Web sont situées au même endroit (Figure 3).

   

   Riz. 3. Placement des fichiers

   L'exemple 1 montre plusieurs manières d'ajouter une image à une page Web.

   Exemple 1 : Ajouter des images

   

   

   

   

   Texte alternatif

   Le texte alternatif est une partie importante des images et est destiné aux personnes malvoyantes qui ne peuvent pas voir les images et recevoir des informations du site en utilisant leur audition. Des lecteurs d'écran spéciaux lisent le texte du site et, au lieu d'images, ils prononcent le texte écrit dans l'attribut alt. Dans les navigateurs normaux, le contenu alternatif n'est affiché que lorsque les images ne sont pas affichées sur la page Web pour une raison quelconque.

   L'attribut alt doit décrire le contenu de l'image, et si l'image remplit une fonction décorative et n'a pas de signification significative, alors laissez l'alt vide (exemple 2).

   Exemple 2 : Utiliser alt

   

   

   Si les images nécessitent un repère visible, vous devez utiliser l'attribut de titre global, qui peut être ajouté à n'importe quel élément, pas seulement aux images. Lorsque vous survolez l'image, un texte apparaîtra contenant la valeur de l'attribut title (exemple 3).

   Exemple 3 : Utilisation du titre

   

   L'apparence de l'info-bulle dépend du navigateur spécifique et ne peut pas être modifiée. Sur la fig. 2 affiche une info-bulle dans le navigateur Firefox.

   

   Riz. 2. Type d'info-bulle

   Redimensionner une image

   Pour redimensionner l'image d'un élément les attributs width (width) et height (height) sont fournis. Les pixels ou les pourcentages sont utilisés comme valeur. L'exemple 4 montre comment ajouter ces attributs à .

   Exemple 4. Dimensions du dessin

   

   
   

   Les attributs largeur et hauteur sont facultatifs, après le chargement de l'image, le navigateur définira automatiquement sa taille d'origine. Fondamentalement, ces attributs sont utilisés aux fins suivantes :

   • réservez une place pour une photo;
   • réduire la taille des grandes photos ;
   • améliorer la qualité d'image des écrans Retina.

   Si les dimensions de l'image sont spécifiées explicitement, alors le navigateur les utilise pour afficher la zone vide correspondant à l'image lors du chargement du document. Sinon, le navigateur attend que l'image se charge complètement, puis modifie la largeur et la hauteur de l'image. Dans ce cas, un reformatage du texte peut se produire, car initialement la taille de l'image n'est pas connue et elle est automatiquement définie sur petite.

   La largeur et la hauteur de l'image peuvent être modifiées vers le haut et vers le bas. Le navigateur supprimera automatiquement les pixels supplémentaires, ou vice versa, complétera les pixels manquants afin d'obtenir une image de la taille appropriée. La qualité de l'image obtenue dépend fortement de son contenu, dans tous les cas, il faut se rappeler qu'il est seulement possible d'agrandir une image sans perte de détails dans un film.

   Les écrans Retina se caractérisent par une densité de pixels et des détails d'image élevés, de sorte que les images ordinaires semblent un peu floues. Pour améliorer leur qualité, les images sont doublées en taille. Par exemple, si une page Web nécessite une photo d'une largeur de 400 pixels, nous prenons une photo d'une largeur de 800 pixels, mais laissons une largeur de 400 pixels dans la valeur de l'attribut width.

   Les attributs largeur et hauteur ne doivent pas nécessairement aller ensemble. Si l'un de ces attributs n'est pas spécifié, le navigateur remplacera automatiquement la valeur souhaitée en fonction du rapport d'aspect de l'image.

   

   Étant donné que nous substituons indépendamment la largeur et la hauteur de l'image, nous pouvons intentionnellement déformer ses proportions en étirant l'image verticalement ou horizontalement.

   

   En plus des pixels, des pourcentages peuvent être utilisés comme tailles. Dans ce cas, la largeur est relative à l'élément parent.

   

   Il y a des difficultés avec la hauteur dans de tels cas, car la hauteur de l'image en pourcentage n'est prise en compte que lorsque la hauteur de son parent est explicitement définie. Si la hauteur de l'élément parent n'est spécifiée d'aucune façon, l'entrée telle que height="100%" est ignorée.

   Il existe des centaines de formats d'image, mais seuls quelques-uns sont pris en charge par les navigateurs Web. Dans cet article, nous décrirons les différents formats de fichiers graphiques qui sont à la disposition des concepteurs de sites Web et dans quel cas ils doivent être utilisés.

   Les formats de fichiers graphiques pris en charge par les navigateurs Web les plus populaires sont : Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) et graphiques vectoriels. Quelques propriétés des fichiers graphiques :

   • Transparence - cette propriété permet à l'image d'être à divers degrés de transparence d'un état solide à complètement transparent.
   • Compression - Cette propriété permet de stocker une image dans un fichier beaucoup plus petit, en utilisant des algorithmes mathématiques pour traiter un groupe de pixels comme un seul élément.
   • Weave - permet à l'image d'être chargée d'abord sur les lignes impaires, puis sur les lignes paires. Cela permet au visiteur de voir l'image plus tôt.
   • Animation - crée l'apparence d'un mouvement à travers une série de plans successifs. Le GIF animé ne nécessite pas de plug-in de navigateur et peut fonctionner sur presque tous les appareils.
   • Le chargement progressif est similaire au tissage en ce sens qu'il ne charge initialement qu'une partie de l'image, mais pas en fonction de lignes alternées.

   GIF a été fondé en 1980 et adopté par les concepteurs de sites Web au début des années 1990 comme principal format graphique pour les pages Web. Les fichiers GIF utilisent un algorithme de compression qui réduit la taille du fichier pour un chargement rapide. GIF est limité à 256 couleurs (8 bits), prend en charge la transparence et les graphiques entrelacés. Il est également possible de créer des graphiques animés en utilisant ce format. Tous les navigateurs peuvent afficher les fichiers GIF sans problème.

   Avantages des GIF :

   • Format graphique le plus largement pris en charge
   • Les diagrammes sont plus beaux dans ce format
   • Prise en charge de la transparence

   Les fichiers sont compressés mais prennent en charge les "vraies couleurs" (24 bits) et sont le format préféré pour les photographies où la qualité est très importante. JPEG prend en charge le format progressif, qui vous permet de voir presque instantanément l'image, dont la qualité s'améliorera une fois le téléchargement terminé.

   Contrairement aux fichiers GIF, les concepteurs Web peuvent gérer fichiers compressés JPEG, qui permet différents niveaux de qualité d'image et de tailles de fichier.

   Avantages du JPEG :

   • Une plus grande compression signifie des vitesses de téléchargement plus rapides.
   • Produit une excellente qualité pour les photographies et les dessins complexes.
   • Prise en charge de la couleur 24 bits.

   PNG est un format relativement récent qui a été introduit comme alternative aux fichiers GIF. PNG prend en charge jusqu'à 24 bits de couleur, de transparence, de tissage et peut contenir un court texte descriptif image utilisée dans les moteurs de recherche.

   Avantages du PNG :

   • Surmonte les limitations de couleur 8 bits de GIF
   • Permet la description textuelle des images pour les moteurs de recherche
   • Prend en charge la transparence
   • Les schémas sont plus beaux que les JPEG

   Graphiques vectoriels

   La plupart des graphiques Web sont des bitmaps ou des dessins constitués d'une grille de pixels colorés. Les illustrations doivent être créées en graphiques vectoriels, qui consistent en une description mathématique de chaque élément qui compose les formes de ligne et les couleurs de l'image. Les graphiques vectoriels sont créés à l'aide de programmes tels que Adobe Illustrator ou CorelDRAW. Les graphiques vectoriels doivent être convertis dans n'importe quel format GIF, JPEG ou PNG pour être utilisés sur des pages Web.

   Quel format doit être utilisé ?

   Un concepteur de sites Web peut choisir le format GIF ou JPEG pour la plupart des utilisations. Mais, comme les fichiers GIF ont tendance à être petits par rapport à la taille de fichier jpeg, la plupart des concepteurs de sites Web utiliseront le format GIF pour les arrière-plans, les blocs, les cadres et tout autre graphique qui s'harmonise parfaitement avec les couleurs 8 bits.

   La plupart des concepteurs choisiront le format JPEG pour les photographies et les illustrations où la compression ne compromet pas la qualité visuelle de l'image.