Catégories de format d'optimisation On distingue 3 formats principaux pour les images destinées au Web: JPG GIF PNG Le format JPG est le format idéal pour les photographies et ses paramètres d'optimisation sont simples. Les formats GIF et PNG sont destinés aux images non-photographiques et leurs paramètres sont beaucoup plus nombreux. Nous devons d'abord définir ce que sont ces paramètres (page suivante) 2
Optimisation des images non-photographiques Palette de couleurs Déterminée selon l'intention désirée pour l'affichage dans un fureteur Nombre de couleurs Plus le nombre de couleurs utilisées est grand, plus le poids de l'image est élevé. GIF et PNG-8 ont un maximum de 256 couleurs indexées Mode de lissage (dithering) On adoucit les contours en simulant des couleurs intermédiaires à partir des couleurs existantes Transparence On peut affecter la transparence à des couleurs de l'index Transparence du lissage On peut choisir le mode de transparence des pixels de lissage Couleur matte Couleur de fond de la page Web. L'image Photoshop doit supporter la transparence pour pouvoir utiliser cette option Perte Détermine si certaines données seront jetées lors de la compression 3
Format GIF 256 couleurs indexées Vous déterminez le nombre de couleurs que vous voulez utiliser: plus il y a de couleurs, plus le poids de l'image est élevé. Vous pouvez choisir la palette (page suivante) Un seul niveau de transparence La couleur Matte peut être appliquée Peut contenir des animations Vous pouvez compresser l'image avec perte afin de réduire son poids mais aussi sa qualité Vous pouvez déterminer le pourcentage de lissage (dithering) à utiliser (page suivante) Le format gif est souvent utilisé pour les images de type vecteur 4
Lissage (Dithering) sur images GIF Dithering est le phénomène de saupoudrer les pixels pour créer des couleurs intermédiaires 5
Palettes de couleurs Perceptuelle: donne préséance aux couleurs les plus sensibles à l'œil humain. Sélective: semblable à la palette perceptuelle tout en favorisant les grandes surfaces de couleur et les couleurs Web. Cette palette est celle qui respecte le plus l'intégrité des couleurs. C'est l'option par défaut. Adaptive: cette palette accorde la priorité aux couleurs les plus fréquentes dans l'image. Elle risque de s'éloigner davantage des couleurs auxquelles l'œil humain est le plus sensible. 6
Format JPG Affiche l'espace de couleurs RGB: 16,777,216 couleurs Vous pouvez régler la qualité. Une valeur de 40 est généralement suffisante. Vous pouvez faire apparaître les images graduellement dans le fureteur avec l'option Progressif. Vous pouvez optimiser l'image à un poids spécifique Vous pouvez optimiser des parties d'une image différemment en utilisant une couche alpha. L'option lissage (smoothing) permet de réduire le poids de l'image en créant un flou, mais elle réduit aussi sa qualité. 7
Utilisation du format JPEG Photographies Tons continus et dégradés Quand plusieurs couleurs sont requises Considérer l'option lissage (smoothing) pour les images servant à créer des fonds Aucune transparence Aucune animation Les couleurs solides peuvent présenter des contours non voulus (halos). Il faut alors considérer le format GIF. 8
Optimisation d'images Bitmap Usage typique du format JPEG 9
Format PNG (Portable Network Graphics) Ce format libre de droits est offert en version 8-bit ou 24- bit. On utilise ce format pour les images contenant du texte, du dessin au trait ou quand les contrastes de couleurs sont importants. Le format 8-bit peut produire des images optimisées d'un poids inférieur à celui du GIF si l'on sait bien paramétrer les options (palette de couleurs, type de lissage). Il utilise une compression sans perte de données. PNG ne supporte pas les animations. Les images photographiques ne devraient pas être optimisées en format PNG; utilisez plutôt le format JPG. 10
Format PNG-24 Le format 24-bit offre une gamme de couleurs beaucoup plus large que le GIF, mais son poids sera plus élevé puisqu'il ne se limite pas à une palette indexée de 256 couleurs. Toutefois, il peut procurer une transparence de fond sans contour dentelé. Une image transparente dans Photoshop dont l'option Transparence sera décochée dans le volet d'optimisation PNG-24 pourra se voir affecter une couleur Matte (couleur de fond de la page Web) qui remplacera les pixels transparents dans l'image. 11
Exercices d optimisation Votre formateur vous remettra différentes images que vous devrez optimiser à un bon rapport qualité/ poids. Format GIF ou PNG Nombre de couleurs Lissage (dithering) Choix de palette Fichiers: Joker, Evasion, stop Format JPG: Choix du niveau de qualité Utilisation du lissage? Fichiers: automne, lion, montage, balustrade 12