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.

2 files changed, 22 insertions, 14 deletions

diff --git a/custom/extensions/email-gravatar.lua b/custom/extensions/email-gravatar.luaindex 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 .. "&amp;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 ..-			"&amp;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-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 .. "&amp;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 ..
-			"&amp;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.luaindex 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 .. "&amp;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 ..-			"&amp;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 .. "&amp;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 ..
-			"&amp;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)