Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#876 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
84/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend, performance

Hướng nghiên cứu

Đọc website/site/src's Hero.astro và Base.astro, cùng với FilmScreen.astro, để theo dõi các thành phần sử dụng áp phích và hình ảnh Open Graph. Thay đổi kích thước áp phích cho hero, đồng thời giữ lại tài nguyên 1920 × 1080 cho og:image; sau đó kiểm tra kích thước áp phích, cách hiển thị trực quan ở độ rộng máy tính và điện thoại, CLS và kiểm tra Lighthouse về phân phối hình ảnh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
829
Fork
234
Merge trung bình
22 giờ 43 phút
Pull request đã merge (30 ngày)
52

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của cameri/nostream

Tất cả issue của cameri/nostream

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.