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.
