Post on 30-Dec-2015
description
transcript
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