Mật độ điểm ảnh màn hình là gì?
Còn gọi: device pixel ratio, @2x @3x, device pixel ratio, dpr, retina, màn hình retina
Device pixel ratio (DPR) là tỉ lệ giữa số điểm ảnh vật lý của màn hình và số pixel CSS; màn hình có DPR 2 dùng 2 × 2 điểm ảnh thật để hiển thị một pixel CSS, cho hình sắc nét hơn.
Hiểu kỹ hơn
Đây là lý do khi xuất ảnh cho web và app, designer hay xuất các bản @1x, @2x, @3x. Ví dụ icon thiết kế 24 × 24 px trong Figma sẽ cần ảnh 48 × 48 cho màn hình 2x và 72 × 72 cho màn hình 3x; nếu chỉ có bản 1x, icon sẽ mờ trên iPhone. Apple gọi màn hình mật độ cao là Retina; nhiều iPhone hiện nay có DPR 3, phần lớn laptop Mac có DPR 2. Với icon và logo, dùng SVG giúp sắc nét ở mọi mật độ mà không cần nhiều bản. Với ảnh chụp, dùng srcset để trình duyệt chọn bản phù hợp, tránh bắt màn hình 1x tải ảnh 3x nặng gấp nhiều lần. Trong Figma, phần Export cho phép thêm nhiều tỉ lệ cùng lúc.
