Là nhà phát triển web, chúng ta luôn phải xử lý hình ảnh và trong hầu hết các trường hợp, trình duyệt rất tốt trong việc điều chỉnh tỷ lệ hình ảnh cho phù hợp với ranh giới của thiết kế trang web, đồng thời vẫn giữ được hình ảnh đẹp mắt. Nhưng điều gì sẽ xảy ra khi bạn muốn kiểm soát cách trình duyệt điều chỉnh tỷ lệ hình ảnh trên trang của mình?
Chrome 41 (Phiên bản thử nghiệm vào tháng 1 năm 2015) giới thiệu một thuộc tính CSS mới image-rendering: pixelated (Spec) giúp bạn kiểm soát thêm một chút về cách trình duyệt hiển thị hình ảnh được tăng tỷ lệ.
Thuộc tính CSS image-rendering và giá trị pixelated rất thú vị vì chúng tắt tính năng điều chỉnh theo tỷ lệ mượt mà tiêu chuẩn của trình duyệt (thường là nội suy song tuyến tính) và thay thế bằng một thuật toán điều chỉnh theo tỷ lệ khác (thường là thuật toán láng giềng gần nhất trong hầu hết các trường hợp) khi đổi kích thước hình ảnh.
Hãy tưởng tượng bạn có một hình ảnh có kích thước 2×2 pixel và bạn đã tăng tỷ lệ hình ảnh đó lên 100×100 pixel, trình duyệt sẽ hiển thị hình ảnh đó theo cách không làm cho hình ảnh đó trông bị khối. Chẳng hạn như:
Có nhiều trường hợp bạn không muốn hành vi làm mượt này và thay vào đó, hãy sử dụng một phương thức giúp giữ lại hình ảnh thể hiện chính xác hơn.
Để có được hiệu ứng này, bạn chỉ cần áp dụng image-rendering: pixelated; cho hình ảnh như sau.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Dùng thử bản minh hoạ. Như bạn có thể thấy, việc áp dụng thuộc tính này có ảnh hưởng đáng kể đến cách hình ảnh được kết xuất.
Bạn có thể áp dụng thuộc tính này ở nhiều nơi:
<img>phần tử<canvas style="image-rendering: pixelated">phần tử- Mọi phần tử có thuộc tính
background-image
Tôi vẫn chưa hiểu. Tôi nên sử dụng tính năng này ở đâu?
Nếu chỉ đăng ảnh trên trang web, thì có thể bạn không muốn làm như vậy.
Một trường hợp sử dụng tuyệt vời là trò chơi, bạn thường xuyên phải điều chỉnh tỷ lệ canvas để vừa với kích thước màn hình. Trước thuộc tính CSS này, trình duyệt sẽ nội suy canvas theo cách khiến canvas trông bị mờ (xem bên dưới [sic]).
Nếu bạn đang xây dựng một công cụ bán vé máy bay hoặc một ứng dụng hiển thị mã QR, thì thường người dùng sẽ muốn ứng dụng đó hiển thị toàn màn hình để dễ quét hơn. Vì vậy, việc kiểm soát quá trình kết xuất hình ảnh là rất quan trọng.
Nếu bạn quan tâm đến việc triển khai, hãy xem Vấn đề 317991 (vấn đề này vẫn đang mở để triển khai giá trị cạnh sắc nét. Đánh dấu vấn đề bằng dấu sao để theo dõi quá trình triển khai).