[feature/frontend] Respect `prefers-reduced-motion` for avatars, headers, and emojis (#3118)

* [feature/frontend] Respect `prefers-reduced-motion` for avatars, headers, and emojis

* go fmt

* fix tests

* use static version of instance thumbnail when appropriate

* use prefers-reduced-motion

* simplify account conversion a bit

* fix c&p error

4 files changed, 63 insertions, 23 deletions

diff --git a/web/template/page.tmpl b/web/template/page.tmpl
index 347caf33e..d2edc5277 100644
--- a/web/template/page.tmpl
+++ b/web/template/page.tmpl
@@ -29,7 +29,7 @@
 {{- if .instance.ThumbnailType -}}
 {{- .instance.ThumbnailType -}}
 {{- else -}}
-image/png
+image/webp
 {{- end -}}
 {{- end -}}
 
diff --git a/web/template/page_header.tmpl b/web/template/page_header.tmpl
index e605b349f..388587aaf 100644
--- a/web/template/page_header.tmpl
+++ b/web/template/page_header.tmpl
@@ -57,11 +57,20 @@ Instance Logo
 
 {{- with . }}
 <a aria-label="{{- .instance.Title -}}. Go to instance homepage" href="/" class="nounderline">
-    <img
-        src="{{- .instance.Thumbnail -}}"
-        alt="{{- template "thumbnailDescription" . -}}"
-        title="{{- template "thumbnailDescription" . -}}"
-    />
+    <picture>
+        {{- if .instance.ThumbnailStatic }}
+        <source
+            srcset="{{- .instance.ThumbnailStatic -}}"
+            type="{{- .instance.ThumbnailStaticType -}}"
+            media="(prefers-reduced-motion: reduce)"
+        />
+        {{- end }}
+        <img
+            src="{{- .instance.Thumbnail -}}"
+            alt="{{- template "thumbnailDescription" . -}}"
+            title="{{- template "thumbnailDescription" . -}}"
+        />
+    </picture>
     <h1>{{- .instance.Title -}}</h1>
 </a>
 {{- if .showStrap }}
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
index 256bbdccf..a06c842ab 100644
--- a/web/template/profile.tmpl
+++ b/web/template/profile.tmpl
@@ -94,14 +94,26 @@
         alt="{{- template "avatarAlt" . -}}"
         title="{{- template "avatarAlt" . -}}"
     >
-        <img
-            class="avatar"
-            src="{{- .account.Avatar -}}"
-            alt="{{- template "avatarAlt" . -}}"
-            title="{{- template "avatarAlt" . -}}"
-            width="{{- template "avatarWidth" . -}}"
-            height="{{- template "avatarHeight" . -}}"
-        />
+        <picture
+            aria-hidden="true"
+        >
+            {{- if .account.AvatarAttachment }}
+            <source
+                class="avatar"
+                srcset="{{- .account.AvatarStatic -}}"
+                type="{{- .account.AvatarAttachment.PreviewMIMEType -}}"
+                media="(prefers-reduced-motion: reduce)"
+            />
+            {{- end }}
+            <img
+                class="avatar"
+                src="{{- .account.Avatar -}}"
+                alt="{{- template "avatarAlt" . -}}"
+                title="{{- template "avatarAlt" . -}}"
+                width="{{- template "avatarWidth" . -}}"
+                height="{{- template "avatarHeight" . -}}"
+            />
+        </picture>
     </a>
 </div>
 {{- end }}
@@ -115,11 +127,20 @@
         {{- include "profileMovedTo" . | indent 2 }}
         {{- end }}
         <div class="header-image-wrapper">
-            <img
-                src="{{- .account.Header -}}"
-                alt="{{- template "headerAlt" . -}}"
-                title="{{- template "headerAlt" . -}}"
-            />
+            <picture>
+                {{- if .account.HeaderAttachment }}
+                <source
+                    srcset="{{- .account.HeaderStatic -}}"
+                    type="{{- .account.HeaderAttachment.PreviewMIMEType -}}"
+                    media="(prefers-reduced-motion: reduce)"
+                />
+                {{- end }}
+                <img
+                    src="{{- .account.Header -}}"
+                    alt="{{- template "headerAlt" . -}}"
+                    title="{{- template "headerAlt" . -}}"
+                />
+            </picture>
         </div>
         <div class="basic-info">
             {{- with . }}
diff --git a/web/template/status_header.tmpl b/web/template/status_header.tmpl
index 8946a1030..01b73aea0 100644
--- a/web/template/status_header.tmpl
+++ b/web/template/status_header.tmpl
@@ -32,13 +32,23 @@
         title="Open remote profile (opens in a new window)"
     >
     {{- end }}
-        <img
+        <picture
             class="avatar"
             aria-hidden="true"
-            src="{{- .Avatar -}}"
-            alt="Avatar for {{ .Username -}}"
-            title="Avatar for {{ .Username -}}"
         >
+            {{- if .AvatarAttachment }}
+            <source
+                srcset="{{- .AvatarStatic -}}"
+                type="{{- .AvatarAttachment.PreviewMIMEType -}}"
+                media="(prefers-reduced-motion: reduce)"
+            />
+            {{- end }}
+            <img
+                src="{{- .Avatar -}}"
+                alt="Avatar for {{ .Username -}}"
+                title="Avatar for {{ .Username -}}"
+            >
+        </picture>
         <div class="author-strap">
             <span class="displayname text-cutoff">
                 {{- if .DisplayName -}}