The image loaded in an Avatar component is low res / pixelated

[Zaro]

Avatar components appear to display images in very low resolution / pixelated. This problem is not present with the standard Image component.

This can be reproduced by simply adding an Avatar component to a New M3 app and specifying a file for its image property.

Additional observation: If there is also an Image component on the form with the same image (as the Avatar’s) set as its src, then switching away from the app’s tab and going back to it makes the Avatar image display normally (high res).

[Zaro]

It seems that the issue is present on Chrome but not on Firefox.

[Zaro]

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;
}