Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de 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

Abierto
  • ¿Algo no está bien?
#153 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
frontend, performance

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
JavaScript
Estrellas
58
Forks
15
Merge medio
16 h 53 min
PR fusionados (30 d)
14

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TMHSDigital/Free-Game-Dev-Assets

Todos los issues de TMHSDigital/Free-Game-Dev-Assets

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.