Why border radius 50% image looks blurry using CSS?

Question

Something weird is happening with an image that i have working in my HTML site.

I'm using Bootstrap Vue 4 (with Laravel 8). I'm working with a 250x250 pixeles image

and i'm trying to convert it into an rounded avatar of 50x50 pixels of dimension. I was trying to use avatar and rounded-circle classes but i'm getting the same blurry weird result, regarding i'm using native CSS or bootstrap helper classes.

HTML Code:

<img src="{{ Storage::url(auth()->user()->avatar) }}" id="my-avatar"
                                         alt="">

CSS Code:

#my-avatar {
    object-fit: cover;
    border-radius:50%;
    width: 50px;
    height: 50px;
}

EDIT: I've reproduced a DEMO with the current issue to expose my problem (please watch it as full screen because is part of a navbar):

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <style>
    #my-avatar {
      object-fit: cover;
      border-radius:50%;
      width: 50px;
      height: 50px;
    }
    </style>
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  
  <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
        
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="items-menu navbar-nav ml-auto">
          <li class="nav-item dropdown">
              <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                 Fernando Torres
                  <img src="https://i.stack.imgur.com/AzOlv.png" id="my-avatar"
                       alt="">
              </a>    
          </li>
        </ul>
      </div>  
      
      </div>  
      
      </navbar>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

maybe this help: https://stackoverflow.com/a/66862257/17716837 — Laaouatni Anas, Dec 23 '21 at 20:39
`Also, i give it to you my full code in case you can see anything i can't. Thanks.` You have to create a [mcve]: this means to only show the HTML code that is required to reproduce the problem and not more. — t.niese, Dec 23 '21 at 20:41
@t.niese I've added that minimal reproducible example now updating my question. — Fernando Torres, Dec 23 '21 at 21:03
Not blurry on IOS 15 iPad Safari. What browser and OS are you using? — A Haworth, Dec 23 '21 at 21:21
@AHaworth I'm in Google Chrome 96.0.4664.110 It cloud be possible a browser issue? — Fernando Torres, Dec 23 '21 at 21:24
Does this answer your question? [Oversized image is blurry when reduced](https://stackoverflow.com/questions/10011335/oversized-image-is-blurry-when-reduced) — t.niese, Dec 28 '21 at 12:43

t.niese · Accepted Answer · 2021-12-28T12:46:42.190

The problem already occurs when having just the image and resizing it.

#my-avatar {
  width: 50px;
  height: 50px;
}

<img src="https://i.stack.imgur.com/AzOlv.png" id="my-avatar" alt="">

The problem is that the original image is significantly larger than how it is displayed. Resizing however is expensive so browsers could do some approximations, which can have blurry results.

You can force better processing of the image using image-rendering

#my-avatar {
  width: 50px;
  height: 50px;
  image-rendering: -moz-crisp-edges; 
  image-rendering:   -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor
}

<img src="https://i.stack.imgur.com/AzOlv.png" id="my-avatar" alt="">

You however should consider using an image with a dimension that matches the display size better.

Why border radius 50% image looks blurry using CSS?

1 Answers1