Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Offer avatars at twice the size to dense screens
The 13 pixel icon came out blurred on the high density screens most
phones and laptops have.
| -rw-r--r-- | custom/extensions/email-gravatar.lua | 18 | |
| -rw-r--r-- | custom/extensions/email-libravatar.lua | 18 | |
| -rw-r--r-- | tests/extensions/test-email-avatar.lua | 1 |
3 files changed, 23 insertions, 14 deletions
diff --git a/custom/extensions/email-gravatar.lua b/custom/extensions/email-gravatar.lua index 95f7aae..c694d84 100644 --- a/custom/extensions/email-gravatar.lua +++ b/custom/extensions/email-gravatar.lua @@ -35,10 +35,11 @@ local has_digest, digest = pcall(require, "openssl.digest") --- The size is in pixels and serves both as the image asked of the service --- and as the width and height attributes. The default image is what --- Gravatar draws for an address it has never seen. The endpoint is https so --- the icon is not blocked as mixed content on an https page. +-- The size is in pixels and serves both as the image asked of the service and +-- as the width and height attributes, while a screen of double density is +-- offered an image twice the size. The default image is what Gravatar draws for +-- an address it has never seen. The endpoint is https so the icon is not +-- blocked as mixed content on an https page. local avatar_size = 13 local default_image = "retro" local base_url = "https://gravatar.com/avatar/" @@ -108,6 +109,10 @@ function filter_write(text) buffer = buffer .. text end +local function avatar_url(size) + return base_url .. avatar_hash .. "?s=" .. size .. "&d=" .. default_image +end + -- A log page can carry one icon per commit, so the attributes let the -- browser defer the fetches for icons still off screen and keep decoding -- off the critical path. The icon only decorates the name beside it, so its @@ -116,9 +121,8 @@ function filter_close() if avatar_hash == nil then html(buffer) else - html("<img src='" .. base_url .. avatar_hash .. - "?s=" .. avatar_size .. - "&d=" .. default_image .. + html("<img src='" .. avatar_url(avatar_size) .. + "' srcset='" .. avatar_url(avatar_size * 2) .. " 2x" .. "' alt='' width='" .. avatar_size .. "' height='" .. avatar_size .. "' loading='lazy' decoding='async'> " .. buffer) diff --git a/custom/extensions/email-libravatar.lua b/custom/extensions/email-libravatar.lua index e04c2c2..cc726de 100644 --- a/custom/extensions/email-libravatar.lua +++ b/custom/extensions/email-libravatar.lua @@ -34,10 +34,11 @@ local has_digest, digest = pcall(require, "openssl.digest") --- The size is in pixels and serves both as the image asked of the service --- and as the width and height attributes. The default image is what --- Libravatar draws for an address it has never seen. The endpoint is the --- secure CDN so the icon is not blocked as mixed content on an https page. +-- The size is in pixels and serves both as the image asked of the service and +-- as the width and height attributes, while a screen of double density is +-- offered an image twice the size. The default image is what Libravatar draws +-- for an address it has never seen. The endpoint is the secure CDN so the icon +-- is not blocked as mixed content on an https page. local avatar_size = 13 local default_image = "retro" local base_url = "https://seccdn.libravatar.org/avatar/" @@ -107,6 +108,10 @@ function filter_write(text) buffer = buffer .. text end +local function avatar_url(size) + return base_url .. avatar_hash .. "?s=" .. size .. "&d=" .. default_image +end + -- A log page can carry one icon per commit, so the attributes let the -- browser defer the fetches for icons still off screen and keep decoding -- off the critical path. The icon only decorates the name beside it, so its @@ -115,9 +120,8 @@ function filter_close() if avatar_hash == nil then html(buffer) else - html("<img src='" .. base_url .. avatar_hash .. - "?s=" .. avatar_size .. - "&d=" .. default_image .. + html("<img src='" .. avatar_url(avatar_size) .. + "' srcset='" .. avatar_url(avatar_size * 2) .. " 2x" .. "' alt='' width='" .. avatar_size .. "' height='" .. avatar_size .. "' loading='lazy' decoding='async'> " .. buffer) diff --git a/tests/extensions/test-email-avatar.lua b/tests/extensions/test-email-avatar.lua index c6b92cb..3f14eac 100644 --- a/tests/extensions/test-email-avatar.lua +++ b/tests/extensions/test-email-avatar.lua @@ -45,6 +45,7 @@ end local out, ret = render("<author@example.com>", "A U Thor") h.contains("an icon is drawn for an address", out, "<img src='" .. base_url) h.contains("the size lands in the query", out, "?s=13&d=retro'") +h.contains("a dense screen gets twice the size", out, "?s=26&d=retro 2x'") h.contains("the icon is marked decorative", out, "alt='' width=") h.contains("width matches the size", out, "width='13'") h.contains("height matches the size", out, "height='13'") |