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

website: hero poster is 1920x1080 for a 1359x764 render — 36 KiB of image-delivery waste

オープン 初心者向け
  • 何か問題がありますか？
#876 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

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

評価

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

調査の方向性

website/site/src の Hero.astro と Base.astro、および FilmScreen.astro を読んで、ポスターと Open Graph 画像を使用する箇所をたどってください。og:image 用に 1920 × 1080 のアセットを維持しながら、ヒーロー用にポスターのサイズを変更してください。その後、ポスターのサイズ、デスクトップ幅とスマートフォン幅での視覚的な表示、CLS、Lighthouse の画像配信監査を確認してください。

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

説明

Website

Where this comes from

A Lighthouse 13.4.1 report for https://ema.tnsor.network/ (mobile defaults, fetched 2026-10-17 12:29:42Z). Performance 95, CLS 0, LCP 0.4 s. Every image-geometry audit passes — unsized-images and image-aspect-ratio both score 1 with zero items.

The one image finding is delivery, not geometry:

audit: image-delivery-insight
url:            https://ema.tnsor.network/media/hero-poster.webp
totalBytes:     73916
wastedBytes:    36890
reason:         This image file is larger than it needs to be (1920x1080)
                for its displayed dimensions (1359x764).
                Use responsive images to reduce the image download size.

The file and its two consumers

website/site/public/media/hero-poster.webp is 1920 × 1080, 73,916 bytes — the report's totalBytes is that file exactly.

  1. The hero film's <video poster> — Hero.astro:25 passes it to FilmScreen.astro:16 (<video … poster={poster}>). This is the element the audit measured, and the rendered box is 1359 × 764 CSS px on a desktop viewport.
  2. The Open Graph image — Base.astro:17 builds og:image from the same path. Social cards want 1200 × 630 or larger, so this consumer must not shrink.

Proposed change

Split the two consumers and size each for its use:

  • Keep a 1920 × 1080 og-hero.webp for Base.astro's og:image.
  • Add a page-sized poster, around 1440 × 810 (≈ 20–25 KB at the same quality), and point Hero.astro at it.
  • If the poster looks soft on a 2× display, set it from a tiny inline script using devicePixelRatio — the hero already ships one for data-autoplay, so choosing between hero-poster-1440.webp and the 1920 file costs nothing extra. Measure before adding that branch: at 1359 CSS px wide a 1440 file is ~1.06× and may be acceptable.

Do not solve this with a blanket quality drop — the audit's waste is resolution, not encoding.

Acceptance criteria

  • image-delivery-insight no longer reports hero-poster.webp, and the poster request is ≤ 45 KB.
  • CLS stays 0, and the poster renders visually identical at desktop (1359 × 764) and phone widths.
  • og:image still resolves to a 1920 × 1080 asset, and the social-card preview is unchanged.
  • Record the before/after bytes and the Lighthouse audit result in the PR.

Measured candidates

Encoded from the current file with ffmpeg -vf scale=W:-2 -c:v libwebp -quality 82 (matching the source's apparent quality; check visually before committing):

width bytes saving vs 73,916
1920 (current) 73,916 —
1440 40,908 33,008
1280 35,828 38,088

The audit estimated 36,890 B of waste, so either candidate removes essentially all of it. 1440 is the better default: it is 1.06× the desktop render box, so a single file needs no devicePixelRatio branch.

主要言語
TypeScript
スター
829
フォーク
234
平均マージ
18時間 43分
マージ済み PR（30日）
67

環境構築

はじめの一歩

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

cameri/nostream のほかの issue

cameri/nostream の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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