Utilisation de la transparence et du détourage

Dernière mise à jour le 12 janv. 2022

À propos des images web transparentes et détourées

La transparence permet de créer des images non rectangulaires pour le Web.La transparence d'arrière-plan, prise en charge par les formats GIF et PNG, préserve les pixels transparents de l'image et permet à l'arrière-plan de la page web d'apparaître à travers les zones transparentes de votre image. (Bien que le format JPEG ne prenne pas en charge la transparence, vous pouvez spécifier une couleur de détourage pour simuler l'apparence de la transparence dans l'image d'origine.)

Bouton web sans transparence (à gauche) et avec transparence (à droite)

Le détourage d’arrière-plan, pris en charge par les formats GIF, PNG et JPEG, simule la transparence par remplissage ou fusion des pixels transparents avec une couleur de détourage correspondant à la couleur d’arrière-plan de la page web. Le détourage d’arrière-plan donne de meilleurs résultats lorsque le fond de la page web est d’une couleur unie et que vous connaissez cette couleur.

Pour créer une transparence ou un détourage d’arrière-plan dans l’image optimisée, vous devez commencer par utiliser une image contenant des pixels transparents. Vous pouvez créer la transparence lorsque vous créez un calque ou que vous utilisez les outils Gomme d’arrière-plan, ou Gomme magique.

Lorsque vous travaillez avec des fichiers au format GIF ou PNG-8, vous pouvez créer des zones transparentes à bords nets : tous les pixels transparents à plus de 50 % dans l’image d’origine sont complètement transparents dans l’image optimisée, et tous les pixels opaques à plus de 50 % dans l’image d’origine sont complètement opaques dans l’image optimisée. Utilisez la transparence à bords nets lorsque vous ne connaissez pas la couleur d’arrière-plan de la page web ou lorsque cet arrière-plan présente une texture ou un motif. Toutefois, gardez à l’esprit que la transparence à bords nets peut produire des bords crénelés dans l’image.

GIF sans transparence aux contours nets (à gauche) et avec transparence aux contours nets (à droite)

Préserver la transparence d'arrière-plan dans une image GIF ou PNG

Les formats GIF et PNG‑8 prennent en charge un niveau de transparence : les pixels peuvent être entièrement transparents ou entièrement opaques, mais pas partiellement transparents. (En revanche, le format PNG‑24 prend en charge la transparence à plusieurs niveaux ; vous pouvez avoir jusqu'à 256 degrés de transparence dans une image, allant d'opaque à complètement transparent.)

Ouvrez ou créez une image qui contient de la transparence, puis sélectionnez Fichier > Enregistrer pour le web.

Dans la boîte de dialogue Enregistrer pour le web, sélectionnez GIF, PNG‑8 ou PNG‑24 comme format d'optimisation.

Sélectionnez Transparence.

Pour les formats GIF et PNG‑8, spécifiez comment traiter les pixels partiellement transparents dans l'image d'origine.Vous pouvez mélanger ces pixels avec une couleur de détourage ou créer une transparence aux contours nets.

Création d’une image GIF ou PNG avec un détourage

Lorsque vous connaissez la couleur d'arrière-plan de la page web sur laquelle une image sera affichée, vous pouvez utiliser la fonctionnalité de détourage pour remplir ou fusionner les pixels transparents avec une couleur de détourage qui correspond à l'arrière-plan de la page web.

Ouvrez ou créez une image qui contient de la transparence, puis sélectionnez Fichier > Enregistrer pour le web.

Dans la boîte de dialogue Enregistrer pour le web, sélectionnez GIF, PNG‑8 ou PNG‑24 comme format d'optimisation.

Pour les formats GIF et PNG-8, utilisez l’une des méthodes suivantes :
  • Pour conserver les pixels entièrement transparents et fusionner les pixels partiellement transparents avec la couleur de cache, sélectionnez Transparence.Cette option empêche l'effet de halo que vous voyez lorsque vous placez une image lissée sur un arrière-plan de page web différent de l'arrière-plan de l'image. Cette option empêche également les bords dentelés de la transparence à contours nets.

  • Pour remplir les pixels transparents avec la couleur de détourage et fusionner les pixels partiellement transparents avec cette couleur, désélectionnez Transparence.

Sélectionnez une couleur dans le menu déroulant Détourage :
  • Couleur de l'outil Pipette (pour utiliser la couleur dans la zone d'échantillonnage de l'outil Pipette)

  • Blanc, Noir ou Autre (pour sélectionner une couleur à l'aide du sélecteur de couleurs)

Créer une transparence aux contours nets dans un fichier GIF ou PNG‑8

Utilisez la transparence aux contours nets lorsque vous ne connaissez pas la couleur d'arrière-plan d'une page web ou lorsque l'arrière-plan de la page web contient une texture ou un motif. Toutefois, gardez à l'esprit que la transparence à bords durs peut causer des bords dentelés dans l'image.

Ouvrez ou créez une image contenant de la transparence, puis sélectionnez Fichier > Enregistrer pour le Web.

Dans la boîte de dialogue Enregistrer pour le Web, sélectionnez GIF ou PNG‑8 comme format d'optimisation.

Sélectionnez Transparence.

Sélectionnez Aucune dans le menu Matte.

Création d’une image JPEG avec un détourage

Bien que le format JPEG ne prenne pas en charge la transparence, vous pouvez spécifier une couleur de fond pour simuler l'apparence de la transparence dans l'image originale. La couleur de fond remplit les pixels entièrement transparents et se mélange avec les pixels partiellement transparents. Lorsque vous placez le JPEG sur une page web avec un arrière-plan correspondant à la couleur de fond, l'image semble se fondre avec l'arrière-plan.

Ouvrez ou créez une image contenant de la transparence, puis sélectionnez Fichier > Enregistrer pour le Web.

Dans la boîte de dialogue Enregistrer pour le web, sélectionnez JPEG comme format d'optimisation.

Sélectionnez une couleur dans le menu Couleur de fond : Aucune, Couleur de la pipette (pour utiliser la couleur dans l'échantillon de la pipette), Blanc, Noir ou Autre (pour sélectionner une couleur à l'aide du sélecteur de couleurs).

Lorsque vous sélectionnez l’option Sans, le blanc est utilisé comme couleur de détourage.