Première partie: Optimisation et formats dimages standards pour le Web Par Thierry Goulet Web Designer, Ministère de la Sécurité publique De 9h45 à 10h45.

Présentation au sujet: "Première partie: Optimisation et formats dimages standards pour le Web Par Thierry Goulet Web Designer, Ministère de la Sécurité publique De 9h45 à 10h45."— Transcription de la présentation:

1 Première partie: Optimisation et formats dimages standards pour le Web Par Thierry Goulet Web Designer, Ministère de la Sécurité publique De 9h45 à 10h45

2 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 dimages pour le Web

3 1.Les images et le Web Optimisation et formats standards dimages pour le Web

4 1. Les images et le Web Images = éléments graphiques Optimisation et formats standards dimages pour le Web Pourquoi des images? Rendu visuel = Formats dimages standards et CSS

5 1. Les images et le Web Comprendre les formats: Optimisation et formats standards dimages pour le Web Objectif de la présentation GIF, JPEG, PNG et PDF.

6 1. Les images et le Web PPI = Points per inch DPI = Dot per inch Optimisation et formats standards dimages pour le Web Web: 72 à 75 dpi Presse: 300 dpi La qualité des images

7 1. Les images et le Web Taille imprimée: 1po / 0,67 po Taille pixels: 300px / 200px Résolution: 300 dpi Poids: 178 ko Optimisation et formats standards dimages pour le Web Taille imprimée: 1po / 0,67 po Taille pixels: 72px / 48px Résolution: 72 dpi Poids: 10 ko

8 1. Les images et le Web GIF, JPEG et PNG = Web Optimisation et formats standards dimages pour le Web

9 1. Les images et le Web GIF et JPEG Optimisation et formats standards dimages pour le Web

10 1. Les images et le Web PNG Optimisation et formats standards dimages pour le Web <DIV ID="xyz" STYLE="filter:progid:DXImageTransform.Microsoft.Alp haImageLoader(src=image.png',sizingMethod='scale') ;">

11 1. Les images et le Web PDF, Flash et SVG Optimisation et formats standards dimages pour le Web Nécessitent un greffon (plug-in)

12 1. Les images et le Web Images matricielles et vectorielles Optimisation et formats standards dimages pour le Web

13 1. Les images et le Web Images matricielles Optimisation et formats standards dimages pour le Web

14 1. Les images et le Web Images vectorielles Optimisation et formats standards dimages pour le Web

15 2. Le format GIF Optimisation et formats standards dimages pour le Web

16 2. Le format GIF Optimisation et formats standards dimages pour le Web GIF = Graphic Interchange Format Algorithme de compression LZW (Lempel Zev Welch) avec droits dutilisation

17 2. Le format GIF Optimisation et formats standards dimages pour le Web Utilisation dune palette de couleurs restreinte 8 bits, maximum de 256 couleurs

18 2. Le format GIF Optimisation et formats standards dimages pour le Web Image matricielle standard

19 2. Le format GIF Optimisation et formats standards dimages pour le Web Image GIF Plus compression LZW

20 2. Le format GIF Optimisation et formats standards dimages pour le Web Palettes: Système: Windows et Macintosh Web: 216 couleurs communes Selon limage: 2 à 256 couleurs variables

21 2. Le format GIF Optimisation et formats standards dimages pour le Web Avantages: Très petits fichiers avec couleurs restreintes; Transparence limitée; Images animées.

22 2. Le format GIF Optimisation et formats standards dimages pour le Web Inconvénients: Couleurs restreintes; Résolution faible (72 dpi); Coût indirect (LZW).

23 2. Le format GIF Optimisation et formats standards dimages pour le Web Taille: 5,82 ko Nb couleurs: 32 Taille: 2,34 ko Nb couleurs: 32

24 2. Le format GIF Optimisation et formats standards dimages pour le Web Taille: 48,3 ko Nb couleurs: 256 Taille: 118 bytes Nb couleurs: 8 Taille: 861 bytes Format: JPEG

25 3. Le format JPEG Optimisation et formats standards dimages pour le Web

26 3. Le format JPEG Optimisation et formats standards dimages pour le Web JPEG = Joint Photographic Experts Group Taux de compression destructif Considéré efficace avec photographies et non avec du texte.

27 3. Le format JPEG Optimisation et formats standards dimages pour le Web Taux de compression: Division de limage en blocs Principe à retenir: Maximum de compression pour un minimum de dégats

28 3. Le format JPEG Optimisation et formats standards dimages pour le Web

29 3. Le format JPEG Optimisation et formats standards dimages pour le Web Avantages: Efficace avec photographies; Supporte les résolutions élevées; Millions de couleurs; JPEG progressif et JPEG 2000.

30 3. Le format JPEG Optimisation et formats standards dimages pour le Web Inconvénients: Inefficace avec du texte; Utilisé à outrance (photographie numérique, stockage et Word) ;

31 3. Le format JPEG Optimisation et formats standards dimages pour le Web Taille: 16,0 ko (GIF était 48,3 ko) Taille: 2,64 ko

32 4. Le format PNG Optimisation et formats standards dimages pour le Web

33 4. Le format PNG Optimisation et formats standards dimages pour le Web PNG = Portable Network Graphic Utilisation gratuite, aucun brevet.

34 4. Le format PNG Optimisation et formats standards dimages pour le Web Types de PNG: 8 bits Fonctionne comme le GIF Pas de compression LZW

35 4. Le format PNG Optimisation et formats standards dimages pour le Web Types de PNG: 24 bits Équivalent du JPEG; Compression fixe (non ajustable); Transparence (Alpha Channel).

36 4. Le format PNG Optimisation et formats standards dimages pour le Web Alpha Channel: Canal 8 bits, 256 niveaux de transparence; GIF: 2 niveaux (opaque ou transparent); Limage se fond dans le décor.

37 4. Le format PNG Optimisation et formats standards dimages pour le Web Avantage: Transparence.

38 4. Le format PNG Optimisation et formats standards dimages pour le Web Inconvénients: Compression moins efficace que ses rivaux; Transparence non supportée par Internet Explorer

39 4. Le format PNG Optimisation et formats standards dimages pour le Web À quoi bon? Power Point et Flash!

40 4. Le format PNG Optimisation et formats standards dimages pour le Web Taille: 2,34 ko Nb couleurs: 32 Format: GIF Taille: 3,03 ko Nb couleurs: 32 Format: PNG

41 4. Le format PNG Optimisation et formats standards dimages pour le Web Taille: 16,0 ko Format: JPEG Taille: 132,2 ko Format: PNG

42 4. Le format PNG Optimisation et formats standards dimages pour le Web Taille: 145,4 ko Avec transparence Format: PNG

43 5. Le format PDF Optimisation et formats standards dimages pour le Web

44 5. Le format PDF Optimisation et formats standards dimages pour le Web PDF = Portable Document Format Visualisation à lécran dun document Post Script; Nest pas une image pour le Web.

45 5. Le format PDF Optimisation et formats standards dimages 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.

46 5. Le format PDF Optimisation et formats standards dimages pour le Web Acrobat vs PDF: Acrobat est un logiciel, PDF est un format de fichier.

47 5. Le format PDF Optimisation et formats standards dimages pour le Web Acrobat vs PDF: Création de PDF Acrobat; Greffons de logiciels (Plug-ins); Logiciels indépendants (PDF 995).

48 5. Le format PDF Optimisation et formats standards dimages pour le Web Avantages: Respect dun aspect visuel; Sécurité; Format de diffusion.

49 5. Le format PDF Optimisation et formats standards dimages pour le Web Inconvénients: Instabilité; Édition difficile; Peut facilement devenir lourd.

50 6. En conclusion… Optimisation et formats standards dimages pour le Web

51 6. En conclusion… Optimisation et formats standards dimages pour le Web GIF et JPEG: Destinés au Web; Stables et standards; Pas faits pour limpression ou Word.

52 6. En conclusion… Optimisation et formats standards dimages pour le Web PNG: Devra acquérir de la maturité; Manque de support des navigateurs; À utiliser dans Power Point et Flash.

53 6. En conclusion… Optimisation et formats standards dimages 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 Adobe commencent à proposer des solutions PDF.

54 6. En conclusion… Optimisation et formats standards dimages pour le Web Ce que nous réserve lavenir… GIF? JPEG? PNG? Normalisation du PDF?? SVG Print normalisé par le W3C.

55 6. En conclusion… Optimisation et formats standards dimages pour le Web Finalement… Le web nest pas un médium dimagerie; Les pionniers sont toujours en place.

56 Annexe 1 Optimisation et formats standards dimages pour le Web Références: www.alistapart.com www.libpng.org www.prepressure.com www.jpeg.org www.echoecho.com www.pdf995.com/ www.w3.org Goulet, Thierry, Initiation au traitement dimages, MSP Press, 2002, 43 p.

57 Merci de votre attention Optimisation et formats standards dimages pour le Web