Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues 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

Fermée
  • Quelque chose ne va pas ?
#153 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
72/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
javascript
Domaine
frontend, performance

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
JavaScript
Étoiles
58
Forks
15
Merge moyen
16 h 53 min
PR mergées (30 j)
14

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TMHSDigital/Free-Game-Dev-Assets

Toutes les issues de TMHSDigital/Free-Game-Dev-Assets

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.