diff --git a/frappe/templates/includes/blog/blogger.html b/frappe/templates/includes/blog/blogger.html
index 136d2cdaa9..ef8f8257e8 100644
--- a/frappe/templates/includes/blog/blogger.html
+++ b/frappe/templates/includes/blog/blogger.html
@@ -1,7 +1,7 @@
 {% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
 
 <div class="media">
-	{{ square_image_with_fallback(src=blogger_info.avatar, size='90px', alt=blogger_info.full_name, class='align-self-start mr-3 rounded') }}
+	{{ square_image_with_fallback(src=blogger_info.avatar, size='small', alt=blogger_info.full_name, class='align-self-start mr-3 rounded') }}
 	<div class="media-body">
 		<h5 class="mt-0">
 			<a href="/blog?blogger={{ blogger_info.name }}" class="text-dark">{{ blogger_info.full_name }}</a>
diff --git a/frappe/templates/includes/comments/comment.html b/frappe/templates/includes/comments/comment.html
index 3fe3d7df58..1deb49bb3e 100644
--- a/frappe/templates/includes/comments/comment.html
+++ b/frappe/templates/includes/comments/comment.html
@@ -1,7 +1,7 @@
 {% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
 
 <div class="comment-row media">
-    {{ square_image_with_fallback(src=frappe.get_gravatar(comment.comment_email or comment.sender), size='48px', alt=comment.sender_full_name, class='align-self-start mr-3') }}
+    {{ square_image_with_fallback(src=frappe.get_gravatar(comment.comment_email or comment.sender), size='extra-small', alt=comment.sender_full_name, class='align-self-start mr-3') }}
     <div class="media-body">
         <div class="d-flex justify-content-between align-items-start">
             <span class="font-weight-bold text-muted">
diff --git a/frappe/templates/includes/macros.html b/frappe/templates/includes/macros.html
index 3e822b8bf3..767bd59ec9 100644
--- a/frappe/templates/includes/macros.html
+++ b/frappe/templates/includes/macros.html
@@ -1,18 +1,6 @@
-{% macro square_image_with_fallback(src=None, size=None, alt=None, class="") %}
+{% macro square_image_with_fallback(src=None, size='small', alt=None, class="") %}
 {% if src %}
-<img
-	{% if size %}
-	width="{{size}}"
-	height="{{size}}"
-	{% endif %}
-
-	{% if src %}
-	src="{{ src }}"
-	{% endif %}
-
-	class="{{ class }} "
-	alt="{{ alt or '' }}"
->
+<img class="rounded-lg website-image-{{ size }} mr-2" src="{{ src }}">
 {% else %}
 <div class="no-image bg-light {{ class }} " {% if size %}style="width: {{size}}; height: {{size}};"{% endif %}></div>
 {% endif %}