1 / 57

Première partie:

Première partie:. Optimisation et formats d’images standards pour le Web. Par Thierry Goulet Web Designer, Ministère de la Sécurité publique De 9h45 à 10h45. Optimisation et formats standards d’images pour le Web. Sujets abordés:. Les images et le Web; Le format GIF; Le format JPEG;

kessie-shaffer
Download Presentation

Première partie:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Optimisation et formats standards d’images pour le Web Sujets abordés: Les images et le Web; Le format GIF; Le format JPEG; Le format PNG; Le format PDF; Mise en contexte et conclusion.

  3. Optimisation et formats standards d’images pour le Web Les images et le Web

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

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

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

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

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

  9. Optimisation et formats standards d’images pour le Web 1. Les images et le Web <img src=“image.gif”> GIF et JPEG

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

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

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

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

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

  15. Optimisation et formats standards d’images pour le Web 2. Le format GIF

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

  17. Optimisation et formats standards d’images pour le Web 2. Le format GIF Utilisation d’une palette de couleurs restreinte 8 bits, maximum de 256 couleurs

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

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

  20. Optimisation et formats standards d’images pour le Web 2. Le format GIF Palettes: Système: Windows et Macintosh Web: 216 couleurs communes Selon l’image: 2 à 256 couleurs variables

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

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

  23. Optimisation et formats standards d’images pour le Web 2. Le format GIF Taille: 5,82 koNb couleurs: 32 Taille: 2,34 koNb couleurs: 32

  24. Optimisation et formats standards d’images pour le Web 2. Le format GIF Taille: 48,3 koNb couleurs: 256 Taille: 118 bytesNb couleurs: 8 Taille: 861 bytesFormat: JPEG

  25. Optimisation et formats standards d’images pour le Web 3. Le format JPEG

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

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

  28. Optimisation et formats standards d’images pour le Web 3. Le format JPEG

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

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

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

  32. Optimisation et formats standards d’images pour le Web 4. Le format PNG

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

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

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

  36. Optimisation et formats standards d’images pour le Web 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.

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

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

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

  40. Optimisation et formats standards d’images pour le Web 4. Le format PNG Taille: 3,03 koNb couleurs: 32Format: PNG Taille: 2,34 koNb couleurs: 32Format: GIF

  41. Optimisation et formats standards d’images pour le Web 4. Le format PNG Taille: 132,2 koFormat: PNG Taille: 16,0 koFormat: JPEG

  42. Optimisation et formats standards d’images pour le Web 4. Le format PNG Taille: 145,4 koAvec transparenceFormat: PNG

  43. Optimisation et formats standards d’images pour le Web 5. Le format PDF

  44. Optimisation et formats standards d’images pour le Web 5. Le format PDF PDF = Portable Document Format Visualisation à l’écran d’un document Post Script; N’est pas une image pour le Web.

  45. Optimisation et formats standards d’images 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.

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

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

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

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

  50. Optimisation et formats standards d’images pour le Web 6. En conclusion…

More Related