A propos des images transparentes et des images web avec détourage

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, conserve les pixels transparents de l’image et permet à l’arrière-plan de la page web de transparaître dans 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 une impression de transparence dans l’image d’origine.

Bouton avec et sans transparence
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.

Image GIF avec et sans transparence à bords nets
Image GIF sans transparence à bords nets (à gauche) et avec transparence à bords nets (à droite)

Conservation de la transparence d’arrière-plan dans une image au format GIF ou PNG

Les formats GIF et PNG-8 prennent en charge un seul niveau de transparence : les pixels peuvent être complètement transparents ou opaques, mais ils ne peuvent pas être partiellement transparents. (En revanche, le format PNG-24 prend en charge la transparence multiniveau, ce qui signifie qu’une image peut contenir jusqu’à 256 degrés de transparence, allant de l’opacité à la transparence complète.)

  1. Ouvrez une image contenant de la transparence ou créez-en une, puis choisissez la commande Fichier > Enregistrer pour le web.
  2. Dans la boîte de dialogue Enregistrer pour le web, sélectionnez le format d’optimisation GIF, PNG-8 ou PNG-24.
  3. Activez l’option Transparence.
  4. Pour les formats GIF et PNG-8, indiquez comment traiter les pixels partiellement transparents dans l’image d’origine. Vous pouvez fusionner ces pixels avec une couleur de détourage ou créer une transparence à bords 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 l’image sera affichée, vous pouvez utiliser la fonction de détourage pour remplir ou fusionner les pixels transparents avec une couleur de détourage correspondant à la couleur d’arrière-plan de la page web.

  1. Ouvrez une image contenant de la transparence ou créez-en une, puis choisissez la commande Fichier > Enregistrer pour le web.
  2. Dans la boîte de dialogue Enregistrer pour le web, sélectionnez le format d’optimisation GIF, PNG-8 ou PNG-24.
  3. Pour les formats GIF et PNG-8, utilisez l’une des méthodes suivantes :
    • Pour conserver tels quels les pixels complètement transparents et pour fusionner les pixels partiellement transparents avec la couleur de détourage, sélectionnez la case Transparence. Cette option permet d’éviter l’effet d’auréole qui apparaît lorsque vous placez une image lissée sur un arrière-plan web différent de celui de l’image. Elle évite également l’apparition de bords crénelés dans les zones transparentes à bords nets.

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

  4. Sélectionnez une couleur dans le menu déroulant Détourage :
    • Couleur de la pipette (pour utiliser la couleur de l’échantillon de la pipette)

    • Blanc, Noir ou Autre (pour choisir une couleur dans le sélecteur de couleurs)

Création d’une transparence à bords nets dans un fichier GIF ou PNG-8

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.

  1. Ouvrez une image contenant de la transparence ou créez-en une, puis choisissez la commande Fichier > Enregistrer pour le web.
  2. Dans la boîte de dialogue Enregistrer pour le web, sélectionnez le format d’optimisation GIF ou PNG-8.
  3. Activez l’option Transparence.
  4. Sélectionnez l’option Sans dans le menu Détourage.

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 détourage pour simuler une impression de transparence dans l’image d’origine. La couleur de détourage remplit les pixels complètement transparents et se fond avec les pixels partiellement transparents. Lorsque vous placez l’image JPEG sur une page web dont l’arrière-plan correspond à la couleur de détourage, l’image semble intégrée à l’arrière-plan.

  1. Ouvrez une image contenant de la transparence ou créez-en une, puis choisissez la commande Fichier > Enregistrer pour le web.
  2. Dans la boîte de dialogue Enregistrer pour le web, sélectionnez l’option JPEG comme format d’optimisation.
  3. Sélectionnez une couleur dans le menu déroulant Détourage : Sans, Couleur de la pipette (pour utiliser la couleur de l’échantillon de la pipette), Blanc, Noir ou Autre (pour sélectionner une couleur dans le sélecteur de couleurs).

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

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne