Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#153 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
72/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
javascript
Bereich
frontend, performance

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
JavaScript
Sterne
58
Forks
15
Ø Merge
16 Std. 53 Min.
Gemergte PRs (30 T.)
14

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TMHSDigital/Free-Game-Dev-Assets

Alle Issues in TMHSDigital/Free-Game-Dev-Assets

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.