因為網頁程式開發人員經常需要處理圖片，在大部分的情況下，瀏覽器都很適合將圖片縮放至符合網站設計的邊界，同時保持圖片相當美觀。不過，如果您想控制瀏覽器如何縮放網頁上的圖片，該怎麼做呢？
Chrome 41 (2015 年 1 月的 Beta 版) 推出了新的 CSS 屬性 image-rendering: pixelated (規格)，可讓您進一步控制瀏覽器如何顯示放大的圖片。
CSS 屬性 image-rendering 和值 pixelated 很有趣，因為在調整圖片大小時，它們會關閉瀏覽器的標準平滑縮放功能 (通常是雙線性內插)，並以其他縮放演算法 (在大多數情況下為最近鄰) 取代。
假設您有一個 2 x 2 像素的圖片，並將其放大至 100 x 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 (此問題仍未解決，因為我們正在實作清晰邊緣值)。為問題加上星號來追蹤實作情形)。