Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

site: thumbnails are upscaled 2-4x in the cards view and on the entry strip, and the entry strip image is lazy-loaded although it is the LCP element

Đã đóng
  • Có gì không ổn?
#153 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript
Lĩnh vực
frontend, performance

Hướng nghiên cứu

Start with site/lib/cards.mjs:33, site/lib/entry-page.mjs:107-108, and the card sizing rules at site/public/styles.css:1797-1798; compare how thumbnails are rendered in list, cards, and entry views. Check site/thumbs.mjs for source selection and lib.test.mjs for relevant coverage. Done means thumbnails stay within 1.5× their natural width, entry images above the fold load eagerly, and tests cover small thumbnails and the eager option.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug performance priority: medium

Why it matters

The view toggle is the headline of the site refresh. Switching a list-default category (Audio, Fonts, Tools, Video) to Cards turns small publisher images into a blurry smear, which reads as a broken site rather than a licence-gated preview. On the 192 entry pages with a preview, that image is the largest element above the fold and loading="lazy" makes the browser wait for layout before requesting it, the classic LCP regression.

Evidence (at 69387df, local build served at 375x667 and 1440x900)

  • Cards upscaling: on /category/audio/ at 375 px, list view renders the first thumb at 56x56 from a 160x120 source; after clicking Cards the same <img> renders at 341x213 CSS px (682x426 device px at DPR 2). site/lib/cards.mjs:33 emits one <img width height loading="lazy"> for both views; site/public/styles.css:1797-1798 forces aspect-ratio: 16 / 10. About 15 stored thumbs are under 400 px wide.
  • Entry strip: on /entry/kenney/, the LCP candidate is IMG.entry-thumb-img; its request starts only after styles.css finishes, and the element has loading === "lazy". site/lib/entry-page.mjs:107-108 reuses thumbHtml() from cards.mjs:33, which hard-codes loading="lazy" decoding="async". The 600x300 source is laid out 870 CSS px wide at 375 px (DPR 2), nearly 3x upscaled.

Suggested approach

In cards.mjs, treat t.width < 400 as "small": render the card thumb with object-fit: contain on the surface colour (the list style) or fall back to the typographic placeholder in cards view only. Give thumbHtml an { eager } option used by the entry strip (loading="eager" fetchpriority="high") and add <link rel="preload" as="image"> to the entry head. Cap the strip at twice its natural width with object-fit: contain. In site/thumbs.mjs, prefer the larger of og:image and twitter:image when the chosen one is under 400 px.

Done when

No thumb is drawn above 1.5x its natural width; no entry page has a lazy image above the fold; lib.test.mjs covers the small-thumb branch and the eager option.

Ngôn ngữ chính
JavaScript
Star
58
Fork
15
Merge trung bình
18 giờ 42 phút
Pull request đã merge (30 ngày)
11

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TMHSDigital/Free-Game-Dev-Assets

Tất cả issue của TMHSDigital/Free-Game-Dev-Assets

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.