www.philatelistes.net - Les images du Web
Philatelic Webmasters Organization (PWO)
Association fondée pour promouvoir, soutenir et développer la philatélie grâce à la création et la publication sur le Web. Contrairement à ce que son titre pourrait faire penser, elle s'adresse également aux webmasters francophones. Utile pour tous ceux qui souhaitent développer un site et bénéficier du savoir-faire des "aînés" sur le sujet.

www.philatelistes.net

Rechercher Membres Contacts Aide
Modération off     Accueil | Actualité | Annonces | Forum | Philamômes | Histoire postale | Merson | Liens

Vendre, Acheter, Echanger
Les adresses
Ventes sur offres ou à prix nets
Petites annonces

Actualités
Actualités

Evénements

Revue de presse
Le forum
Les sondages
Votre e-mail:


Les images du Web


Introduction
Astuces PHP et MySQL
Les images
Caractères ASCII
Couleurs du Web
Le e-mail
Aspects légaux
Javascript


Leçons

1. Choisir entre les formats GIF ou JPG
2. Images fixes (bibliothèque), icônes, fonds d'écran
3. Images animées (bibliothèque)
4. Recherches d'images sur Yahoo, Alta-Vista,...
5. Alléger ou Construire des images avec un fond transparent, animées ou "mappées"
6. Codes de couleurs
7. Bannières

Choisir entre GIF et JPEG

Sur le Web, vous avez intérêt à n'utiliser que deux types d'images GIF pour les images animées, avec un fond transparent ou qui résultent d'outils de constructions vectorielles (Contours polygonaux, titres, par exemple) et JPEG pour les photographies.

GIF (Compuserve)
JPEG, JPG
format adapté aux constructions vectorielles
(Contours polygonaux, titres, par exemple)

 14Ko
Maximum 256 couleurs
images animées
images avec fond transparent
chargement progressif (interlaced)
Possibilité de compression par réduction du nombre de couleurs (palette)
format adapté aux photographies

 18 Ko
16 millions de couleurs
Compression de l'image variable

Outils de Création, manipulation d'Images

Modifier les images

Vous pouvez utiliser Photofiltre (cf. le site Liberkey)
Vous pourrez l'utiliser également pour des conversions ("bmp vers GIF", par exemple) ou des captures d'écran, des diminutions du nombre de couleurs, de taille,...

Rendre "transparentes" des images GIF

Cela sert souvent à enlever les "bords" d'une image :



application Windows d'édition et de conversion d'images GIFs, TIFFs et JPEGs tres complète. Il permet (surtout) de rendre transparentes les images GIF .

Construction d'images animées


GIF construction Set

Permet de créer des images animées par superposition, en affichages successifs. Simple d'usage sous réserve que vous ayiez créé correctement vos images (même taille, centrage,...)
L'image ci-dessus est obtenue en utilisant GIF Construction Set, en superposant les deux images suivantes, et en indiquant au programme que l'on fait une boucle (Instruction LOOP) pour réafficher l'image A, la B puis la A, la B,... et en faisant une pose d'une seconde entre chaque image (DELAY =100 dans l'instruction CONTROL de GIF ) :


A

B

A+B

Construction d'images mappées

MapEdit
Outil très pratique qui permet d'associer des pages html à des contours polygonaux définis sur une image "GIF". L'utilisateur n'a plus qu'à cliquer avec sa souris sur l'objet pour accéder à la page de son choix.
Par exemple, cliquez sur le mot LEVANT sur le timbre suivant :

Levant


Alleger les images JPEG

Vous pouvez agir de plusieurs manières (avec PaintShop Pro, par exemple):

1-Réduire la surface de l'image

C'est évidemment la meilleure solution, mais pas forcémment celle qui vous conviendra le mieux pour illuster votre propos.
Utilisez la fonction resample et non la fonction resize, qui peut aboutir à une perte importante de netteté.
N'oubliez pas que les tailles spécifiées (HEIGHT et WIDTH) dans la balise IMG ne modifient pas les tailles réellement transférées :
Les deux images ci-dessous on EXACTEMENT le même poids (18Ko).
Au moment de l'affichage, le navigateur réduit l'image ; vis-à-vis de l'internaute le temps de chargement est identique :

Astuce :
Notez qu'à poids égal, une image dont vous spécifiez la taille par les arguments HEIGHT et WIDTH se charge plus vite que celle appelée dans une balise où vous ne spécifiez pas ces paramètres.
5c type Blanc
 18Ko
instruction :

<img src="../bl75_0.jpg" width=97 height=115 alt="5c type Blanc" border="0">

5c type Blanc
 18Ko
instruction :

<img src="../bl75_0.jpg" width=48 height=57 alt="5c type Blanc" border="0">

2- Diminuer le nombre de couleurs

En passant en noir et blanc :
Mais, comme vous le voyez, cela ne change pas grand-chose (ici on passe de 18 à 14Ko)
5c type Blanc
 18Ko
5c type Blanc
 14Ko

3- Modifier le facteur de compression

C'est là que vous allez pouvoir gagner le plus en poids d'image :
0 %
  18 Ko
(taille normale)
10 %
 9 Ko
(le minimum standard)
30 % 6 Ko
(Un bon compromis)
50 %
 5 Ko
(réserver aux très grandes images)
70 %
 4 Ko
(forte perte de qualité)

Alleger les images GIF

Diminuer le nombre de couleurs

En passant de 256 couleurs à 16, bien adapté à notre cas, puisqu'il n'y a que quelques nuances de vert, on perd assez peu en définition, mais on passe de 18 à 6Ko
5c type Blanc
 18Ko

 6Ko


Le site de raspberryhill
Ce site vous propose d'optimiser l'affichage d'une image GIF en plusieurs modes (diminution des couleurs, taille,...) Vous voyez ensuite le résultat. Vous pouvez alors stocker votre GIF optimisé. (souvent vous pourrez gagner jusqu'à 20 % en taille !

Les codes des Couleurs

Ces codes permettent d'afficher des tableaux avec des fonds colorés :
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Les Bannières

Il s'agit de bandeaux publicitaires de différentes tailles, animées ou non. En voici une des miennes en 460 x 60 pixels (13 Ko) construite avec les outils ci-dessus.



Il y a également plusieurs services on-line qui proposent de réaliser votre bannière gratuitement comme par exemple The banner generator
Vous pourrez ensuite promouvoir votre site, en échangeant gratuitement ces bannières avec ceux qui participent au même réseau.
Attention, dans la plupart des réseaux d'échanges de bannières non commerciales, une condition est d'être en 460 x 60 pixels avec un "poids" inférieur à 15 Ko.

Sur philatelistes.net

Sur ce site vous pouvez :

  • visualiser les sites ayant des bannires (cf. liens)
  • inscrire votre site au hit-parade (cf. hit-parade). Votre bannire sera automatiquement affiche en haut des pages de philatelistes.net, alatoirement choisie parmi toutes les bannires inscrites dans le hit-parade.
  • ajouter votre bannire dans les liens(cf. crire). Il suffit de me la transmettre par e-mail en respectant le format ci-dessus.
  • gnrer rapidement une bannire provisoire (cf. outils) ... en attendant de crer la vtre.



Imprimer cette page  | Recommander cette page à un ami


Toussaint COPPOLANI
Toussaint COPPOLANI

Copyright © 2000 www.philatelistes.net
Credits, Critiques