Université de Picardie Jules VerneLuis Pires Programme 1. Introduction 2. Numérisation / acquisition 3. Propriétés des images 4. Formats d'images 5. Outils 6. Applications 7. Optimisation pour le web 8. Aspects juridiques 9. Visite guidée

Université de Picardie Jules VerneLuis Pires 1. Introduction

Université de Picardie Jules VerneLuis Pires Introduction Image de type matriciel (bitmap) Image de type vectoriel Unité élémentaire appelée pixel Résolution (dpi ou ppp) Dynamique de l’image (codage sur n bits) Format de l’image (type de fichier) Modes de couleur (RVB, CMJN, niveaux de gris, …) Affichage écran / impression

Université de Picardie Jules VerneLuis Pires 2. Numérisation

Université de Picardie Jules VerneLuis Pires Numérisation Transformer l’image analogique (continue) en une image numérique (discontinue) Deux phase : –Échantillonnage –Codage de l’information

Université de Picardie Jules VerneLuis Pires Numérisation

Numérisation Scanner à plat Scanner à diapos & négatifs Copieur multifonctions

Université de Picardie Jules VerneLuis Pires Numérisation Appareil Photo numérique compact bridge reflex

Université de Picardie Jules VerneLuis Pires Importation d’images Depuis Adobe Acrobat (format.pdf) Depuis Illustrator (format.ai)

Université de Picardie Jules VerneLuis Pires 3. Caractéristiques des images

Université de Picardie Jules VerneLuis Pires Caractéristiques des images Compression sans pertes (compactage) Compression avec pertes (compression) Transparence Entrelacement (affichage progressif) Animation

Université de Picardie Jules VerneLuis Pires Caractéristiques des images Facteur de qualité de l’image Format de l’image (bmp, gif, jpg, png, tif...) Dimensions de l’image nb. Pixels Résolution Codage de l’information / nb de couleurs Taille du fichier Exemple : une image au format bmp x=800 pixels y=600 pixels Codage sur 8 bits = 256 couleurs possibles pour chaque pixel La taille du fichier bitmap est de l’ordre de octets

Université de Picardie Jules VerneLuis Pires 4. Formats d’images

Université de Picardie Jules VerneLuis Pires Formats d’images BMP (Windows Bitmap) –Origine Microsoft pour Windows, environnement PC –Type MIME : image/x-ms-bmp –Image de type matriciel –Codage sur 24 bits, 8 bits, 4 bits ou 2 bits –Soit sans compression = poids de fichier élevé –Soit avec compression RLE (Run-length encoding) –Peu utilisé sur le Web

Université de Picardie Jules VerneLuis Pires Formats d’images GIF (Graphics Interchange Format ) –Origine CompuServe (1987) –Type MIME : image/gif –Image de type matriciel –Format ouvert depuis 2004 en Europe –Codage sur 8 bits (256 couleurs) –Algorithme de compression sans perte LZW (Lempel-Ziv-Welch) –Possibilité d’animation et de transparence (1 seul niveau) –Très utilisé sur le web (logos, icônes, graphiques, photos N&B)

Université de Picardie Jules VerneLuis Pires Formats d’images JPEG (Joint Photo Expert Group) –Origine Joint Photographic Experts Group (1986) –Norme : JPEG ISO/CEI –Type MIME : image/jpeg –Format ouvert –Images codées sur 24 bits (16 millions de couleurs ) –Compression JPEG basée sur une méthode DCT (Transformée en cosinus discrète) –Très utilisé (Photographies, graphiques, logos, …)

Université de Picardie Jules VerneLuis Pires Formats d’images JPEG 2000 (ISO/CEI ) –Compression avec ou sans perte –Transformation en ondelettes (méthode d’analyse mathématique du signal) –Plus performante que JPEG ISO/CEI : fichiers d’un poids inférieur à qualité d’image égale –Contours plus nets et plus contrastés –Très peu utilisé en grand public

Université de Picardie Jules VerneLuis Pires Formats d’images PNG (Portable Network Graphics) –Origine W3C : créé en 1995 pour remplacer le format GIF –ISO (en 2004), IETF RFC 2083 –Type MIME : image/png –Image de type matriciel sans perte –Format ouvert –Codage sur 1, 2, 4, 8, 24, 32 et 48 bits –Translucidité : canal alpha (inopérant sur IE <6, recours à JS) Ou transparence comme sur le format GIF –Recommandé par le consortium w3 depuis 1996, –(logos, icônes, graphiques, photos N&B) –Non reconnu par les navigateurs de version <3.0

Université de Picardie Jules VerneLuis Pires Formats d’images TIFF (Tagged Image File Format) –Origine Microsoft et Aldus acheté par Adobe (1987) –Type MIME : image/tiff –Dans le domaine public depuis 1992 –Compression avec ou sans perte : brut, PackBits, LZW, CCITT Fax, JPEG, … –Codage de 1 à 64 bits –Format courant, reconnu par la plupart des logiciels de traitement d'image –pour les images scannées

Université de Picardie Jules VerneLuis Pires Formats d’images EPS (Encapsulated PostScript) –Type MIME : image/x-eps –Origine Adobe Systems, format du langage Postscript pour Adobe (1992) –Contient une description de l’image en vue de son impression –Constitué d'objets vectoriels et/ou bitmap –Adapté à l'impression

Université de Picardie Jules VerneLuis Pires Formats d’images PDF (Portable Document Format) –Origine Adobe Systems (1993), évolution du format PostScript –Normalisé ISO :2008 depuis –Type MIME : application/pdf –Format ouvert, mais non libre ! –multi plate-forme –Préserve la mise en forme (polices d'écritures, images, objets graphiques…)

Université de Picardie Jules VerneLuis Pires Formats d’images PS (Post Script) –Origine Adobe Systems (1982) –Type MIME : application/postscript –Licence Adobe, interpréteur PostScript libre –Format de fichier d'impression –Description objets vectoriels, bitmap –Fichier unique décrivant le document (textes, images, polices, couleurs, etc.). –Préserve la mise en forme (polices d'écritures, images, objets graphiques…)

Université de Picardie Jules VerneLuis Pires 5. Outils

Université de Picardie Jules VerneLuis Pires Outils Matériel (hardware) : –Station de travail PAO (CPU, mémoire, CG, …) –Écran graphique –Clavier, Souris –Tablette graphique –Imprimante –Scanner –Appareil photo numérique

Université de Picardie Jules VerneLuis Pires Outils Caractéristiques des écrans LCD : –Définition : nombre de pixels visibles –Dimensions : diagonale en pouces (2,54 cm/pouce) –Angle de vision horizontal et vertical avec un contraste supérieur à 10:1 (~ 180°) –Contraste : rapport de luminosité entre un pixel blanc et un pixel noir (~ 100 cd/m2) –Luminosité : 250 à 320 cd/m2 –Temps de réponse : délai du passage d’un pixel par les états blanc > noir > blanc (2 à 16ms)

Université de Picardie Jules VerneLuis Pires Outils Caractéristiques des écrans LCD (valeurs à titre indicatif, source : Wikipédia, mai 2008)

Université de Picardie Jules VerneLuis Pires Outils Qualité du capteur CCD d’un appareil photo numérique (Charge Couple Device) : –Résolution –Sensibilité –Dynamique de l’image –Rapidité (bonne réponse en fonction du temps) –Qualité du traitement d’image

Université de Picardie Jules VerneLuis Pires Outils Logiciels (software) : –Photoshop, Illustrator –PaintShop Pro, CorelDraw –Gimp, Inkscape –Paint –OmniPagePro (OCR) –Acrobat, PDFCreator

Université de Picardie Jules VerneLuis Pires 6. Applications

Université de Picardie Jules VerneLuis Pires Applications Graphisme / impression (PAO) Affiche Plaquette Annonce Graphisme / affichage sur un écran Site web CD ROM, DVD ROM Podcast 100

Université de Picardie Jules VerneLuis Pires Applications Impression d’une image optimisée pour un affichage à l’écran : 500 x 500 pixels

Université de Picardie Jules VerneLuis Pires Applications Affichage à l’écran d’une image optimisée pour l’impression :

Université de Picardie Jules VerneLuis Pires 7. Optimisation pour le web

Université de Picardie Jules VerneLuis Pires Aspects matériels & logiciels Type d’appareil (PC, MAC, tablette, mobile,...) Performances de l’appareil Qualité de la connexion Internet Système d’exploitation (OS) Type de navigateur web et version Modules externes et version (plugins)

Université de Picardie Jules VerneLuis Pires Aspects matériels & logiciels Critères liés à l’affichage côté client : Réglage de la résolution de l’écran Nombre de couleurs (qualité couleur) Taille des polices Contraste

Université de Picardie Jules VerneLuis Pires Ergonomie, accessibilité Texte lisible / couleurs de fond Faciliter la navigation (menus) Éviter d’utiliser trop de fenêtres (popup) Éviter le défilement horizontal Eviter l’emploi excessif d’animations Cohérence visuelle

Université de Picardie Jules VerneLuis Pires Charte graphique Finalité : affirmer l’identité visuelle Assurer la cohérence visuelle des documents Définition d’un gabarit : logo visuel polices couleurs positionnement

Université de Picardie Jules VerneLuis Pires 8. Aspects juridiques

Université de Picardie Jules VerneLuis Pires Droit d’auteur Concerne toute les prises de vue Toutes les images publiées dans les sites web sont par défaut soumises aux droits d’auteur Marquages, tatouages numériques (watermarks) visibles et/ou invisibles Métadonnées –Auteur –Titre –Date de création –Description –...

Université de Picardie Jules VerneLuis Pires Droit à l’image Droit de toute personne physique à disposer de son image Opposition à l’utilisation de son image dans le cadre du respect de la vie privée (limites de la liberté d’expression) Il diffère d’un pays à l’autre La prise de vue est autorisée et protégée par le droit d’auteur

Université de Picardie Jules VerneLuis Pires 9. Visite guidé

Université de Picardie Jules VerneLuis Pires Ouverture et acquisition d’images

Université de Picardie Jules VerneLuis Pires Description de l’environnement de travail Fenêtre principale Barre d’outils Calques, Historique, Options Scripts (macros), Raccourcis clavier

Université de Picardie Jules VerneLuis Pires Description de l ’environnement de travail Barre d’outils Fenêtre de traitement Barre de menus Informations Calques Historique

Université de Picardie Jules VerneLuis Pires Description des outils de retouche Les outils de sélection, Recadrage Outils de dessin et de tracé Texte Tranche (web)

Université de Picardie Jules VerneLuis Pires Description des outils de retouche Déplacement Baguette magique Tranche Crayon Forme d’historique Pot de peinture Texte Trait Pipette Loupe Rectangle de sélection Lasso polygonal Recadrage Aérographe Tampon de duplication Gomme Sélection d’élément de tracé Plume Annotations Main DoigtDensité Couleur d’arrière plan Couleur de premier plan

Université de Picardie Jules VerneLuis Pires Manipulations sur les images Modes de couleurs Réglages luminosité, contraste, etc… Filtres Taille d’une image, résolution (destinée au web ou à l’impression) Création d’images pour Internet Quelques mots sur Adobe Image Ready

Université de Picardie Jules VerneLuis Pires Enregistrement et formats d’enregistrement des images Enregistrer, enregistrer une copie Enregistrer pour le web Quelques formats usuels

Université de Picardie Jules VerneLuis Pires C’est fini… Merci pour votre attention !