diff --git a/assets/p/underlines.avif b/assets/p/underlines.avif
new file mode 100644
index 0000000..1f44a3a
Binary files /dev/null and b/assets/p/underlines.avif differ
diff --git a/assets/p/underlines.jxl b/assets/p/underlines.jxl
deleted file mode 100644
index 5dc73dc..0000000
Binary files a/assets/p/underlines.jxl and /dev/null differ
diff --git a/assets/p/underlines.png b/assets/p/underlines.png
index fe6f690..97cdbd7 100644
Binary files a/assets/p/underlines.png and b/assets/p/underlines.png differ
diff --git a/assets/p/underlines_dark.avif b/assets/p/underlines_dark.avif
new file mode 100644
index 0000000..fa592d9
Binary files /dev/null and b/assets/p/underlines_dark.avif differ
diff --git a/assets/p/underlines_dark.jxl b/assets/p/underlines_dark.jxl
deleted file mode 100644
index 05d25ab..0000000
Binary files a/assets/p/underlines_dark.jxl and /dev/null differ
diff --git a/assets/p/underlines_dark.png b/assets/p/underlines_dark.png
index d77cc47..5db9e50 100644
Binary files a/assets/p/underlines_dark.png and b/assets/p/underlines_dark.png differ
diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md
index 8d94b2f..1dd9dcf 100644
--- a/content/posts/website-best-practices.md
+++ b/content/posts/website-best-practices.md
@@ -725,7 +725,7 @@ Some typographers insist that [underlined on-screen text is obsolete](https://pr
 
 Readers already expect underlined text to signify a hyperlink. Don't break fundamental affordances for aesthetics. Underlines are also necessary to distinguish the beginnings and ends of multiple consecutive links, especially among color-blind users.
 
-{{<image-figure>}} {{<picture name="underlines" alt="Multiple multi-word hyperlinks with and without underlines separating them.">}}
+{{<image-figure>}} {{<picture name="underlines" alt="Multiple multi-word hyperlinks with and without underlines separating them." sf=0.75 >}}
 
 <figcaption itemprop="caption">
 
@@ -1339,7 +1339,7 @@ These tests begin reasonably, but gradually grow absurd. Once again, use your ju
 
 I'm still on step 16, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht).
 
-{{<image-figure representative="True">}} {{< picture name="serenity" alt="Retro-looking web browser with bitmap fonts showing this article's \"Code snippet 4\"." sf=2 >}}
+{{<image-figure representative="True">}} {{< picture name="serenity" alt="Retro-looking web browser with bitmap fonts showing this article's \"Code snippet 4\"." class="pix" sf=2 >}}
 
 <figcaption itemprop="caption">
 
diff --git a/layouts/shortcodes/picture.html b/layouts/shortcodes/picture.html
index b9f03d2..bac221e 100644
--- a/layouts/shortcodes/picture.html
+++ b/layouts/shortcodes/picture.html
@@ -9,17 +9,13 @@
 {{ $dark_avif := resources.GetMatch (printf "/p/%s_dark.avif" (.Get "name")) -}}
 {{ $dark_jxl := resources.GetMatch (printf "/p/%s_dark.jxl" (.Get "name")) -}}
 
-{{- $isPix := false -}}
 {{- $img_width := $light_png.Width -}}
 {{- $img_height := $light_png.Height -}}
 {{- with (.Get "sf") -}}
 	{{- $img_width = (mul $img_width . | math.Round) -}}
 	{{- $img_height = (mul $img_height . | math.Round ) -}}
-	{{- if eq . 2 -}}
-		{{- $isPix = true -}}
-	{{- end -}}
 {{- end -}}
-<picture{{ if $isPix }} class="pix"{{ end }}>
+<picture>
 	{{ with $dark_svg -}}
 	{{ $dark_svg_src := . | resources.Fingerprint "md5" -}}
 	<source
@@ -83,7 +79,7 @@
 	<source
 		srcset="{{ $light_png_src.RelPermalink }}"
 		type="image/png">
-	<img
+	<img{{ with .Get "class" }} class="{{ . }}"{{ end }}
 		width="{{ $img_width }}" height="{{ $img_height }}"
 		src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'
 		{{ with .Parent -}}