Changeset 8308c9ca in Klonkt

Timestamp:

06/28/2026 10:27:59 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

318e1ce

Parents:

48027f2

Message:

fix(images): full-width timeline media at 1280px (was 640, blurry on mobile retina)

The News-feed media is full-width — on a phone that's ~430px CSS x 3 DPR ~= 1290 physical px,
so the 640px thumbnail was upscaled and looked low-quality. Serve it at 1280px (crisp on
mobile/desktop retina; capped at the original width). Grid/list covers stay small (their
display is small; a bigger thumb would over-downscale line-art on desktop).

• services/ThumbnailService.js — add 1280 to the size whitelist
• views/pages/news.ejs — feed media thumb 640 -> 1280

Location:

src

Files:

• services/ThumbnailService.js (modified) (1 diff)
• views/pages/news.ejs (modified) (1 diff)

src/services/ThumbnailService.js

@@ -24 +24 @@
 
 // Allowed widths (whitelist → no arbitrary-size abuse). 96 = small feed/comment avatars
-// (~44px); 128 = nav/profile avatars; 256 ≈ 2× a list cover; 480 ≈ 2× a grid tile. Keep
-// these ~2× the display size so line-art stays crisp (the browser barely downscales).
-export const THUMB_SIZES = new Set([96, 128, 256, 320, 480, 640]);
+// (~44px); 128 = nav/profile avatars; 256 ≈ 2× a list cover; 480 ≈ 2× a grid tile; 1280 =
+// full-width timeline media (crisp on mobile retina, ~430px × 3 DPR). Keep these ~2× the
+// display size so the browser barely scales (avoids both jaggies and upscaling blur).
+export const THUMB_SIZES = new Set([96, 128, 256, 320, 480, 640, 1280]);
 
 let _seq = 0;

src/views/pages/news.ejs

@@ -118 +118 @@
             <div class="tl-media">
               <% imgs.forEach(function(m){ %>
-                <a class="tl-media-img" href="<%= m.url %>" target="_blank" rel="noopener"><img src="<%= thumb(m.url, 640) %>" alt="" loading="lazy" decoding="async"></a>
+                <a class="tl-media-img" href="<%= m.url %>" target="_blank" rel="noopener"><img src="<%= thumb(m.url, 1280) %>" alt="" loading="lazy" decoding="async"></a>
               <% }); %>
             </div>