Hướng dẫn

Cùng ảnh màn hình ở hai mật độ điểm ảnh

Chúng tôi chụp giao diện tự tạo ở hai mật độ rồi đo nén PNG và chuyển WebP. Bố cục không đổi trong khi số điểm ảnh chụp thay đổi. Kết quả tách mật độ khỏi định dạng; vùng cắt văn bản thật giúp chọn ảnh màn hình nhẹ hơn mà vẫn đọc rõ.

Cập nhật lần cuối:

Nhóm Bitinz · Cách chúng tôi viết và kiểm tra nội dung

Màn hình trông giống nhưng tệp có thể khác

Ảnh màn hình là ảnh điểm ảnh, không phải giao diện tương tác được chụp. Màn hình mật độ cao có thể ghi nhiều điểm ảnh hơn cho cùng bố cục nhìn thấy. Văn bản sắc nét hơn, nhưng người xem bản nhỏ có thể không cần toàn bộ độ phân giải.

Giải thích về PNG nói chung về ảnh màn hình. Ở đây, giao diện tạo riêng, không có thông tin tài khoản hay thương hiệu bên thứ ba, giúp tách riêng ảnh hưởng. Hướng dẫn tải ảnh chỉ cách kiểm tra khi nơi nhận từ chối tệp.

Chụp có kiểm soát, nén bằng dữ liệu thật

Ngày 2026-10-29, chúng tôi chụp cùng giao diện cục bộ ở 1× và 2×. Gấp đôi chiều rộng lẫn chiều cao tạo 4 lần số điểm ảnh, không đồng nghĩa dung lượng tăng theo tỷ lệ cố định. Cả hai ảnh được Bitinz xử lý ở Cân bằng.

Chúng tôi giữ lại một kết quả nén PNG và một kết quả chuyển sang WebP cho mỗi ảnh chụp. Mỗi thiết lập được chạy 3 lần để kiểm tra các tệp đầu ra giống hệt nhau. Tệp nguồn, mã băm và bản ghi đầu ra đi kèm thí nghiệm; phương pháp chung được trình bày trong chính sách biên tập.

Tách riêng mật độ và định dạng

So sánh PNG với WebP ở cùng mật độ trước. Sau đó so sánh hai nguồn để thấy chi phí riêng của việc ghi thêm điểm ảnh.

ẢnhĐiểm ảnhĐầu raMức nénTrướcSauGiảm được
interface-1x.png800 × 500 pxPNGCân bằng42.8 KB13.3 KB68.8%
interface-1x.png800 × 500 pxWebPCân bằng42.8 KB11.1 KB74.1%
interface-2x.png1600 × 1000 pxPNGCân bằng101.5 KB30.6 KB69.9%
interface-2x.png1600 × 1000 pxWebPCân bằng101.5 KB27.6 KB72.8%

Bitinz · 1 KB tương đương 1000 byte.

Nén ảnhGiảm dung lượng tệp JPG, PNG và WebP mà vẫn giữ định dạng gốc, xử lý hàng loạt và miễn phí.Nén ảnh

Văn bản là vùng cần kiểm tra

Chi tiết PNG nguồn

Chữ và đường giao diện gốc trong vùng cắt ảnh màn hình

Chi tiết PNG đã nén

Cùng chữ và đường giao diện sau khi nén PNG
Cùng vùng văn bản trong PNG nguồn và đầu ra PNG được nén thật, không chỉnh sửa.

Chữ nhỏ, nét mảnh và vùng đổ bóng nhẹ cần chú ý hơn nền trống. Kiểm tra vùng cắt ở kích thước đầy đủ, rồi xem ảnh ở chiều rộng người đọc thực sự gặp.

WebP nhỏ hơn hữu ích nếu nơi nhận chấp nhận và chữ còn rõ. Nếu bắt buộc PNG, hãy so sánh trực tiếp PNG đã nén. Giữ văn bản trên trang dưới dạng chữ thật khi không cần ảnh chụp.

Cho người đọc thấy điều cần thiết

Trước khi tải lên, cắt phần xung quanh không liên quan trong trình sửa ảnh. Đây là quyết định nội dung riêng với nén: giảm phân tâm lẫn điểm ảnh. Giữ ngữ cảnh cần hiểu hướng dẫn, như nút liên quan và nhãn gần nó.

Trang tài liệu có thể cần ảnh mật độ cao sắc nét để phóng lớn. Bản xem trong trò chuyện có thể chỉ cần vùng liên quan. Thử nơi nhận thật thay vì đưa mọi ảnh về cùng kích thước.

Dùng công cụ nén PNG khi cần định dạng PNG hoặc thử PNG sang WebP trên trang của bạn. So sánh cả hai với nguồn; chọn theo độ dễ đọc và định dạng nơi nhận hỗ trợ.

Chuẩn bị ảnh màn hình dễ đọc

  1. Chụp đúng giao diện và ngữ cảnh người đọc cần.
  2. Giữ PNG nguồn và nén một bản sao.
  3. So sánh chữ và nét mảnh ở kích thước đầy đủ và chiều rộng hiển thị dự kiến.
  4. Dùng tệp nhẹ nhất đạt yêu cầu trong định dạng nơi nhận hỗ trợ.

Câu hỏi thường gặp

Ảnh màn hình 2× có gấp đôi số điểm ảnh không?
Nếu cả chiều rộng và chiều cao đều gấp đôi, ảnh có 4 lần số điểm ảnh. Tỷ lệ dung lượng còn phụ thuộc nội dung và định dạng.
Có nên luôn chuyển ảnh màn hình sang WebP?
Dùng WebP khi nơi nhận hỗ trợ và chữ còn rõ. Giữ PNG khi bắt buộc hoặc khi PNG đem lại kết quả hữu ích hơn.
Bitinz có cắt hay đổi kích thước ảnh màn hình không?
Cắt và đổi kích thước là bước chuẩn bị trong trình sửa ảnh. Bitinz xử lý tệp đúng kích thước bạn tải lên.

Công cụ trong bài này

Nguồn tham khảo

  1. Bitinz: Image lab: sources, measurements and output hashes (2026-10-29)
  2. MDN: Window: devicePixelRatio property