diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index 1d6b0700..2cc3cc70 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -519,12 +519,11 @@ a[data-fancybox] img {
 }
 
 #profile .portrait {
-  background-image: url('../img/portrait.jpg');
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border-radius: 50%;
-  background-size: cover;
+  object-fit: cover;
 }
 
 #profile .portrait-title h2 {
diff --git a/layouts/partials/widgets/about.html b/layouts/partials/widgets/about.html
index 8b60ecc4..cabeb226 100644
--- a/layouts/partials/widgets/about.html
+++ b/layouts/partials/widgets/about.html
@@ -7,11 +7,9 @@
     <div id="profile">
 
       {{ if $.Site.Params.gravatar }}
-      <div class="portrait" style="background-image: url('https://s.gravatar.com/avatar/{{ md5 $.Site.Params.email }}?s=200');"></div>
-      <meta itemprop="image" content="https://s.gravatar.com/avatar/{{ md5 $.Site.Params.email }}?s=200">
+      <img class="portrait" src="https://s.gravatar.com/avatar/{{ md5 $.Site.Params.email }}?s=200')" itemprop="image">
       {{ else if $.Site.Params.avatar }}
-      <div class="portrait" style="background-image: url('{{ (printf "img/%s" $.Site.Params.avatar) | absURL }}');"></div>
-      <meta itemprop="image" content="{{ (printf "img/%s" $.Site.Params.avatar) | absURL }}">
+      <img class="portrait" src="{{ (printf "img/%s" $.Site.Params.avatar) | relURL }}" itemprop="image">
       {{ end }}
 
       <div class="portrait-title">