PRINCIPES D’INTEGRATION IMAGE NUMERIQUE : CARACTERISTIQUES ET PRINCIPES D’INTEGRATION

1. IMAGES NUMERIQUES

IMAGES NUMERIQUES LE CODAGE DE LA COULEUR Synthèse additive (couleurs écrans) Système de faisceaux qui mélangent les trois couleurs primaires de l’écran : ROUGE , VERT, BLEU. L'addition de ces trois couleurs produit du blanc NB : Par défaut l’écran est noir. Cela ne consomme donc pas d’énergie.

IMAGES NUMERIQUES Synthèse soustractive (couleurs imprimerie) Addition des couleurs CYAN (bleu), MAGENTA (pourpre), JAUNE et NOIR. On ajoute du noir car l’addition C+M+J ne produit pas du noir 100% NB : La différence entre un document RVB et CMJN est appréciable à l’œil nu.

IMAGES NUMERIQUES 2 procédés de synthèse de la couleur : additive à gauche, soustractive à droite. L'un produit du blanc, l'autre du noir Les zones où deux couleurs se recouvrent produisent les couleurs secondaires

LE PIXEL (PICTURE ELEMENT) IMAGES NUMERIQUES LE PIXEL (PICTURE ELEMENT) « L’atome de l’image numérique ». Pour l’ordinateur le pixel est une valeur numérique : 0 = pixel éteint = noir 1 = pixel allumé = blanc 00 -> noir 10 -> noir 33% 01 -> noir 66% 11 -> blanc Codage sur 8bits / couche (R V B) -> 256 nuances par couches 8 Bits rouge 8 Bits verts 256 X 256 X 256 -> 16,7M couleurs. 8 Bits bleus Codage 1 bit (codage sur 1 chiffre) Codage 2 bits (4 couleurs – codage sur 2 chiffres) NB : Bit = binary digit.

DEFINITION ET POIDS DE L’IMAGE IMAGES NUMERIQUES DEFINITION ET POIDS DE L’IMAGE La taille ou définition : nb de pixels en largeur X par le nb de pixels en hauteur. Ex: 1024 X 768 Le poids de l’image : La place occupée par l'image sur le disque dur 1Ko = 1024 Octet 1Mo = 1024 Ko 1 Octet= 8bits 1 pixel = 3X8bits (24bits) 1 Pixel = 3 Octets

IMAGES NUMERIQUES RESOLUTION DE L’IMAGE Une mosaïque de points Nombre de pixels de l'image par unité de longueur. Ex : pixels par pouces / pixels par centimètres. DPI (dot per inch) Inch = « pouce » en français = 2,54 cm + DPI est élevé + qualité d’impression élevée Convention pour le web : 72 DPI NB : Pour l’impression on préconise généralement 300DPI minimum.

DIFFERENTES RESOLUTIONS

IMAGES NUMERIQUES REECHANTILLONAGE « Processus par lequel, les données de l’image analogique (photos, documents), sont convertis en données numériques » .

2. FORMATS D’IMAGES ET COMPRESSIONS

FORMATS D’ENREGISTREMENT ET COMPRESSION FORMAT D’IMAGES ET COMPRESSIONS FORMATS D’ENREGISTREMENT ET COMPRESSION Réduire le poids de l’image => Chargement plus rapide Format adapté à l’intégration => Images transparentes, effets d’ombrages Compression Format Images Webs .jpeg .gif .png (8 & 24 bits) .svg 72 DPI Choix d’un format (transparent ou non) Détérioration de la qualité de l’image Gain de poids (chargement + rapide)

FORMAT D’IMAGES ET COMPRESSIONS .jpg JPG = « Joint Photographic Group » Standard Web & papier. Principes de compression : - Rapprochement des pixels contigus pour créer une seule valeur de code. Rapport : Qualité image / poids Utilisation : Photos avec beaucoup de couleurs Avantages / inconvénients : + Léger pour photos & images grandes tailles - Pas de transparence NB : A chaque fois que vous réenregistrez votre image en JPEG sur l'ordinateur après une retouche par exemple, vous la dégradez à nouveau.

FORMAT D’IMAGES ET COMPRESSIONS .gif GIF = « Graphics Interchange Formats » -> format délaissé Principes de compression : - Compression sur 256 couleurs -> 8bits Utilisation : Pictos transparents / .gif animés Avantages / inconvénients : + Transparence + Effets de couleurs (quadrichromie / bichromie) - Lourd pour des photos avec bcp de couleurs - Pas d’opacité (ombrage)

FORMAT D’IMAGES ET COMPRESSIONS .png - Aucune compression. PNG8 = GIF optimisé (plus léger) / équivalent .gif PNG 24 = « Portable Network Graphics » Principes de compression : - Aucune compression. Utilisation : - Images dont on veut conserver opacité et ombrage. Avantages / inconvénients : + Qualité + Opacité & tranparence - Lourd (pour de grandes images)

FORMAT D’IMAGES ET COMPRESSIONS .svg Scalable Vector Graphic - Construction d’une image via un système de coordonnées en code - Principe des courbes de Béziers (système de vecteur et de points d’encrages) Principes de compression : - Aucune compression. Utilisation : - Logo / dessins vectoriels Avantages / inconvénients : + Léger (code seulement) + Agrandissement infini - Inutilisable pour des photos (composition trop complexe)

3. PRINCIPES DE DECOUPES ET D’INTEGRATIONS

PRINCIPES DE DECOUPES ET D’INTEGRATIONS DECOUPE DES IMAGES Découper les différentes images qui composent l’interface de l’application Mode colorimétrique : RVB Résolution : 72DPI Unité de mesure : Pixel Règles et repères de coupe Outil « crop » pour couper l’image Enregistrer pour le web

PRINCIPES DE DECOUPES ET D’INTEGRATIONS STRATEGIE DE DECOUPE Distinguer : Les images de fonds : Propriété CSS « background » Les contenus « images » : balise <img> Par défaut, les images de fonds se positionnent en dessous des contenus images ( <img/> ). Connaître : Les comportements CSS d’intégration des fonds : Ex: principes de répétitions, adaptation, couleurs, positionnement… Anticiper : Ce qui peut être produit en CSS : les effets (ombrage/bords arrondis/transparence)… Les contraintes de positionnement et de superposition des visuels L’adaptation des contenus « textes et images » à l’interface

PRINCIPES DE DECOUPES ET D’INTEGRATIONS CHARGEMENT DES IMAGES Poids d’une page Web (code) = 10-20ko - Chargement des images externes = 200ko/600ko Il existe un temps de latence entre la requête et la réponse du serveur. Temps de chargement = nombre de fichiers à charger Quelques chiffres : - Fond de page -> max 300 ko - Photo -> max 100 ko - Pictos et boutons -> 5 – 10 ko Optimiser le chargement de sa page : Compression images - Poids des fichiers intégrés dans la page. Matériel & équipement serveur (bande passante & traffic)