Options d’optimisation des images et des GIF animés

Les graphiques web peuvent être des images bitmap (pixellisées) ou des images vectorielles. Les formats bitmap (GIF, JPEG et PNG) dépendent de la résolution, ce qui signifie que les dimensions de l’image bitmap, et éventuellement sa qualité, varient en fonction de la résolution du moniteur. Les formats vectoriels (SVG et SWF), quant à eux, sont indépendants de la résolution et peuvent être réduits ou agrandis sans aucune perte au niveau de la qualité d’image. Les formats vectoriels peuvent également inclure des données de pixellisation. 

Options d’optimisation JPEG

Le format JPEG est le format standard de compression d’images à tons continus, telles que les photographies. L’optimisation d’une image au format JPEG implique une compression avec perte de qualité, au cours de laquelle des données sont supprimées de manière sélective.

Détermine le niveau de compression. Plus la qualité est élevée, plus l’algorithme de compression conserve de détails. Notez cependant qu’un paramètre de qualité élevé produit un fichier plus volumineux qu’un paramètre de qualité réduit. Affichez l’image optimisée avec différents paramètres de qualité afin de choisir le meilleur compromis entre qualité et taille de fichier.

Crée un fichier JPEG de taille légèrement inférieure. Le format JPEG optimisé est recommandé pour obtenir une compression maximale. Toutefois, certains navigateurs anciens ne prennent pas en charge cette fonctionnalité.

Affiche l’image progressivement dans un navigateur Web. L’image s’affiche sous la forme d’une série d’incrustations grâce auxquelles une version de faible résolution de l’image apparaît progressivement à mesure de son téléchargement. L’option Progressif est associée au format JPEG optimisé.

 les images JPEG créées avec l’option Progressif nécessitent davantage de RAM à l’affichage et ne sont pas prises en charge par certains navigateurs.

Indique la quantité de flou appliquée à l’image. Cette option applique un effet identique à celui du filtre Flou gaussien et permet une compression plus importante du fichier, résultant en un fichier plus petit. Il est recommandé de la régler sur une valeur comprise entre 0,1 et 0,5.

Conserve les profils colorimétriques dans le fichier optimisé. Certains navigateurs utilisent les profils colorimétriques pour la correction des couleurs.

Indique une couleur de fond pour les pixels transparents de l’image d’origine. Cliquez sur la case de couleur Cache pour sélectionner une couleur dans le sélecteur de couleurs ou sélectionnez une option dans le menu Cache : Couleur de la pipette (pour utiliser la couleur affichée dans la case d’échantillon de pipette), Couleur de premier plan,Couleur d’arrière-plan, Blanc, Noir ou Autre (pour utiliser le sélecteur de couleurs).

Les pixels entièrement transparents de l’image d’origine adoptent la couleur sélectionnée, tandis que les pixels partiellement transparents de l’image d’origine sont mélangés à cette même couleur.

Options d’optimisation des formats GIF et PNG-8

Le format GIF est le format de compression d’images standard avec des couleurs continues et des détails précis, tels que des dessins au trait, des logos ou des illustrations contenant du texte. Tout comme le format GIF, le format PNG-8 compresse efficacement les zones de couleurs continues tout en préservant les détails précis.

Les fichiers PNG-8 et GIF prenant en charge les couleurs 8 bits, ils peuvent reproduire jusqu’à 256 couleurs. Le processus de détermination des couleurs à utiliser est appelé indexation. Par conséquent, les images aux formats GIF et PNG-8 sont parfois appelées images couleur indexées. Pour convertir une image en couleur indexée, une table de couleurs est générée pour stocker et indexer les couleurs de l’image. Si une couleur de l’image originale n’apparaît pas dans la table de couleurs, l’application choisit celle qui en est la plus proche ou simule la couleur en utilisant plusieurs des couleurs disponibles.

Outre les options ci-après, la table de couleurs de l’image est à votre disposition pour régler le nombre de couleurs.

Réduit la taille des fichiers par suppression sélective de données. Le volume des données supprimées est proportionnel à cette valeur. Vous pouvez souvent appliquer une valeur de 5 à 10 (et parfois à 50) sans que l’image ne soit dégradée. L’option de perte vous permet de réduire la taille du fichier de 5 à 40 %.

 l’option de perte n’est compatible ni avec l’option Entrelacé ni avec les algorithmes de tramage Bruit et Motif.

Détermine la méthode de création de la table de couleurs et le nombre de couleurs à lui définir. Vous pouvez sélectionner l’une des méthodes de réduction de couleurs suivantes :

Perception Crée une table de couleurs personnalisée en donnant la priorité aux couleurs auxquelles notre œil est plus sensible.

Sélective Crée une table de couleurs similaire à la table Perception, mais en privilégiant de larges zones de couleurs et en conservant les couleurs Web. En général, cette table de couleurs restitue fidèlement les couleurs de l’image. Il s’agit de l’option par défaut.

Adaptative Permet de créer une table de couleurs personnalisée par prélèvement des teintes à partir du spectre qui prédomine dans l’image. Par exemple, une image contenant uniquement les couleurs vert et bleu produit une table de couleurs constituée principalement de verts et de bleus. La plupart des images concentrent des couleurs dans des zones spécifiques du spectre.

Restrictive (Web) Utilise la table standard de 216 couleurs commune aux palettes 8 bits (256 couleurs) de Windows et Mac OS. Cette option garantit qu’aucun tramage de navigateur n’est appliqué aux couleurs lorsque l’image est affichée en 8 bits. Cette palette est également appelée palette Web sécurisée. La palette Web pouvant générer des fichiers plus volumineux, son utilisation est recommandée exclusivement lorsqu’il est indispensable d’éviter le tramage du navigateur.

Personnalisée Utilise une palette de couleurs créée ou modifiée par l’utilisateur. Si vous ouvrez un fichier GIF ou PNG-8 existant, il sera accompagné de sa propre palette de couleurs.

 Utilisez le panneau Table des couleurs dans la boîte de dialogue Enregistrer pour le web et les périphériques afin de personnaliser la table des couleurs.

Noir et blanc, Niveaux de gris, Mac OS, Windows Utilisent une palette de couleurs définie.

Détermine la méthode de tramage employée et la quantité appliquée. Le tramage correspond à la méthode de simulation des couleurs non disponibles dans le système d’affichage de couleurs de votre ordinateur. Un pourcentage élevé restitue un plus grand nombre de couleurs et de détails dans l’image mais risque de créer un fichier plus volumineux. Pour une compression optimale, utilisez le pourcentage de tramage le plus faible permettant d’obtenir le détail de couleur recherché. Les images contenant principalement des couleurs en aplat donnent de bons résultats sans tramage. Les images à tons continus (notamment les dégradés de couleur) donnent souvent de meilleurs résultats avec un tramage qui évite l’apparition de bandes de couleurs.

Vous pouvez sélectionner l’une des méthodes de tramage suivantes :

Diffusion Applique un motif aléatoire, en général moins visible que le tramage Motif. Les effets du tramage sont diffusés sur les pixels adjacents.

Motif Applique un motif carré semblable à une trame de demi-teinte pour simuler les couleurs absentes de la table de couleurs.

Bruit Applique un motif aléatoire semblable à celui obtenu avec la méthode de tramage Diffusion, sans le diffuser sur les pixels adjacents. Aucune ligne n’apparaît avec la méthode de tramage Bruit.

Détermine la manière dont les pixels transparents de l’image sont optimisés.

• Pour rendre complètement transparents les pixels transparents et fondre les pixels partiellement transparents avec une couleur, sélectionnez Transparence et une couleur de cache.

• Pour appliquer une couleur aux pixels entièrement transparents et mélanger les pixels partiellement transparents avec la même couleur, sélectionnez une couleur de cache et désélectionnez l’option Transparence.

• Pour sélectionner une couleur de cache, cliquez sur le témoin de couleur du menu Cache et sélectionnez une couleur dans le sélecteur de couleurs. Vous pouvez également sélectionner une option dans le menu Cache : Couleur de la pipette (pour utiliser la couleur affichée dans la case d’échantillon de la pipette), Couleur de premier plan, Couleur d’arrière-plan, Blanc, Noir ou Autre (pour utiliser le sélecteur de couleurs).

 Les options Couleur de premier plan et Couleur d’arrière-plan sont uniquement disponibles dans Photoshop.

A. Image d’origine B. Option Transparence sélectionnée avec une couleur de cache C. Option Transparence sélectionnée sans détourage D. Option Transparence désélectionnée avec une couleur de cache

Lorsque l’option Transparence est sélectionnée, vous pouvez choisir un algorithme de tramage des pixels partiellement transparents :

• Sans tramage de transparence n’applique aucun tramage aux pixels partiellement transparents de l’image.

• Tramage de transparence par diffusion applique un motif aléatoire, en général moins visible que le tramage Motif. Les effets du tramage sont diffusés sur les pixels adjacents. Si vous sélectionnez cet algorithme, spécifiez un pourcentage dans la zone Quantité pour indiquer la quantité de tramage à appliquer à l’image.

• Tramage de transparence par motif applique un motif carré semblable à une trame de demi-teinte aux pixels partiellement transparents.

• Tramage de transparence par bruit applique un motif aléatoire, semblable à l’algorithme Diffusion, mais sans diffusion du motif sur les pixels adjacents. Aucune ligne n’apparaît avec l’algorithme Bruit.

Affiche une version basse résolution de l’image dans un navigateur jusqu’au téléchargement complet du fichier image. Le téléchargement de l’image paraît ainsi plus court, et l’utilisateur peut vérifier le déroulement de l’opération. L’entrelacement augmente toutefois la taille des fichiers.

Indique une tolérance de décalage des couleurs vers leurs plus proches équivalents dans la palette Web (pour éviter le tramage des couleurs dans un navigateur). Plus cette valeur est élevée, plus le nombre de couleurs décalées est élevé.

Optimisation de la transparence dans les images GIF et PNG

La transparence rend possible la création d’images non rectangulaires pour le Web. L’option Transparence de l’arrière-plan conserve les pixels transparents de l’image.

Cela permet à l’arrière-plan de votre page web d’être visible à travers les zones de transparence de votre image. L’option Mise en cache d’arrière-plan simule la transparence en remplissant ou mélangeant des pixels transparents avec une couleur de cache qui peut correspondre à l’arrière-plan de la page web. La mise en cache d’arrière-plan est plus efficace si la couleur d’arrière-plan de la page Web est opaque et que vous savez de quelle couleur il s’agit.

Utilisez les options Transparence et Cache de la boîte de dialogue Enregistrer pour le Web et les périphériques afin de spécifier la manière dont les pixels transparents des images GIF et PNG doivent être optimisés.

• (GIF et PNG-8) Cochez la case Transparence et sélectionnez une couleur de cache pour que les pixels entièrement transparents le restent et que les pixels partiellement transparents prennent la couleur définie.
• Pour appliquer une couleur aux pixels entièrement transparents et mélanger les pixels partiellement transparents avec la même couleur, sélectionnez une couleur de cache et désélectionnez l’option Transparence.
• (GIF et PNG-8) Pour rendre complètement transparents tous les pixels transparents à plus de 50 %, et complètement opaques les pixels transparents à moins de 50 %, sélectionnez Transparence et choisissez Sans dans le menu Cache.
• (PNG-24) Pour enregistrer une image avec une transparence multi-niveaux (jusqu’à 256 niveaux), sélectionnez Transparence. L’option Cache est désactivée étant donné que la transparence multi-niveaux permet à une image de se mélanger avec n’importe quelle couleur d’arrière-plan.

 dans les navigateurs qui ne prennent pas en charge la transparence PNG-24, les pixels transparents peuvent être affichés sur une couleur d’arrière-plan par défaut, telle que le gris.

Pour sélectionner une couleur de cache, cliquez sur le témoin de couleur du menu Cache et sélectionnez une couleur dans le sélecteur de couleurs. Vous pouvez également sélectionner une option dans le menu Cache : Couleur de la pipette (pour utiliser la couleur affichée dans la case d’échantillon de la pipette), Couleur de premier plan, Couleur d’arrière-plan, Blanc, Noir ou Autre (pour utiliser le sélecteur de couleurs).

 Les options Couleur de premier plan et Couleur d’arrière-plan sont uniquement disponibles dans Photoshop.

Affichage de la table de couleurs d’une tranche optimisée

La table de couleurs d’une tranche apparaît dans le panneau Table de couleurs de la boîte de dialogue Enregistrer pour le Web et les périphériques.

Sélectionnez une tranche optimisée au format GIF ou PNG-8. La table de couleurs de la tranche sélectionnée apparaît dans la table de couleurs de la boîte de dialogue Enregistrer pour le Web et les périphériques.

Dans une image composée de plusieurs tranches, les couleurs de la table risquent de varier d’une tranche à une autre ; pour éviter cela, vous pouvez lier les tranches avant de commencer votre travail. Si vous sélectionnez plusieurs tranches utilisant des tables des couleurs différentes, la table de couleurs s’affiche vide, et sa barre d’état indique la mention « Mixte ».

Personnalisation de la table de couleurs pour les images GIF et PNG-8

La table de couleurs de la boîte de dialogue Enregistrer pour le Web et les périphériques permet de personnaliser les couleurs des images GIF et PNG-8 optimisées. Un nombre réduit de couleurs préserve, dans la plupart des cas, la bonne qualité de l’image tout en réduisant la taille du fichier de l’image.

Dans cette table, vous pouvez ajouter et modifier des couleurs, décaler une sélection de teintes par des couleurs compatibles avec le Web et verrouiller les coloris sélectionnés pour éviter leur suppression de la palette.

Tri d’une table de couleurs

Choisissez un ordre de tri dans le menu de la palette Table de couleurs :

• Non trié(e), pour restaurer l’ordre de tri initial.
• Trier par teinte, pour classer les couleurs selon leur position sur la roue chromatique standard (exprimée en degré de 0 à 360). Les couleurs neutres ont une valeur de teinte nulle (0) et sont répertoriées avec les rouges.
• Trier par luminance, pour classer les couleurs selon leur clarté ou leur intensité.
• Trier par popularité, pour classer les couleurs selon leur fréquence d’occurrence dans l’image.

Ajout d’une couleur à la table de couleurs

Vous pouvez ajouter des couleurs qui n’ont pas été prises en compte lors de la création de la table. L’ajout d’une couleur dans une table dynamique décale la couleur de la palette au plus près de la nouvelle couleur. L’ajout d’une couleur dans une table fixe ou personnalisée ajoute une autre couleur dans la palette.

Sélection des couleurs dans la table de couleurs

Un cadre blanc apparaît autour des couleurs sélectionnées dans la table de couleurs.

• Pour sélectionner une couleur, cliquez dessus dans la table de couleurs.
• Pour sélectionner plusieurs couleurs dans la table de couleurs, appuyez sur la touche Maj et cliquez sur une autre couleur. Toutes les couleurs situées entre la première couleur et la deuxième couleur sélectionnées sont sélectionnées. Pour sélectionner un groupe de couleurs non adjacentes, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS), puis cliquez sur chaque couleur à inclure dans la sélection. Le menu de la palette Table des couleurs fournit également des commandes de sélection de couleurs.
• Pour sélectionner une couleur dans l’image d’aperçu, cliquez dans l’aperçu à l’aide de l’outil Pipette de la boîte de dialogue Enregistrer pour le Web et les périphériques. Cliquez tout en maintenant la touche Maj enfoncée pour sélectionner d’autres couleurs.
• Pour désélectionner toutes les couleurs, choisissez Désélectionner toutes les couleurs dans le menu de la palette Table de couleurs.

Décalage d’une couleur

Vous pouvez remplacer une couleur sélectionnée dans la table de couleurs par n’importe quelle autre valeur chromatique RVB. Lorsque vous régénérez l’image optimisée, la nouvelle couleur apparaît à la place de la couleur sélectionnée dans l’image.

Conversion des couleurs en leurs plus proches équivalents dans la palette Web

Pour empêcher la simulation des couleurs dans un navigateur, vous devez convertir les couleurs en leurs plus proches équivalents dans la palette Web. Cela garantit que les couleurs ne sont pas simulées lorsqu’elles s’affichent dans un navigateur sous les systèmes Windows ou Macintosh, capables d’afficher 256 couleurs uniquement.

Mise en correspondance des couleurs et de la transparence

Vous pouvez ajouter de la transparence à une image optimisée par mise en correspondance des couleurs existantes et de la transparence.

Verrouillage ou déverrouillage d’une couleur

Vous pouvez verrouiller des couleurs sélectionnées dans la table de couleurs pour éviter leur suppression, lorsque le nombre de couleurs est réduit, ainsi que leur tramage dans l’application.

 le verrouillage des couleurs n’empêche pas leur tramage dans un navigateur.

Suppression des couleurs sélectionnées

Vous pouvez supprimer des couleurs de la table de couleurs, afin de réduire la taille du fichier image. Lorsque vous supprimez une couleur, son équivalent le plus proche restant dans la palette est utilisé pour le rendu des zones de l’image optimisée qui contenaient précédemment cette couleur.

Lorsque vous supprimez une couleur, la table de couleurs devient automatiquement une palette personnalisée. En effet, les palettes Adaptative, Perception et Sélective réintègrent automatiquement la couleur supprimée dans la palette lorsque vous réoptimisez l’image, tandis que la palette Personnalisé demeure inchangée lorsque vous effectuez cette opération.

Enregistrement d’une table de couleurs

Vous pouvez enregistrer les tables des couleurs à partir d’images optimisées pour les utiliser avec d’autres images et charger les tables des couleurs créées dans d’autres applications. Lorsque vous chargez une nouvelle table de couleurs dans une image, les couleurs de l’image optimisée sont modifiées en fonction des couleurs de la nouvelle table.

Chargement d’une table de couleurs

Options d’optimisation PNG-24

Le format PNG-24 est particulièrement adapté à la compression d’images à tons continus, mais il produit des fichiers d’une taille plus importante que le format JPEG. Ce format présente l’avantage de conserver jusqu’à 256 niveaux de transparence dans une image.

Déterminent la manière dont les pixels transparents de l’image sont optimisés.

Affiche une version basse résolution de l’image dans un navigateur jusqu’au téléchargement complet du fichier image. Le téléchargement de l’image paraît ainsi plus court, et l’utilisateur peut vérifier le déroulement de l’opération. L’entrelacement augmente toutefois la taille des fichiers.