An avatar with a white square may tempt you to add a background rule. First determine whether the square is inside the file or painted by the component.
Reproduce With The Same URL
Open the exact image URL used by the page. Place that file on a contrasting surface in a small test view. Then inspect the wrapper background and any pseudo-elements separately.
A white background removal step can help when the unwanted pixels are baked into the source. It cannot fix a wrapper that explicitly paints white. Keep those failure cases distinct.
Follow The Delivery Path
The W3C PNG specification describes alpha information, but support in the source does not prove every derivative preserves it. Compare the original export with the transformed URL delivered to the browser.
- Check the actual network response.
- Compare light and dark surfaces.
- Inspect the smallest displayed size.
Once the file is correct, remove any temporary CSS used during diagnosis. Record whether the avatar expects transparency or a fixed field. That small requirement saves the next contributor from repeating the investigation.
Use a temporary cache-busting URL only to verify a new export, then follow the project's normal asset versioning approach. If several sizes are generated, sample the one actually selected on the failing device. A correct desktop response does not settle what a mobile image variant contains.
Keep the test view small enough that another contributor can reproduce it without the entire application.
