CSS circle profile photo - bad quality-CodePudding

I have an issue regarding the user's profile photo. The photo is the following: image

On sites like YouTube the photo quality is better than on my site: example on YouTube

On my site the image has a very low quality: example on my site

HTML:

<div >
   <img src="profile-photo/1.jpg">
</div>

CSS:

.profile-photo {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  overflow: hidden;
}

Can anyone help me to solve this photo quality issue? Thank you.

CodePudding user response：

Try to actually reduce size of your image to ~match size of wrapper
Try adding image-rendering: crisp-edges;[1] to your image.
Sometimes transform: translateZ(0); helps too.
Inspect actual image in Youtube to see any other properties applied for better quality.

.profile-photo {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  overflow: hidden;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: crisp-edges;
}

<div >
   <img src="https://i.stack.imgur.com/DrBAT.png">
</div>

CodePudding user response：

You're taking a 644px image and shrinking it down to, what, 40px - 6% of its original height? That's going to cause some distortion.

The profile image in the corner in YouTube is 88px x 88px, so shrinking that down to 32x32 (25%) is going to look much better.

@Justinas' suggestion is about all you can do with just CSS. However, if you have control over the whole system, consider creating a smaller version of whatever image the user uploads. Not only will it create a crisper image, but the viewer won't have to download the full image when they just want an icon.

CodePudding user response：

So, here i'm trying to help. I have reference from w3school https://www.w3schools.com/howto/howto_css_rounded_images.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="https://i.stack.imgur.com/DrBAT.png" alt="Avatar" style="width:200px;height:200px">

</body>
</html>