diff --git a/static/css/main.css b/static/css/main.css
index e94d312e..948ad303 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -737,8 +737,9 @@ figcaption {
 /** Avatars **/
 
 .avatar {
+    background-position: center;
+    background-size: cover;
     border-radius: 100%;
-    text-align: center; /* for alt-text */
 }
 
 .avatar.small {
diff --git a/templates/base.html.tera b/templates/base.html.tera
index db40f8d3..0fd1047f 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -1,3 +1,5 @@
+{% import "macros" as macros %}
+
 <!DOCTYPE html>
 <html>
     <head>
@@ -33,8 +35,8 @@
                             <i class="icon icon-log-out" aria-label="{{ "Log Out" | _ }}"></i>
                             <span class="mobile-label">{{ "Log Out" | _ }}</span>
                         </a>
-                        <a href="/me">
-                            <img class="avatar small" src="{{ account.avatar }}" alt="{{ "My account" | _ }}">
+                        <a href="/me" title="{{ "My account" | _ }}">
+                            {{ macros::avatar(user=account) }}
                             <span class="mobile-label">{{ "My account" | _ }}</span>
                         </a>
                     {% else %}
diff --git a/templates/instance/about.html.tera b/templates/instance/about.html.tera
index 95dcfef0..5eb1a687 100644
--- a/templates/instance/about.html.tera
+++ b/templates/instance/about.html.tera
@@ -29,7 +29,7 @@ About {{ instance.name }}
             </div>
             <div>
                 <p>{{ "Administred by" | _ }}</p>
-                <img class="avatar small" src="{{ admin.avatar }}" alt="{{ admin.name }}">
+                {{ macros::avatar(user=admin) }}
                 <p><a href="/@/{{ admin.fqn }}">{{ admin.name }}</a><small>(@{{ admin.fqn }})</small></p>
             </div>
         </section>
diff --git a/templates/instance/users.html.tera b/templates/instance/users.html.tera
index a3a572cb..672f4732 100644
--- a/templates/instance/users.html.tera
+++ b/templates/instance/users.html.tera
@@ -13,7 +13,7 @@ Users
     <div class="list">
         {% for user in users %}
             <div class="flex">
-                <img src="{{ user.avatar }}" class="avatar small padded" alt="{{ user.name }}">
+                {{ macros::avatar(user=user) }}
                 <p class="grow">
                     <a href="/@/{{ user.fqn }}">{{ user.name }}</a>
                     <small>@{{ user.username }}</small>
diff --git a/templates/macros.html.tera b/templates/macros.html.tera
index e8ed7f45..6ac6a4f8 100644
--- a/templates/macros.html.tera
+++ b/templates/macros.html.tera
@@ -52,7 +52,7 @@
 {% macro comment(comm) %}
     <div class="comment" id="comment-{{ comm.id }}">
         <a class="author" href="/@/{{ comm.author.fqn }}/">
-            <img class="avatar small padded" src="{{ comm.author.avatar }}" alt="{{ comm.author.name }}">
+            {{ macros::avatar(user=comm.author, pad=true) }}
             <span class="display-name">{{ comm.author.name }}</span>
             <small>@{{ comm.author.fqn }}</small>
         </a>
@@ -86,3 +86,11 @@
         </div>
     {% endif %}
 {% endmacro %}
+{% macro avatar(user, size="small", pad=true) %}
+    <img
+        class="avatar {{ size }} {% if pad %}padded{% endif %}"
+        style="background-image: url('{{ user.avatar }}');"
+        title="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
+        aria-label="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
+    >
+{% endmacro %}
diff --git a/templates/posts/details.html.tera b/templates/posts/details.html.tera
index 1a0bf59a..b723063d 100644
--- a/templates/posts/details.html.tera
+++ b/templates/posts/details.html.tera
@@ -42,7 +42,7 @@
             {% endfor %}
         </ul>
         <div class="flex">
-            <img src="{{ author.avatar }}" alt="{{ author.name }}" class="avatar medium padded">
+            {{ macros::avatar(user=author, pad=true, size="medium") }}
             <div class="grow">
                 <h2><a href="/@/{{ author.fqn }}">{{ author.name }}</a></h2>
                 <p>{{ author.summary | safe }}</h2>
diff --git a/templates/users/header.html.tera b/templates/users/header.html.tera
index c466e40f..eded30ee 100644
--- a/templates/users/header.html.tera
+++ b/templates/users/header.html.tera
@@ -1,6 +1,6 @@
 <div class="user">
     <div class="flex wrap">
-        <img class="avatar medium" src="{{ user.avatar }}" alt="{{ "{{ name}}'s avatar'" | _(name=user.name) }}">
+        {{ macros::avatar(user=user, size="medium") }}
 
         <h1 class="grow flex vertical">
             {{ user.name }}
