Image Web

Introduction

• Pour diffuser une image sur le web, il faut obtenir une image de qualité pour un affichage rapide sur un écran
• Le but est d'arriver à une image de taille raisonnable qui sera affichée rapidement pour l'internaute sans ADSL et très rapidement pour celui qui dispose de l'ADSL ...
• Déterminer la taille de l'image à afficher, par exemple 400 pixels de large (pour couvrir 40% d'un écran en affichage 1024) et 120 pixels pour les vignettes

• Pour une image de 400 pixels de large, la taille raisonnable se situe aux environs de 30Ko (affichage en moins de 10s à 56Kb/s)
• Pour une vignette de 120 pixels de large, compter environ 5Ko (une dizaine de vignettes s'afficheront en moins de 10s à 56Kb/s)

Retoucher l'image

• Utiliser l'image issue du scanner (3200 px X 2130px dans cet exemple)
• Corriger les imperfections de l'image
• Régler les niveaux
• Régler la luminosité et le contraste
• Régler la saturation
• Durée de l'intervention : 10 minutes maxi

• Toujours travailler en affichage à 100%
• Corriger les imperfections
• Utiliser tampon à bords flous de 25 pixels pour les pétouilles du ciel
• Utiliser tampon de 50 à 100 pixels pour supprimer les détails génants du bas de l'image
• Durée de l'intervention = 5 minutes
• Régler les niveaux : niveaux d'entrée de l'image ci-contre = 6 / 1.05 / 248
• Régler la luminosité et le contraste : luminosité = +6, contraste = +3
• Régler la saturation : saturation = +8 (ici film sensia100 avec polarisant)

Redimensionner l'image retouchée

• Utiliser l'image retouchée
• Régler dans le menu préférences "unités et règles" en pixels
• Re-dimensionner l'image de départ en 400 pixels de large (400x262)
• Régler la netteté de l'image
• Durée de l'intervention : 3 minutes maxi
• répéter l'opération pour créer une vignette de 120 pixels de large

• Redimensionner l'image

• Utiliser l'option "taille de l'image"
• Valider l'option "conserver les proportions"
• Valider l'option "ré-échantillonnage" mode "bicubique"

• Régler la netteté

• Utiliser l'option "filtre" "renforcement" "accentuation"
• Régler le gain à 120%
• Régler le rayon à 1 pixel
• Régler le seuil à 3 niveaux

Enregistrer l'image pour le Web

• Principe de la compression JPEG

• Pour expliquer le principe de la compression JPEG, faisons une analogie avec les opérations "+" et "X"
• Pour afficher 400 pixels du même bleu d'un ciel :
• Solution 1 : 1 pixel bleu + 1 pixel bleu + ... + 1 pixel bleu (le 400 ème !)
• solution 2 : afficher 400 fois un pixel bleu
• La solution 2 correspond au principe de la compression JPEG, l'image sera beaucoup moins volumineuse
• Le taux de compression est réglable : forte compression = qualité basse, faible compression = haute qualité
• La compression sera plus efficace sur une image avec un ciel bleu, que sur une image d'arbres à l'automne

• Rechercher la taille optimale du fichier image

• Pour une image à diffuser sur le Web, le principe est donc d'obtenir une taille la plus faible possible pour une qualité d'affichage sans artefact
• L'image présentée ci-dessus pourrait avoir une taille de fichier triplée sans avoir d'augmentation de qualité

• Compression JPEG

• Utiliser l'option "Fichier" "Enregistrer pour le Web"
• Visualiser l'image à 100%
• Choisissez la qualité la plus haute
• Diminuer la qualité en regardant si des artefacts apparaissent
• Ré-augmenter la qualité dès leur apparition

• Exemple

• L'image retouchée non compressée initialement faisait plus de 100 Ko
• Après compression JPEG en qualité haute,
• Le fichier ne faisait plus que 37Ko
• La 1ère image se serait affichée en plus de 20s, la 2ème en 5s (modem 56Kb/s)