Vincent Courboulay Décembre 2003

Slides:



Advertisements
Présentations similaires
REPRESENTATION VISUELLE DU MONDE
Advertisements

Exposé SI28 Photoshop CS04, Séance 1 Thibault Seillier – Lenoir Cécile
Les formats d’images.
Transition image classique image numérique
Le système visuel humain
La lumière et les couleurs (Chap4)
Eléments de multimédia
L’encodage des images informatiques
La photo numérique S. Laurent – Actic Hautil – 2004 /2005.
Intégration des images
LOGOS_w Imagerie La palette des icônes. Le groupe dicônes situé au dessus des images du patient permet dintervenir sur limage affichée et active.
Le diaphragme (photographie)
Manipuler les images numériques : un peu de précision Quest-ce quune image numérique ? Une histoire de pixelsQuest-ce quune image.
IMAGES NUMERIQUES Qu’est-ce qu’une image numérique ?
Formation aux techniques de la couleur
Les Images Couleur Cours 4
1 Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques David Crunelle – ESCG – Les Formats Graphiques.
Formation au Numérique… …… savoir prendre de bonnes Résolutions !
Le codage des images Une image peut-être aquise (appareil photo, scanner) ou créée avec un programme Puis elle peut être traitée : filtres, retouches...
1. LIER ANATOMIE ET COULEURS PRIMAIRES
Les Ambiances lumineuses
La mise au point et la profondeur de champ
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.
La vision de la couleur.
Représentation numérique de l’information
Photoshop3 Caméra Modifier les couleurs Revenir sur les calques et leur utilisation. Exercice sur lintégration des images de diverses façons Enregistrement,
Nicolas Holzschuch iMAGIS-GRAVIR/IMAG
LA VISION ET LA REPRODUCTION DES COULEURS
Introduction au multimédia
IFT Informatique multimédia Cours 3 Mise au point sur la mémoire vidéo Logiciel de traitement de limage Les formats dimages et la compression Présentation.
Design dun système de vision embarqué. Application:
Photoshop3 Revenir sur les calques et leur utilisation. Exercice sur lintégration des images et leur intégration de diverses façons Enregistrement, exportation.
Mars 2013 Grégory Petit
Les formats Débutant – Semaine 4.
Les images numériques COM 1560 Printemps 2005.
L ’acquisition d ’images
SCHNEIDER Laurent NOYER Vincent TEISSIE Alexis
Photoshop3 Calques Filtres Correction des couleurs
Codage des couleurs et formats de fichiers
Caractéristiques image numérique
AGIR : Défis du XXIème Siècle.
Les formats d’images novembre 2005
Les images numériques IEN Cluses – 19 mars Plan Les pistes pédagogiques Expériences de pratiques personnelles dans sa classe Aspects techniques.
Granulométrie de l’image
TP2 synthèse additive, synthèse soustractive
Images Matrice de points (pixels) Caractérisée par : Poids en octets
Couleurs et images.
Chapitre 1: Les couleurs
L’image numérique : concepts et principes de traitement
Acquisition, Traitement,
Principes, usages et conception
DPI / Pixels / Compression
DESIGN GRAPHIQUE A. DAAIF ENSET Université Hassan II
Vision humaine Propriétés de la vision
Les outils graphiques Permet de traiter ces dessin Manipuler des formes, des photos Modifier les vidéo 3 D.
ATELIER INFORMATIQUE Le travail avec les images. Réduire le poids des images Pourquoi réduire la taille (poids) de images ? - Pour adapter la taille de.
Adobe Photoshop CS2 Morand-Pinçon David Michaut Charlotte SI28 – Ecriture intéractive et multimédia R R.
Présentation du Logiciel Photoshop 6.0
Image Ready SI28 _ P09 MACHIN Alexandre BRUTEL Aline.
Bloc 1 - UE 5 - Technologies de l’information et de la communication TIC Bachelier en immobilier T. SOUMAGNE.
Photoshop 6.0 Aurélie KNOSP Ye LU.
Initiation à Photoshop 1 Victoria Viglione/ Grégoire Piffault SI28 – P2007.
L’image Quelques repères sur l’image Quelques repères sur l’image.
SI 28 - Présentation Image Ready Aurélie Letenoux GSU 4.
Elise Pierrot, GSU04 ImageReady, traitement d’image pour le WEB Présentation SI28.
LAMOUR Mathieu Présentation du logiciel SI28 Automne 2004.
Garcia Patrick - Moutel Mathieu. SOMMAIRE Introduction à Photoshop Les différents formats d’images L’espace de travail Les calques Les filtres.
Adobe ImageReady Lamare Maxime SI28. - Présentation - Optimisation d’image - Outils tranche - Outils carte image - Création d’animations PLAN.
Traitement des images par les logiciels libres et/ou gratuits Thierry JEANDEL Janvier 2008.
Structure de l’œil et rôle de la rétine dans la vision des couleurs.
Transcription de la présentation:

Vincent Courboulay Décembre 2003 Données multimédia Vincent Courboulay Décembre 2003

Sommaire L’image classique La couleur L’image numérique Formats Numérisation

Résumé du cours

Elaborer une image : volonté de proposer une entité observable par l’œil humain. maillon final : notre système visuel.  Le connaître pour utiliser ses faiblesses et de ses capacités.

Le système visuel humain

Image, Vision et Couleur L’œil est un organe complexe dont la fonction optique de l’oeil est de focaliser un stimulus de couleur sur sa partie photosensible, la rétine. L’œil ne sert qu’à voir pas à regarder !!!!

Image, Vision et Couleur Il se compose principalement de : La cornée L’iris Le cristallin Le corps vitré

Image, Vision et Couleur L’oeil

Image, Vision et Couleur

Image, Vision et Couleur L’œil est sensible à la forme et à la couleur La rétine contient deux types de cellules photosensibles : les cônes et les bâtonnets. Les bâtonnets permettent la vision nocturne Les cônes permettent la vision diurne

Image, Vision et Couleur Cônes et bâtonnets  La rétine possède 4 à 7 millions de cônes pour 110 à 125 millions de bâtonnets. La fovea se distingue par une concentration maximale de cônes pour une très faible concentration en bâtonnets. Il existe même une zone au centre de la fovea dans laquelle il n’y a que des cônes, la fovea.

Image, Vision et Couleur Peu nombreux, les cônes sont responsables de la vision haute résolution. A cet effet leur densité est importante dans la fovéa. Moins sensibles à la lumière que les bâtonnets, ils peuvent s’adapter très rapidement à des changements d’intensité.

Image, Vision et Couleur Les bâtonnets sont très nombreux et plus sensibles à la lumière que les cônes. Leur temps d’adaptation aux changements de conditions est par contre beaucoup plus long. Avec un seul type de pigment, ils ne peuvent distinguer les couleurs. De par leur répartition hors de la fovéa, ils sont responsables de notre vision périphérique.

Image, Vision et Couleur Les cônes sont de trois types : les cônes S sensibles à des longueurs d’onde courtes (short), les cônes M sensibles à des longueurs d’onde moyennes (medium) et les cônes L sensibles à des longueurs d’onde longues (long). Cône

Image, Vision et Couleur Le signal produit par l’absorption d’un photon par un cône est environ 100 fois plus faible que par un bâtonnet. La réponse d’un cône est 4 fois plus rapide que celle d’un bâtonnet. Notre système visuel fait ainsi un compromis entre sensibilité et résolution temporelle. bâtonnet

Image, Vision et Couleur Une cellule qui reçoit des signaux de plusieurs cellules les combine en un nouveau message qui tient compte de chaque signal d’entrée. Mais où vont-ils, ces messages ?

Image, Vision et Couleur Champ réceptif : il s’agit de la région de la rétine à partir de laquelle on peut influencer un neurone. Lumière Allons donc voir du coté des neurones…

Image, Vision et Couleur Les chemins du système visuel

Image, Vision et Couleur Cortex Visuel 1010 neurones qui possèdent un arrangement hiérarchique bien défini Répertoriés comme simples, complexes, hypercomplexes et hypercomplexes d’ordre élevé, avec des propriétés définies selon leur champ réceptif.

Image, Vision et Couleur

Image, Vision et Couleur 3 types de cellules : S (simple), C (complexe) et H (hypercomplexe) Sensibles à l’orientation (toutes) Sensibles à la position (S, H) H sensibles à des caractéristiques particulières

Image, Vision et Couleur Quand un stimulus rouge est regardé fixement, les cellules signalant la présence d’un stimulus rouge finissent par réduire leur activité. Ainsi, quand on regarde ensuite l'écran gris, ces cellules seront peu actives. Cependant, parce qu'ils codent normalement par leur activité la présence de stimuli rouges ou l'absence de verts, la réduction de leur activité est interprétée par le cerveau comme la présence de vert.

Image, Vision et Couleur

Image, Vision et Couleur Intéressons nous maintenant à la couleur… La Couleur tient un grand rôle dans l’interprétation que nous faisons d’une image.

Image, Vision et Couleur

Image, Vision et Couleur Longueur d’onde (nm) Couleur 380-450 Violet 450-490 Bleue 490-560 Vert 560-590 Jaune 590-640 Orange 640-730 rouge

Image, Vision et Couleur Au sein d’une même espèce, la couleur est une notion subjective, qui diffère donc d’un individu à l’autre. Il n’existe probablement pas 2 personnes ayant la même perception (il est d’ailleurs impossible d’imaginer ce que voit un autre observateur) On pourra toujours définir un observateur standard, un observateur de référence parfaitement connu.

Image, Vision et Couleur La couleur Une branche complète du traitement d’images Phénomène physique complexe La couleur résulte de l’interprétation d’ondes en information visuelle La couleur est subjective

Image, Vision et Couleur La perception humaine de la couleur est donc une réaction subjective qui peut être caractérisée en termes de Luminosité, Teinte, Saturation.

Image, Vision et Couleur La luminosité correspond à une sensation traduite par des vocables comme clair, foncé, lumineux, sombre… Elle caractérise le niveau lumineux d’un stimulus de couleur. Le concept de luminosité a un sens assez large et beaucoup de grandeurs physiques permettent de la quantifier (intensité, éclairement, luminance, clarté, ... )

Image, Vision et Couleur La teinte ou tonalité chromatique correspond aux dénominations telles que rouge, vert, bleu. Elle correspond à la longueur d’onde dominante d’une couleur, c’est-à-dire pour laquelle l’énergie correspondante est la plus élevée. Le blanc, le noir ou les gris sont dites neutres ou achromatiques.

Image, Vision et Couleur La saturation est une grandeur estimant le niveau de coloration d’une teinte indépendamment de la luminosité. Elle représente la pureté de la couleur perçue comme vive, pâle, terne, ...

Les modèles de représentation de la couleur Modèle RVB

Les modèles de représentation de la couleur

Les modèles de représentation de la couleur Modèle RVB : les couleurs RVB s'associent pour créer du blanc, on les appelle également couleurs additives Les couleurs additives sont utilisées pour l'éclairage, la vidéo et les moniteurs Rouge +Vert => Jaune Rouge + Bleu => Magenta Bleu + Vert => Cyan Rouge +Vert +Bleu => Blanc

Les modèles de représentation de la couleur Modèle CMJN

Les modèles de représentation de la couleur Modèle CMJN repose sur la qualité d'absorption de la lumière de l'encre imprimée sur du papier. Jaune + Magenta => Rouge Jaune + Cyan => Vert Magenta + Cyan => Bleu Jaune + Magenta + Cyan => Noir

Les modèles de représentation de la couleur Modèle TSL : Spécifie chaque couleur en termes de teinte (Hue), saturation, intensité(Luminance). Spectre visible Teinte Luminosité Saturation

Les modèles de représentation de la couleur Modèle TSL : Teinte : C'est la longueur d'onde de la lumière réfléchie, ou transmise par un objet. Correspond à son emplacement sur la roue chromatique, dans un angle compris entre 0° et 360°. Le spectre circulaire part du rouge, passe par le vert et le bleu pour revenir au rouge. Saturation : Indique la pureté ou intensité de la couleur (des couleurs grisées - 0 % aux couleurs vives - 100 %). Intensité : Indique la variation d'intensité lumineuse d'une couleur, (entre 0 % - noir et 100 % - blanc. )

Les modèles de représentation de la couleur Modèle Lab :La couleur L*a*b est conçue pour être indépendante du périphérique

Les modèles de représentation de la couleur La couleur L*a*b est constituée d'une composante de luminance ou luminosité (L) et de deux composantes chromatiques : la composante a (de vert à rouge) et la composante b (de bleu à jaune). A. Luminance=100 (blanc) B. Composante de vert à rouge C. Composant de bleu à jaune D. Luminance=0 (noir)

La roue chromatique Vous pouvez réduire la quantité d'une couleur donnée dans une image en augmentant la quantité de son opposé sur la roue chromatique, et vice-versa. Vous pouvez augmenter et diminuer la quantité d'une couleur en réglant les deux couleurs adjacentes sur la roue chromatique, voire en réglant les deux couleurs adjacentes à son opposé

La roue chromatique A. Vert B. Jaune C. Rouge D. Magenta E. Bleu F. Cyan

Transition image classique image numérique

Image Numérique Qu’est ce qu’une image numérique ? Image : représentation planaire d’une scène ou d’un objet situé dans un espace à 3 dimensions (+ 1 dimension temporelle).

L’image numérique Une image numérique est composée d'unités élémentaires appelé pixel (picture element) Chaque pixel représentent une portion de l'image.

La résolution d’une image numérique La résolution d'une image est définie par un nombre de pixels par unité de longueur de la structure à numériser (en dpi (dots per inches) ou ppp (points par pouce)). Cette notion est distincte de la résolution du format de l'image qui correspond au nombre de pixels qui compose l'image en hauteur et en largeur (512 pixels par 512 pixels par exemple)).

Résolution du format 80 pixels par 75 pixels 40 pixels par 26 pixels

La résolution d’une image numérique Un image de 1*1 pouce scannée à 100 dpi aura une taille x,y de 100 pixels sur 100 pixels (1*100)*(1*100)= 100 pixels sur 100 pixels. (un pouce=2,54 centimètres) 16 pixels

La dynamique d'une image numérique Elle correspond à l'étendu de la gamme de couleurs ou de niveaux de gris que peuvent prendre les pixels Notion liée au nombre d'octets utilisés pour stocker l'information teintes de gris ou couleurs Le nombre de bit par pixel est aussi appelé profondeur de l’image

La dynamique d'une image numérique 300 par 208 pixels, changement du nombre de valeurs d'intensités possibles 256 niveaux d'intensité 8 niveaux d'intensité

La dynamique d'une image numérique Les images en vraies couleurs (24 bits)  Chaque pixels peut prendre une valeur dans le RVB comprise entre 0 et 255 (soit 256*256*256 possibilités= 16 millions de possibilités). L'information couleur de chaque pixels est donc codée par 3 octets, ce qui fait des images en vraies couleurs des images très "lourdes".

Images bitmaps et images vectorielles Images matricielles (une image numérique est en fait une matrice (un tableau) de pixels), le format initial pour se style de représentation est le format bitmap. Images vectorielles, dont le principe est de représenter, autant que cela est possible de le faire, les données de l'images par des formes géométriques qui vont pouvoir être décrites d'un point de vue mathématique.

Images bitmaps et images vectorielles

Le format bitmap - Avantages Le mode de codage des images bitmap (24 bits, codage RBG)les rend adaptées au fonctionnement des principaux périphériques, Elles conviennent fort bien aux images complexes. Elles se laissent manipuler et traiter par des opérations techniques "naturelles". Elles permettent des opérations comme l'anti-aliasing (suppression du crénelage produit à la rencontre de deux couleurs éloignées), le rehaussement des contours, les modifications locales de l'image (contraste, colorimétrie, effets, filtres, etc.). Le mode de codage point par point étant relativement universel. La structure du fichier est telle que des dégradations minimes des données -mais non pas de l'en tête- ne le rendent pas nécessairement inutilisable.

Le format bitmap - Désavantages Les images bitmap ont une résolution fixe. Elles supportent mal les opérations de redimensionnement, réduction ou agrandissement. Les deux opérations se traduisent par une perte d'information. Après une réduction, effets d'escaliers, après un aggrandissement chaque point se voit grossi. Les images bitmap sont « lourdes ».

Le format vectoriel - Avantages L'image numérique est réellement indépendante du périphérique. Toutes les modifications spatiales de l'image sont aisées et n'occasionnent aucune perte d'information. L'image vectorielle est particulièrement adaptée aux représentations schématiques et stylisés. Un fichier vectoriel est bien plus compact qu'un fichier en mode point. Sa taille varie en fonction de la complexité de l'image, mais pas en fonction de la résolution demandée.

Le format vectoriel - Désavantages Une image vectorielle ne peut coder une image analogique. Le travail sur des objets graphiques isolés qu'il faut ensuite associer ou grouper est peu familier au graphiste ou à l'illustrateur. Certaines manipulations telles que les modifications de couleurs sont difficiles sur une zone d'un objet, sur un objet simple ou sur un groupe d'objets. Un fichier vectoriel est plus fragile qu'un fichier bitmap dont l'en-tête surtout doit être intacte. Chaque format de fichier vectoriel possédant ses propres attributs, la compatibilité entre les formats est difficile.

Les palettes de couleurs Les images à 256 couleurs (8 bits) : Elle utilise une palette de couleur "attachée" à l'image. Les pixels qui portent le numéro 166 dans le fichier image seront associés lors de l'affichage à la couleur R:155, V44, B:62

Les palettes de couleurs Il est clair, que si la palette associée à l'image change, la visualisation de l'image change Les pixels qui portent le numéro 166 dans le fichier image seront associés lors de l'affichage à la couleur R:51, V102, B:51

Les palettes de couleurs les images en niveaux de gris Elles renferment 256 teintes de gris. Par convention la valeur zéro représente le noir (intensité lumineuse nulle) et la valeur 255 le blanc (intensité lumineuse maximale). Valeurs des niveaux de gris et teintes de gris correspondantes 0....20....40....50....80....100....120....140....160....180....200....220....240....255

La transparence Pour la transparence, il s'agit d'attribuer à une couleur de la palette une absence de couleur qui ne sera pas affichée lors de la lecture des données de l'image. Pas de  , avec 

L’entrelaçage C’est un mode d'affichage a été mis au point spécifiquement pour une utilisation sur le Web. Il permet très rapidement d'avoir une idée (même imprécise) de l'image à afficher.

Les formats d’images

Les formats d’images BMP (bitmap) DFX (autocad) EPS (Encapsulated PostScript) GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group) Photo CD PCX PICT PS (PostScript) TIFF (Tagged Image File Format) WPG (WordPerfect) …

BitMap Ce format créé par Microsoft et IBM pour son système d'exploitation, a été conçu dans le but d'être affiché sur n'importe quel display indépendamment de la méthode choisie. Le principe de stockage est le suivant, chaque pixel est stocké avec son code couleur, la formule est très élémentaire. Cependant, il faut autant d'espace mémoire pour stocker une image 3D multitexturée qu'un gros plan de la banquise - une image toute blanche ! Ce format permet néanmoins de conserver l'image numérisée sans perte de qualité.

GIF (graphic interchange File) Ce format a été créé en 1987 par Compuserve pour que les utilisateurs puissent s'échanger des images de façon efficace et moins onéreuse. Ce format est indépendant du système utilisé, et peut enregistrer des images d'une résolution maximale de 16000x16000 pixels avec une palette de 256 couleurs parmi 16,7 millions. Il autorise une bonne compression et une décompression très rapide grâce à la méthode LZW. Cette compression est plus efficace pour les dessins et graphiques que pour les photographies numériques Format PROPRIETAIRE €€€€

Format vectoriel Les formats vectoriels permettent de créer des images qui ne sont faites qu'a partir de formes géométriques. Pour un disque unicolore on n'enregistrera pas tous les points qui le compose mais ses caractéristiques, c'est à dire son centre, son diamètre et sa couleur. Par exemple, le format Flash de Macromedia ® est de plus en plus utilisé sur les pages web et devient une obligation chez les concepteurs multimédia. Les formats .AI (Adobe Illustrator) et .CDR (Corel Draw) sont quant à eux utilisés dans le domaine de la Publication Assistée par Ordinateur.

C’est coton je vous préviens… Compression JPEG C’est coton je vous préviens…

La compression JPG JPEG (Joint Photographic Experts Group). Cette norme comprend des spécifications pour les codages conservateurs et non conservateurs (l’image est modifiée pendant le cycle de compression mais cette modification doit rester imperceptible pour l’œil) de l’image.

La compression JPG La compression est réalisée en réduisant toutes les formes possibles de redondance qu’une image peut présenter : - Redondance spatiale : tous les pixels sont identiques à l’intérieur d’une plage de l’image uniforme. Il suffit d’en coder un pour caractériser la plage considérée. La technique de la Transformée en Cosinus Discrète (DCT) utilisée dans l’algorithme JPEG, met en évidence cette redondance spatiale à l’intérieur de chaque image. - Redondance statistique : certaines données se répètent beaucoup plus fréquemment que d’autres. La compression sera réalisée en attribuant des codes d’autant plus courts que la fréquence est élevée. - Redondance subjective, mise à profit dans la compression non conservatrice : elle découle des imperfections de l‘œil humain. Des pixels présentant des caractéristiques assez proches pour être perçus de manière identique peuvent être traités comme des pixels identiques.

La compression JPG On peut noter que l’œil est beaucoup plus sensible aux variations d’intensité lumineuse (luminance) qu‘à celles de la couleur (chrominance)  Les informations sur la couleur peuvent donc être davantage compressées que celles sur la luminance. De même, des pixels trop proches pour être distingués par l‘œil peuvent être regroupés (il suffit de 520 lignes sur un téléviseur pour donner une image assez correcte).

La compression JPG Principes de la compression au format JPEG - La qualité de l’image est paramétrable. Les données sont d’autant plus compressées que la qualité exigée est faible. - La norme JPEG n’impose pas de format de fichier. Le processus de compression est applicable en principe à toutes les sources d’images numérisées. Les spécifications n’indiquent pas la dimension de l’image et le nombre de pixels, ni le type de codage des données représentant la couleur. La norme définit des plans mémoires correspondant aux différents plans de la couleur.

A vos marques, prêt, partez !! La transformation affine dans l'espace couleur : [R G B] -> [Y Cb Cr] Y : luminance Cb, Cr : coefficients de chrominance (saturation et nuance) Echantillonnage Décalage de niveaux La transformée discrète en cosinus (TDC, DCT Discrete Cosine Transform) Le réordonnancement en zig-zag des 64 coefficients TDC Les coefficients de la transformée sont ensuite quantifiés à l’aide d‘une table de 64 éléments définissant les pas de quantification. Cette table permet de choisir un pas de quantification important pour certaines composantes jugées peu significatives visuellement. On introduit ainsi un critère perceptif qui peut être rendu dépendant des caractéristiques de l’image et de l’application (taille du document). Le codage du parcours en longueur des zéros (RLC Run Length Coding) Codage de Huffman

La compression JPG

L’acquisition d’images numériques

L’acquisition d’images numériques Le scanner : périphérique d'acquisition d'images le plus répandu Les scanneurs à plat Les scanneurs à défilement sont généralement intégrés dans des périphériques multifonctions, Les scanneurs à main

L’acquisition d’images numériques Le scanner et ses caractéristiques Définition ou résolution optique Résolution interpolée Profondeur des couleurs Plage de densité Temps de numérisation

Le scanner

L’acquisition d’images numériques L’appareil photo numérique La qualité dépend de plusieurs facteurs : Comme pour un appareil traditionnel : l'optique (objectif), la mécanique (boîtier, déclencheur, diaphragme, etc.) et l'électronique permettant de piloter les automatismes. La qualité du capteur et du dispositif de traitement de l'image numérique

L’acquisition d’images numériques L’écran de visualisation L’objectif Le zoom Le capteur La sauvegarde La compression La mémoire Visualisation et transfert (connexion série, usb, IEEE)

Les images pour Internet

Les images pour Internet Le problème : Qualité : Pour qu'une image soit agréable à regarder, il faut souvent qu'elle s'affiche avec des couleurs très variées. Taille Cependant plus une image exploite une palette de couleurs large, plus la taille du fichier est grande. Or sur internet, vu la surcharge fréquente, il faut limiter autant que possible la taille des fichiers. On a donc un compromis à trouver entre qualité et taille.

Les images pour Internet GIF : Graphics Interchange Format (soumis à des droits d’utilisation). Le nombre de couleurs est limité à 256, contrairement au JPG et au PNG. Il permet de générer des animations et gère la transparence et l’animation. Vache.gif (21 Ko)

Les images pour Internet JPG ou JPEG :Join Photographic Expert Group, est un format photographique d'image. Jusqu'à un facteur de compression de 50%, on ne remarque pas de dégradation gênante de l'image. En revanche, à 80%, la dégradation de l'image est visible (effet de pixelisation et de mélange des couleurs). Une image au format JPG ne peut être ni animée ni transparente.

Les images pour Internet Bonne qualité (36Ko) Qualité faible (14 Ko)

Les images pour Internet PNG : Portable Network Graphic. Ce format peut aussi bien s'utiliser pour des photos que pour des graphiques. Format libre de droit créé par W3C, destiné à remplacer le format GIF, soumis quant à lui à des droits d'utilisation. (www.w3.org/graphics/png). Le PNG utilise une compression non dégradante, comme le GIF, accepte la transparence, et peut être animé et entrelacé. Il combine donc les avantages du JPG et du GIF avec tout de même des différences de poids de l'image obtenue. Le format PNG est non supporté par les navigateurs de niveau 3 et inférieurs

Les images pour Internet Image png (120 Ko)

Les images pour Internet GIF JPEG A choisir si Si il y a du texte dans l'image Si il y a des surfaces de même couleur (logos, icônes, schémas,...) Pour les photos Si il y a des dégradés fins. Si on veut compresser très fort une image. A éviter si Rarement mauvais. C'est le format à employer ne cas de doute. Si l'image doit être redimensionnée, c'est lamentable; particulièrement pour des images tramées (Dither) Pas très bon pour les photos Si il y a du texte : les lettres perdent de leur piqué et sont mal lisibles. Peu intéressant si l'image est en 256, et à fortiori en 16 ou 4 couleurs. Remarques : max 256 couleurs. La compression se fait sur les zones de même couleur (ou trame), et sur la réduction du nombre de couleurs. Attention, si on trame (diffusion) pour réduire le nombre de couleurs, on ne peut plus guère compresser puisqu'il n'y a plus de pixels successifs de même couleur. Pour des captures d'écran par exemple, on peut envisager de passer l'image en gris parfois et de réduire à 4 niveaux. Forcément en millions de couleurs. Inutile de se priver sur ce plan-là. Pour paramétrer le facteur de compression, observer les bords très contrastés : des sortes d'écho du bord sont un signe qu'on a été trop loin; on voit aussi apparaître des gros carrés dans les dégradés.

Les images pour Internet Pour réduire la taille d'un GIF: Réduire le nombre de couleurs. Souvent le rendu gagne à activer la conversion avec pixellisation (ou tramage stochastique ou diffusion), mais la compression est alors moins efficace. Si on n'active pas cette fonction des zones de couleur (effet de lèpre) disgracieuses apparaissent, mais la compression est plus forte et l'image plus légère

Les images pour Internet Pour réduire la taille d'un JPEG: Réduire le facteur de qualité : On choisit le degré de compression : plus la compression est forte et l'image légère plus la qualité devient discutable en particulier dans les zones de fort contraste, les bords, etc.

Les images pour Internet En Résumé : Choisir le JPEG pour les photos : une valeur de 30% est assez typique. Pour les GIF, limiter le nombre de couleurs au minimum nécessaire. 16 suffit parfois.

Prévisualisation d'une image dans un navigateur Pour visualiser une image optimisée dans un navigateur : (Photoshop) Choisissez Fichier -> Enregistrer pour le Web, puis sélectionnez un navigateur à partir du bouton Aperçu dans situé en bas à droite de la fenêtre Enregistrer pour le Web.

Fin