première partie: optimisation et formats dimages standards pour le web par thierry goulet web...

Première partie:

Optimisation et formats d’images standards pour le Web

Par Thierry GouletWeb Designer, Ministère de la Sécurité publiqueDe 9h45 à 10h45

Sujets abordés:

1. Les images et le Web;2. Le format GIF;3. Le format JPEG;4. Le format PNG;5. Le format PDF;6. Mise en contexte et conclusion.

Optimisation et formats standards d’images pour le Web

1. Les images et le Web



Images = éléments graphiques


Pourquoi des images?

Rendu visuel = Formats d’images standards et CSS


Comprendre les formats:


Objectif de la présentation

GIF, JPEG, PNG et PDF.


PPI = Points per inchDPI = Dot per inch


Web: 72 à 75 dpiPresse: 300 dpi

La qualité des images


Taille imprimée: 1po / 0,67 poTaille pixels: 300px / 200pxRésolution: 300 dpiPoids: 178 ko


Taille imprimée: 1po / 0,67 poTaille pixels: 72px / 48pxRésolution: 72 dpiPoids: 10 ko


GIF, JPEG et PNG=

Web



GIF et JPEG


<img src=“image.gif”>


PNG


<DIV ID="xyz"

STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘image.png',sizingMethod='scale');">

</DIV>


PDF, Flash et SVG


Nécessitent un greffon (plug-in)


Images matricielles et vectorielles



Images matricielles



Images vectorielles


2. Le format GIF


2. Le format GIF


GIF = Graphic Interchange FormatAlgorithme de compression LZW (Lempel Zev Welch) avec droits d’utilisation

2. Le format GIF


Utilisation d’une palette de couleurs restreinte

8 bits, maximum de 256 couleurs

2. Le format GIF


Image matriciellestandard

2. Le format GIF


Image GIF

Plus compression LZW

2. Le format GIF


Palettes:

Système: Windows et Macintosh

Web: 216 couleurs communes

Selon l’image: 2 à 256 couleurs variables

2. Le format GIF


Avantages:

Très petits fichiers avec couleurs restreintes;

Transparence limitée;

Images animées.

2. Le format GIF


Inconvénients:

Couleurs restreintes;

Résolution faible (72 dpi);

Coût indirect (LZW).

2. Le format GIF


Taille: 5,82 koNb couleurs: 32


2. Le format GIF



Taille: 118 bytesNb couleurs: 8

Taille: 861 bytesFormat: JPEG

3. Le format JPEG


3. Le format JPEG


JPEG = Joint Photographic Experts Group

Taux de compression destructif

Considéré efficace avec photographies et non avec du texte.

3. Le format JPEG


Taux de compression:

Division de l’image en blocs

Principe à retenir:

Maximum de compressionpour un minimum de dégats

3. Le format JPEG


3. Le format JPEG


Avantages:

Efficace avec photographies;

Supporte les résolutions élevées;

Millions de couleurs;

JPEG progressif et JPEG 2000.

3. Le format JPEG


Inconvénients:

Inefficace avec du texte;

Utilisé à outrance(photographie numérique, stockage et Word);

3. Le format JPEG


Taille: 16,0 ko(GIF était 48,3 ko)

Taille: 2,64 ko

4. Le format PNG


4. Le format PNG


PNG = Portable Network Graphic

Utilisation gratuite, aucun brevet.

4. Le format PNG


Types de PNG:

8 bitsFonctionne comme le GIF Pas de compression LZW

4. Le format PNG


Types de PNG:

24 bits

Équivalent du JPEG;

Compression fixe (non ajustable);

Transparence (Alpha Channel).

4. Le format PNG


Alpha Channel:

Canal 8 bits, 256 niveaux de transparence;

GIF: 2 niveaux (opaque ou transparent);

L’image se fond dans le décor.

4. Le format PNG


Avantage:

Transparence.

4. Le format PNG


Inconvénients:

Compression moins efficace que ses rivaux;

Transparence non supportéepar Internet Explorer

4. Le format PNG


À quoi bon?

Power Point et Flash!

4. Le format PNG


Taille: 2,34 koNb couleurs: 32Format: GIF

Taille: 3,03 koNb couleurs: 32Format: PNG

4. Le format PNG


Taille: 16,0 koFormat: JPEG

Taille: 132,2 koFormat: PNG

4. Le format PNG


Taille: 145,4 koAvec transparenceFormat: PNG

5. Le format PDF


5. Le format PDF


PDF = Portable Document Format

Visualisation à l’écran d’un document Post Script;

N’est pas une image pour le Web.

5. Le format PDF


Post Script:

Langage de programmation;

Positionnement d’éléments graphiques;

Indépendant du matériel(Device independant);

Mélange de vectoriel et matriciel.

5. Le format PDF


Acrobat vs PDF:

Acrobat est un logiciel,

PDF est un format de fichier.

5. Le format PDF


Acrobat vs PDF:

Création de PDF

Acrobat;

Greffons de logiciels (Plug-ins);

Logiciels indépendants (PDF 995).

5. Le format PDF


Avantages:

Respect d’un aspect visuel;

Sécurité;

Format de diffusion.

5. Le format PDF


Inconvénients:

Instabilité;

Édition difficile;

Peut facilement devenir lourd.

6. En conclusion…


6. En conclusion…


GIF et JPEG:

Destinés au Web;

Stables et standards;

Pas faits pour l’impression ou Word.

6. En conclusion…


PNG:

Devra acquérir de la maturité;

Manque de support des navigateurs;

À utiliser dans Power Point et Flash.

6. En conclusion…


PDF:

Format de publication et non diffusion;

A évolué au cours des dernières années;

Gagne en stabilité;

Des compagnies autres que Adobecommencent à proposer des solutions PDF.

6. En conclusion…


Ce que nous réserve l’avenir…

GIF? JPEG? PNG?

Normalisation du PDF??

SVG Print normalisé par le W3C.

6. En conclusion…


Finalement…

Le web n’est pas un médium d’imagerie;

Les pionniers sont toujours en place.

Annexe 1


Références:

www.alistapart.comwww.libpng.orgwww.prepressure.comwww.jpeg.orgwww.echoecho.comwww.pdf995.com/www.w3.orgGoulet, Thierry, Initiation au traitement d’images,

MSP Press, 2002, 43 p.

http://www.alistapart.com/

Merci de votre attention


première partie: optimisation et formats dimages standards pour le web par thierry goulet web...

Documents