Optimisation des images pour le Web

Différents Formats
GIF
JPEG
 

Définition

Utilisation

variantes

 

Palette de couleur

Graphic Image format

cartes, images, applas, filets, sans beaucoup de dégradés, aplats/filets, images au trait, plans

Compuserve Gif utilisation sur les BBS

Gif89a : possibilité d'animer / Fond transparente / Image progessive / Gestion des couches d'images/ Trajectoire d'objet ( image ready.

216 RVB / 256 coul.
Minimum 2 couleurs : N/B

  • Réduire la palette pour optimiser le nombre de couleurs tout en conservant une fidélité du visuel suffidante.

Petite photo ( vignette ) 50*50 pixels
Peu de dégradation des couleurs
Couleurs indexées ( la palette ) suivant l'utilisation finale ( Mac, Pc, Web, print.... )
Possibilité de vérouiller des couleurs


Joint Photographic Export Group

compression de photos en milliers de couleurs, avec de nombreues nuances de couleurs


inf/Moy/Sup.


pas de transparence
Milliers/millions de couleurs
dégradés, photos
Dégradation importante des coulers





 
 Exemple : elephan.psd
elephan.gif
 coraux.psd  
   entrelacé : idem progressif
%perte de qualité

Vérifier la taille de l'image, la résolution
- dans imageready on suppose 72 bpi ( n'est pas affichée )
1280*960 = 1 115 000 Pixels
50% de la taille : réduit de plus de 50% le poids du fichier
la dégradation n'est pas visible jusq' à 60%
En dessous, suivant la nature de l'image, il peut y avoir des dégradations visibles
Jpeg Inf 10 à 30 % : dégradations visibles.
Attention une page d'accueil ne doit pas dépasser 50ko ( modem )
Alors une photo ne peut dépasser 30ko
Ici, jpeg 10%
peut convenir
Progressif : affichage basse résolution > haute résolution pour faire patienter les internautes / failble Bande passante
Estompé : Flou à l'image et masquer la dgration de la compression Jpeg ( utiliser en association ).

 
 

Utilisation des couches alpha pour appliquer les modes de tramages différentes

 

 

 

 

 
 

 

 


 

 

 

 

 

 

 

 

Utiliser les possibilités offertes par l'utilisation des couches dans photoshop.

 
   
 
Droplet Application de réglages prédéfinis pouvant être appliquer à un ensemble de fichiers.    
       
Optimisation GIF Objectif réduire le nombre de couleurs
Verrouiller les couleurs indispensable en utilisant la pipette de l'outils "Optimisation Web".
Remlacer certaine couleur
   
  Créer un fond transparent pour adapter l'image à votre page web.
Attention à la précision du contour : peut nécessité un détourage.
   
 

 

 

 

 

 

 

   
 


Procéder au détourage dans image ready pour adaptée la couleur de détourage ( pixel intermédiaire ).