image-rendering:pixelated

網頁開發人員一直都在使用圖片,在大多數情況下,瀏覽器特別擅長根據網站設計的邊界縮放圖片,同時也能美化圖片。但如果想控制瀏覽器縮放網頁上圖片的方式,該怎麼辦?

Chrome 41 (Beta 版於 2015 年 1 月推出 Beta 版) 推出了新的 CSS 屬性 image-rendering: pixelated (規格),可讓您進一步控管瀏覽器轉譯放大圖片的方式。

CSS 屬性 image-renderingpixelated 值非常有趣,因為這類屬性會關閉瀏覽器的標準平滑縮放功能 (通常是雙線性內插),並在調整圖片大小時,以其他縮放演算法 (通常最接近鄰點) 取代。

假設您有一張 2×2 像素的圖片,但是當您將圖片放大至 100×100 像素時,瀏覽器會將其算繪為不像標誌。類似這樣:

流暢算繪

在許多情況下,您都不希望這樣的順暢行為,而是改用保留更準確圖片呈現方式的方法。

如要取得此效果,只要將 image-rendering: pixelated; 套用至圖片即可,如下所示。

<img
    style="image-rendering: pixelated;"
    width="100" height="100"
    src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
像素化算繪

立即試用您可以看到屬性的應用程式對圖片算繪方式有重大影響。

這個屬性可套用在許多位置:

  • <img> 個元素
  • <canvas style="image-rendering: pixelated"> 個元素
  • 任何具有 background-image 屬性的元素

我還是沒聽清楚,該在哪裡使用此功能?

如果您只是在自己的網站上顯示相片,大概不會想要這樣做。

遊戲是很好的使用案例,您經常需要放大畫布,以符合螢幕大小。在此 CSS 屬性之前,瀏覽器會以看起來模糊的方式插入畫布 (請見下方的 [sic]。

如果您正在製作航空公司售票工具,或是應用程式可以顯示QR code,使用者常會希望以全螢幕顯示,方便瀏覽,因此重要的是,控管圖片算繪方式是非常重要的。

如果您想查看導入結果,請參閱問題 317991 (這個選項會保持開啟,讓您瞭解如何導入最尖端的值)。為問題加上星號,以便追蹤實作情形)。