Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

クローズ
  • 何か問題がありますか？
#153 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
72/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript
領域
frontend, performance

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
JavaScript
スター
58
フォーク
15
平均マージ
16時間 53分
マージ済み PR（30日）
14

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TMHSDigital/Free-Game-Dev-Assets のほかの issue

TMHSDigital/Free-Game-Dev-Assets の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。