Pixel Perfect nghĩa là gì?

Thời gian qua thuật ngữ Pixel Perfect được sử dụng rất nhiều trong các thiết kế trên Driblle, Behance,… Vậy đã bao giờ bạn thắc mắc Pixel Perfect là gì?

Bài viết được mình dịch từ bài What does ‘pixel perfect’ mean? trên trang Quora và theo một số điểm mình hiểu.

Pixel Perfect được định nghĩa khi thiết kế tập trung vào từng chi tiết, từng điểm ảnh, đối lập với kiểu thiết kế sử dụng các công nghệ chống răng cưa (anti aliasing) và các công cụ nén ảnh (compression artifacts).

Lấy ví dụ với việc thiết kế một button trên Photoshop.

Khi bạn vẽ một button trong PTS, đó được coi như một dạng Pixel Perfect (dĩ nhiên button đó chưa chỉnh sửa co giãn hay phóng to). Và sau đó, bạn chỉnh sửa button đó (phóng to hay thu nhỏ), dù chỉ một chút, lúc này hãy để ý đến kết quả của các pixel. Sẽ xuất hiện kha khá các điểm khử răng cưa và các điểm ảnh bị nhòe màu, điều này có thể do thuật toán nội suy và khư răng cưa cho hình và điểm ảnh. Và dĩ nhiên button của bạn lúc này sẽ không thể sắc nét được như nó đã từng lúc đầu.

Tuy nhiên như đã đề cập ở trên, ngoài do việc sử dụng công nghệ chống răng cưa, việc không đạt được Pixel Perfect còn do một yếu tố khác: Công cụ nén ảnh (compression artifacts).

Tiếp tục với ví dụ trên, sau khi vẽ đươc 1 button pixel perfect ở trên, bạn quyết định xuất file sang dạng JPEG và sử dụng công cụ nén ảnh JPEG của Photoshop. Như bạn có thể thấy, hình JPEG sau khi xuất file ra có những pixel nhòe màu và không sắc nét như hình pixel perfect ban đầu.

Hình button trên được xử lý theo Pixel Perfect, như bạn có thể thấy: các điểm ảnh sắc nét, sạch sẽ, màu sắc rõ rằng không bị nhòe màu. Không có anti-aliasing, không bị giảm chất lượng do công cụ nén ảnh. Mọi chi tiết rõ ràng, sắc sảo, được chủ định trước.

Bạn có thể áp dụng pixel perfect với các chi tiết, yếu tố trong thiết kế của mình, làm cho các góc tròn (corner-border) cong và sạch hơn, đỡ thô hơn. Như bạn có thể thấy với các ví dụ ở trên, button với pixel perfect cho người dùng cảm giác tốt hơn so với các button khác.

Về tổng quát, nếu không quá kỹ tính, bạn sẽ không để ý quá nhiều đến sự khác biệt giữa các button (hay rộng hơn là các yếu tố khác) trong một sản phẩm (như website hay ứng dụng). Tuy nhiên nếu bạn đã từng sử dụng 2 ứng dụng mobile, 1 không kiểm soát kỹ theo Pixel Perfect và 1 sử dụng chặt chẽ có chủ đích Pixel Perfect, bạn sẽ để ý ngay đến điểm khác biệt rõ ràng. Bạn có thể “chẳng hiểu sao lại thế” tuy nhiên rõ ràng là ứng dụng với Pixel Perfect nhìn “đẹp hơn hẳn”.