Displaying rounded images in github pages for profile image (using markdown)

Question

I'm trying to display circular/rounded images using markdown in my github page. Right now i'm able to display image as shown here, check this please But i need the image to be like this,here

Check out my github page, here still working on it

I did search on the internet and found several articles all of them used HTML and CSS to display round images On w3schools. But I want to display the image using markdown. Is there away to display Circular images using markdown. I'm a noobie here, please help me.

user_15080854 · Answer

Not sure if this will work for you, but what I have done is use images.weserv.nl service: https://images.weserv.nl/?url=avatars.githubusercontent.com/u/65769327?v=4&h=300&w=300&fit=cover&mask=circle&maxage=7d

You can adjust the height and width. It will generate something like this: avatar

Markdown:

![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/65769327?v=4&h=300&w=300&fit=cover&mask=circle&maxage=7d
)

user_12539335 · Answer

Another way is to download an image editing software like GIMP and mask out a circle. Then remember to export as a PNG with transparency, but the images.weserv.nl service is a great way to do it assuming the service never goes down

Displaying rounded images in github pages for profile image (using markdown)

2 Answers