Hình ảnh Retina: Hiển thị đồ họa sắc nét trên màn hình High-DPI

Cập nhật lần cuối: June 28, 2026

Màn hình Retina và màn hình DPI cao chứa nhiều pixel hơn trong cùng một không gian vật lý, do đó một hình ảnh được thiết kế cho màn hình tiêu chuẩn sẽ trông mềm và bị vỡ hạt trên các màn hình này. Việc hiển thị hình ảnh sắc nét trên những màn hình này đòi hỏi phải chuẩn bị các phiên bản độ phân giải cao hơn và thông báo cho trình duyệt biết khi nào nên sử dụng chúng. Hướng dẫn này đề cập đến quy trình làm việc 2x và 3x, cú pháp srcset giúp cung cấp tệp phù hợp, và sự cân bằng giữa độ sắc nét với trọng lượng trang web.

Câu trả lời nhanh: Làm thế nào để làm hình ảnh sắc nét trên màn hình retina?

Tạo một phiên bản của hình ảnh ở kích thước pixel hiển thị gấp đôi (và đối với điện thoại, gấp ba) lần, sau đó sử dụng thuộc tính srcset để cung cấp cả hai phiên bản. Trình duyệt chỉ tải tệp độ phân giải cao trên các màn hình có thể hiển thị nó, vì vậy các màn hình tiêu chuẩn sẽ không tải thêm byte nào. Một bức ảnh được hiển thị rộng 400 pixels cần nguồn 800-pixel (2x) cho retina. Xuất cả hai ở mức nén phù hợp — tệp 2x lớn hơn nhưng không gấp đôi, bởi vì hiệu suất nén cải thiện theo độ phân giải.

Màn hình retina hoặc màn hình DPI cao là gì?

Màn hình retina là một thuật ngữ tiếp thị dùng để chỉ màn hình có mật độ pixel đủ cao đến mức mắt người không thể phân biệt được các pixel riêng lẻ ở khoảng cách xem bình thường. Apple là đơn vị đặt ra khái niệm này, nhưng nó áp dụng cho hầu hết các điện thoại, máy tính bảng và laptop hiện đại. Thước đo thực tế là tỷ lệ pixel thiết bị (DPR) — số lượng pixel vật lý đại diện cho một pixel CSS.

• Màn hình 2x cần gấp đôi số pixel tuyến tính (gấp bốn lần tổng thể) để trông sắc nét.
• Màn hình điện thoại 3x cần gấp ba số pixel tuyến tính.
• Các màn hình tiêu chuẩn 1x tải ảnh cơ bản và không lãng phí gì cả.

Hướng dẫn của Mozilla về tỷ lệ pixel thiết bị tài liệu hóa cách các trình duyệt báo cáo và sử dụng DPR, đây là nền tảng của mọi chiến lược hình ảnh retina.

Làm thế nào để tạo phiên bản hình ảnh 2x và 3x?

Hãy bắt đầu từ một nguồn có độ phân giải cao và resize nó xuống từng mục tiêu thay vì phóng to một tệp nhỏ. Một bức ảnh dành cho vị trí hiển thị rộng 400 pixels cần phiên bản 400px (1x) và 800px (2x), và phiên bản 1200px (3x) cho điện thoại.

1. Bắt đầu từ nguồn có kích thước ít nhất bằng mục tiêu lớn nhất của bạn (3x).
2. Resize xuống độ rộng 1x, 2x và 3x.
3. Compress từng phiên bản — các tệp 2x và 3x nén tốt hơn trên mỗi pixel.
4. Xuất dưới dạng WebP để có các tệp chất lượng cao nhỏ nhất.
5. Phục vụ tất cả các phiên bản và để trình duyệt tự chọn.

• Không bao giờ phóng to một hình ảnh nhỏ lên 2x — nó vẫn mềm và chỉ nặng hơn.
• Tệp 2x thường ít hơn gấp đôi byte của 1x do khả năng nén tốt hơn.
• Các phiên bản 3x quan trọng nhất đối với điện thoại có màn hình nhỏ, dày đặc.

Làm thế nào để phục vụ đúng phiên bản bằng srcset?

Thuộc tính srcset trên thẻ <img> cho trình duyệt biết nên tải tệp nào dựa trên DPR của màn hình. Trình duyệt xử lý việc lựa chọn, vì vậy bạn chỉ cần cung cấp các tùy chọn và cú pháp.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Văn bản thay thế mô tả"
  width="400" height="300"
/>

• Các mô tả 1x, 2x, 3x ánh xạ các tệp đến tỷ lệ pixel thiết bị.
• Trình duyệt chỉ tải phiên bản khớp với màn hình.
• Luôn bao gồm width và height để ngăn chặn layout shift.
• Thuộc tính src là phương án dự phòng cho các trình duyệt cũ hơn.

Đối với hình ảnh đáp ứng (responsive images) cũng thay đổi kích thước theo chiều rộng màn hình, hãy kết hợp srcset với thuộc tính sizes và các mô tả độ rộng (400w, 800w) thay vì các mô tả DPR. Hướng dẫn về hình ảnh đáp ứng đề cập đến mẫu nâng cao hơn này, và hướng dẫn SEO hình ảnh giải thích cách các hình ảnh sắc nét, có kích thước chính xác cũng giúp cải thiện hiệu suất tìm kiếm.

Khi nào nên sử dụng SVG thay vì raster?

Đối với logo, biểu tượng và minh họa có hình dạng phẳng, bạn có thể bỏ qua toàn bộ vấn đề 2x/3x bằng cách sử dụng SVG. Đồ họa vector co giãn vô hạn mà không bị giảm chất lượng — cùng một tệp SVG sắc nét trên màn hình 1x và điện thoại 3x, bởi vì nó được vẽ từ toán học chứ không phải lưu trữ dưới dạng pixel.

SVG là câu trả lời đúng bất cứ khi nào hình ảnh được tạo thành từ các hình dạng thay vì chi tiết nhiếp ảnh. Sự đánh đổi là SVG cần được tối ưu hóa — siêu dữ liệu không sử dụng và rác của trình chỉnh sửa làm chúng phình to — và hướng dẫn SVG sang PNG đề cập đến quy trình làm việc khi bạn thực sự cần một phương án dự phòng raster cho môi trường không thể hiển thị vector. Đối với một trang web thương hiệu có logo ở tiêu đề, SVG loại bỏ hoàn toàn câu hỏi retina đối với phần tử đó.

Kiểm tra hình ảnh retina của bạn

Tạo các tệp chỉ là một nửa công việc; xác minh chúng thực sự tải đúng cách là nửa còn lại. Một vài kiểm tra sẽ xác nhận rằng thiết lập đang hoạt động thay vì âm thầm phục vụ tệp sai.

1. Mở trang trên thiết bị retina hoặc đặt DPR của trình duyệt thành 2x trong dev tools.
2. Kiểm tra phần tử hình ảnh và xác nhận currentSrc được tải là tệp 2x hoặc 3x.
3. Chuyển sang DPR 1x và xác nhận nó tải tệp 1x thay thế.
4. Kiểm tra tab network để xác minh chỉ một phiên bản được tải xuống cho mỗi màn hình.
5. Xem ở mức 100% trên màn hình retina và xác nhận rằng hình ảnh sắc nét, không mềm.

Tính năng ghi đè tỷ lệ pixel thiết bị trong dev tools của trình duyệt cho phép bạn kiểm tra mà không cần thiết bị vật lý, mặc dù màn hình retina thực tế là bằng chứng cuối cùng. Một lỗi phổ biến là lỗi cú pháp markup trong srcset khiến trình duyệt dự phòng về src cơ bản, trông mềm trên retina mà không báo lỗi. Tab network sẽ bắt được điều này ngay lập tức — nếu bạn thấy tệp 1x tải trên màn hình 2x, thì srcset chưa được kết nối đúng cách.

Cân bằng độ sắc nét và trọng lượng trang

Cái bẫy với hình ảnh retina là việc phục vụ các tệp độ phân giải cao cho mọi màn hình, điều này làm tăng gấp đôi hoặc gấp ba trọng lượng trang đối với người dùng không thể thấy sự khác biệt. Phương pháp srcset tránh được điều này, nhưng chỉ khi bạn thực sự tạo ra các phiên bản nhỏ hơn và tham chiếu chúng. Một tệp 3x duy nhất phục vụ cho tất cả mọi người là lỗi phổ biến nhất.

Hướng dẫn web.dev về hình ảnh đáp ứng tài liệu hóa tác động hiệu suất của việc làm đúng điều này, và hướng dẫn Core Web Vitals kết nối trọng lượng hình ảnh trực tiếp với chỉ số LCP ảnh hưởng đến xếp hạng. Mục tiêu là độ sắc nét ở nơi cần thiết và sự tiết chế ở mọi nơi khác — để trình duyệt tự chọn, và tạo ra mọi phiên bản để nó có thứ tốt để lựa chọn.

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

Làm thế nào để làm hình ảnh sắc nét trên màn hình retina?

Phục vụ các phiên bản 2x (và tùy chọn 3x) của hình ảnh raster ở kích thước hiển thị, sử dụng srcset để trình duyệt tự chọn tệp phù hợp theo tỷ lệ pixel thiết bị. Hình ảnh 1x trên màn hình retina trông mềm; biến thể 2x khôi phục độ sắc nét.

Tôi có cần hình ảnh 2x cho mọi đồ họa không?

Đối với các đồ họa sắc nét và ảnh anh hùng (hero photos), là cần — màn hình retina sẽ hiển thị sự mềm mại nếu không có. Đối với hình ảnh trang trí hoặc dưới phần cuộn, một tệp 1x duy nhất thường là đủ. Phục vụ cả hai bằng srcset để thiết bị không phải retina không tải xuống tệp lớn.

Khi nào tôi nên sử dụng SVG thay vì raster 2x?

Đối với logo, biểu tượng và đồ họa phẳng, có — SVG độc lập với độ phân giải và giữ sắc nét ở bất kỳ kích thước nào mà không cần thêm tệp. Đối với ảnh chụp, raster (với các biến thể 2x) vẫn là lựa chọn đúng đắn. Xem hướng dẫn SVG sang PNG.

Tôi phục vụ hình ảnh retina như thế nào?

Sử dụng srcset với nguồn 1x và 2x (và tùy chọn 3x), để trình duyệt tự chọn theo tỷ lệ pixel thiết bị. Gửi tệp 1x làm src mặc định để các trình duyệt cũ hơn dự phòng một cách sạch sẽ. Trình duyệt chỉ tải biến thể nó cần.

srcset có làm chậm trang không?

Không — trình duyệt chỉ tải phiên bản nó cần, vì vậy màn hình nhỏ nhận được tệp nhỏ. Nếu không có srcset, mọi thiết bị đều tải xuống tệp lớn nhất. srcset tiết kiệm byte, nó không thêm chúng vào.