So apparently this is caused by object-fit: cover and how interpolation works in chromium-based browsers. Here are more details for those curious:
- https://stackoverflow.com/questions/74502978/object-fit-cover-gives-pixelated-images-on-chrome#:~:text=Workaround%3A%20avoid%20excessive%20resizing%20by,crop%20a%2016%2F9%20image.
- https://www.reddit.com/r/webdev/comments/wxh6ld/objectfitcover_makes_image_look_distorted_aspect/
An easy fix is adding the following to your css.
.anvil-m3-avatar img.anvil-m3-avatar-image {
overflow-clip-margin: unset;
}