Tạo nhanh ảnh 1x, 2x, 3x và giải thích tại sao cần chúng trong Swift

Bài đăng này đã không được cập nhật trong 3 năm

Đặt vấn đề

Khi bạn mở Asset Catalog trong Xcode, bạn chắc chắn sẽ nhìn thấy yêu cầu hình ảnh 1x, 2x, 3x. Điều đó có ý nghĩa gì? Các mẫu đời Iphone và Ipad có độ phân giải màn hình và kích thước màn hình khác nhau, thế UI được render ra có bị ảnh hướng gì không?

Ở bài viết này, các bạn sẽ được tìm hiểu :

Sự khác biết giữa points và pixels
Khi nào dùng tỉ lệ ảnh 1x, 2x, 3x
Cách đặt tên với @2x, @3x
Cách giữ chất lượng hình ảnh với các màn hình kích thước và độ phân giải khác nhau
Recommended tools tạo nhanh ảnh 1x, 2x, 3x

Pixcels and Points

Các đời Iphone khác nhau sẽ có kích thước và độ phân giải màn hình khác nhau

So sánh Iphone 11 (6.1" - 828 x 1792) và IPhone 11 Pro Max (6.5" - 1242 x 2688). Chả cần có kiến thức gì thì nhìn bằng mắt, bạn có thể thấy màn hình Iphone 11 Pro max cho hình ảnh chi tiết và sắc nét hơn. Lí do vì 2 màn hình này đều có tỉ lệ height/width bằng nhau nhưng tỉ 6.1/6.5 lớn hơn hiều so với 828/1242. Chứng tỏ trên cùng một không gian, các màn hình khác nhau có số lượng pixel là khác nhau hay pixels-per-inch (PPI) khác nhau

Points: Kích thước các points là bằng nhau, màn hình lớn hơn thì nhiều point hơn
Pixcels: Mỗi point sẽ chứa số lượng pixcels khác nhau, càng nhiều pixcels trong 1 point thì chi tiết càng rõ và nét hơn. Mỗi đời Iphone sẽ có point ứng với 1x1, 2x2, 3x3 pixels

Bạn chỉ cần cung cấp độ phân giải khác nhau của 1 bức ảnh, iOS sẽ tự động chọn lựa ảnh phù hợp với độ phân giải của từng màn hình

Tỉ lệ ảnh 1x, 2x và 3x

Trăm nghe không bằng mắt thấy :v

Hàng trên: Khi chỉ dùng pixel để nói về độ phân giải, đây là pixels tuyệt đối, mỗi pixel có kích thước bằng nhau, nhiều pixels hơn thì ảnh lớn hơn.
Hàng dưới: Khi dùng points và pixels. Với kích thước ảnh bằng nhau, nhưng point từ trái qua phải chứa số lượng pixels tăng dần, từ đó cho chất lượng hình ảnh rõ nét và chi tiết hơn. 1x, 2x và 3x ra đời từ đây, lần lượt ứng với 1x1, 2x2, 3x3 pixels

Thêm 1 VD thực tế nữa nhé (^.=)

Thể hiện cùng 1 tấm ảnh cùng kích thước trên iphone5 , iphone 11 và iphone 12