Comment puis-je supprimer les pixels blancs autour des bords lors de l'exportation d'un GIF transparent?

J'ai pris les chargeurs de xooplate.com puis les ai exportés à l'aide de l'action incluse vers un GIF. Mais j'ai quelques pixels blancs autour du chargeur qui sont vraiment ennuyeux lorsqu'ils sont affichés sur un fond sombre. Vous pouvez le voir ici, dans un cadre que j'ai extrait du gif:

Comment puis-je empêcher ces pixels blancs et conserver l'arrière-plan transparent?

La façon dont la transparence fonctionne avec les gifs / pngs 8 bits est qu'un pixel est soit totalement transparent soit entièrement opaque .

Aux coins d'un cercle où le cercle se fond de manière transparente avec l'arrière-plan, il y a généralement des pixels semi-transparents pour adoucir la transition. Cette transition en douceur ne peut pas être entièrement reproduite avec des gifs / pngs 8 bits.

Une façon de truquer cela est de sélectionner un cache de fond pour tous ces pixels semi-transparents. Cela signifie que les pixels qui ne sont pas entièrement transparents obtiennent leur couleur calculée comme s'ils étaient au-dessus de la couleur mate.

Les pixels blancs de votre cercle gif se sont déroulés ainsi, car ils ont été conçus pour être utilisés sur un fond blanc. Les pixels semi-transparents du cercle d'origine ont été tramés contre la couleur blanche mate, résultant en des pixels presque blancs mais entièrement opaques autour des coins.

La façon de remédier à cela si vous avez le cercle d'origine entièrement transparent est de save for web & devicessélectionner une couleur mate qui convient à votre arrière-plan. De cette façon, les pixels potentiellement semi-transparents seront fusionnés en pixels entièrement opaques par rapport à la couleur mate, et affichés sur votre site Web avec une couleur d'arrière-plan similaire, il apparaîtra parfaitement lisse. Notez que a) les graphiques avec de petites plages de zones semi-transparentes (en pixels) fonctionnent mieux, et b) cela nécessite que l'arrière-plan contre lequel le gif soit affiché soit une partie de ce dans une couleur cohérente que vous choisissez pour votre cache.

Dans cette image:

• Le coin supérieur gauche est le graphique rond d'origine avec des coins anti-crénelés, c'est-à-dire lissés.
• Le même résultat que vous obtenez avec png-24, comme vu en haut à droite - mais cela ne fonctionne pas pour l'animation.
• La vue en bas à gauche vous montre comment les pixels semi-transparents du graphique sont transposés sur la couleur rouge mat sélectionnée. Notez également comment ces pixels, qui sont complètement transparents, restent complètement transparents. Alors que seuls les pixels qui ont un peu de transparence sont "sous-jacents" avec la couleur mate, et les pixels entièrement opaques ne sont pas affectés par les paramètres de transparence (cependant, ils sont affectés par les sélections sur le type de tramage et les couleurs).
• Le coin inférieur droit ressemble au type d'options d'exportation utilisées pour votre exemple d'image. Avec un cache blanc sélectionné, les mêmes pixels qui apparaissent en rouge dans l'image en bas à gauche, afficheront du blanc dans l'image en bas à droite. Ceci est parfaitement acceptable si vous le montrez sur un fond blanc. Avec d'autres arrière-plans plus sombres, les pixels blancs s'affichent car ils utilisent la mauvaise couleur mate pour créer des pixels entièrement opaques pour tous les pixels qui ne sont pas entièrement transparents.

Voir les deux gifs exportés en rouge et blanc mat dans cette image, sur un fond différent. Cela montre à quel point le cache rouge se marie bien avec un fond rouge, mais aussi à quel point le cache blanc est dérangeant sur un fond noir.

Si vous êtes dans la situation malheureuse, que vous n'avez pas le fichier d'origine avec des alphas complets anti-aliasés (c'est-à-dire que vous n'avez que le gif 8 bits), il est difficile d'inverser ce tramage mat - pixel par pixel, vous devez supprimer la couleur mate des pixels semi-transparents, puis les réexporter avec des paramètres plus appropriés.

Dans la boîte de dialogue Enregistrer pour le Web, veillez à définir la couleur mate à droite de la fenêtre sur la couleur de l'arrière-plan de votre page Web.

Les GIF ne prennent pas en charge la transparence totale sur 8 bits, ils ne prennent en charge que la transparence sur 1 bit. Le mieux que vous puissiez faire est d'utiliser une couleur qui correspond à l'arrière-plan de la page Web afin que l'image se fond facilement dans cette couleur.