première partie:

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

Optimisation et formats standards d’images pour le Web

1. Les images et le Web

Images = éléments graphiques

Optimisation et formats standards d’images pour le Web

Pourquoi des images?

Rendu visuel = Formats d’images standards et CSS

1. Les images et le Web

Comprendre les formats:

Optimisation et formats standards d’images pour le Web

Objectif de la présentation

GIF, JPEG, PNG et PDF.

1. Les images et le Web

PPI = Points per inchDPI = Dot per inch

Optimisation et formats standards d’images pour le Web

Web: 72 à 75 dpiPresse: 300 dpi

La qualité des images

1. Les images et le Web

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

Optimisation et formats standards d’images pour le Web

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

1. Les images et le Web

GIF, JPEG et PNG=

Web

Optimisation et formats standards d’images pour le Web

1. Les images et le Web

GIF et JPEG

Optimisation et formats standards d’images pour le Web

<img src=“image.gif”>

1. Les images et le Web

PNG

Optimisation et formats standards d’images pour le Web

<DIV ID="xyz"

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

</DIV>

1. Les images et le Web

PDF, Flash et SVG

Optimisation et formats standards d’images pour le Web

Nécessitent un greffon (plug-in)

1. Les images et le Web

Images matricielles et vectorielles

Optimisation et formats standards d’images pour le Web

1. Les images et le Web

Images matricielles

Optimisation et formats standards d’images pour le Web

1. Les images et le Web

Images vectorielles

Optimisation et formats standards d’images pour le Web

2. Le format GIF

Optimisation et formats standards d’images pour le Web

2. Le format GIF

Optimisation et formats standards d’images pour le Web

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

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Utilisation d’une palette de couleurs restreinte

8 bits, maximum de 256 couleurs

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Image matriciellestandard

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Image GIF

Plus compression LZW

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Palettes:

Système: Windows et Macintosh

Web: 216 couleurs communes

Selon l’image: 2 à 256 couleurs variables

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Avantages:

Très petits fichiers avec couleurs restreintes;

Transparence limitée;

Images animées.

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Inconvénients:

Couleurs restreintes;

Résolution faible (72 dpi);

Coût indirect (LZW).

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Taille: 5,82 koNb couleurs: 32

Taille: 2,34 koNb couleurs: 32

2. Le format GIF

Optimisation et formats standards d’images pour le Web

Taille: 48,3 koNb couleurs: 256

Taille: 118 bytesNb couleurs: 8

Taille: 861 bytesFormat: JPEG

3. Le format JPEG

Optimisation et formats standards d’images pour le Web

3. Le format JPEG

Optimisation et formats standards d’images pour le Web

JPEG = Joint Photographic Experts Group

Taux de compression destructif

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

3. Le format JPEG

Optimisation et formats standards d’images pour le Web

Taux de compression:

Division de l’image en blocs

Principe à retenir:

Maximum de compressionpour un minimum de dégats

3. Le format JPEG

Optimisation et formats standards d’images pour le Web

3. Le format JPEG

Optimisation et formats standards d’images pour le Web

Avantages:

Efficace avec photographies;

Supporte les résolutions élevées;

Millions de couleurs;

JPEG progressif et JPEG 2000.

3. Le format JPEG

Optimisation et formats standards d’images pour le Web

Inconvénients:

Inefficace avec du texte;

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

3. Le format JPEG

Optimisation et formats standards d’images pour le Web

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

Taille: 2,64 ko

4. Le format PNG

Optimisation et formats standards d’images pour le Web

4. Le format PNG

Optimisation et formats standards d’images pour le Web

PNG = Portable Network Graphic

Utilisation gratuite, aucun brevet.

4. Le format PNG

Optimisation et formats standards d’images pour le Web

Types de PNG:

8 bitsFonctionne comme le GIF Pas de compression LZW

4. Le format PNG

Optimisation et formats standards d’images pour le Web

Types de PNG:

24 bits

Équivalent du JPEG;

Compression fixe (non ajustable);

Transparence (Alpha Channel).

4. Le format PNG

Optimisation et formats standards d’images pour le Web

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

Optimisation et formats standards d’images pour le Web

Avantage:

Transparence.

4. Le format PNG

Optimisation et formats standards d’images pour le Web

Inconvénients:

Compression moins efficace que ses rivaux;

Transparence non supportéepar Internet Explorer

4. Le format PNG

Optimisation et formats standards d’images pour le Web

À quoi bon?

Power Point et Flash!

4. Le format PNG

Optimisation et formats standards d’images pour le Web

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

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

4. Le format PNG

Optimisation et formats standards d’images pour le Web

Taille: 16,0 koFormat: JPEG

Taille: 132,2 koFormat: PNG

4. Le format PNG

Optimisation et formats standards d’images pour le Web

Taille: 145,4 koAvec transparenceFormat: PNG

5. Le format PDF

Optimisation et formats standards d’images pour le Web

5. Le format PDF

Optimisation et formats standards d’images pour le Web

PDF = Portable Document Format

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

N’est pas une image pour le Web.

5. Le format PDF

Optimisation et formats standards d’images pour le Web

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

Optimisation et formats standards d’images pour le Web

Acrobat vs PDF:

Acrobat est un logiciel,

PDF est un format de fichier.

5. Le format PDF

Optimisation et formats standards d’images pour le Web

Acrobat vs PDF:

Création de PDF

Acrobat;

Greffons de logiciels (Plug-ins);

Logiciels indépendants (PDF 995).

5. Le format PDF

Optimisation et formats standards d’images pour le Web

Avantages:

Respect d’un aspect visuel;

Sécurité;

Format de diffusion.

5. Le format PDF

Optimisation et formats standards d’images pour le Web

Inconvénients:

Instabilité;

Édition difficile;

Peut facilement devenir lourd.

6. En conclusion…

Optimisation et formats standards d’images pour le Web

6. En conclusion…

Optimisation et formats standards d’images pour le Web

GIF et JPEG:

Destinés au Web;

Stables et standards;

Pas faits pour l’impression ou Word.

6. En conclusion…

Optimisation et formats standards d’images pour le Web

PNG:

Devra acquérir de la maturité;

Manque de support des navigateurs;

À utiliser dans Power Point et Flash.

6. En conclusion…

Optimisation et formats standards d’images pour le Web

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…

Optimisation et formats standards d’images pour le Web

Ce que nous réserve l’avenir…

GIF? JPEG? PNG?

Normalisation du PDF??

SVG Print normalisé par le W3C.

6. En conclusion…

Optimisation et formats standards d’images pour le Web

Finalement…

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

Les pionniers sont toujours en place.

Annexe 1

Optimisation et formats standards d’images pour le Web

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.

Merci de votre attention

Optimisation et formats standards d’images pour le Web