จะป้องกัน Chrome จากการเบลอภาพขนาดเล็กเมื่อซูมเข้าได้อย่างไร?

เมื่อฉันพยายามที่จะดูภาพพิกเซลอย่างใกล้ชิดโครเมี่ยมเริ่มเบลอภาพ ฉันต้องการทำให้มันเป็นแบบนั้นถึงแม้เมื่อซูมเข้ามาฉันก็ยังสามารถเห็นพิกเซลในรายละเอียดที่คมชัดไม่ใช่เบลอ

ปรับปรุง

ตามความเห็น:

ตอนนี้สามารถทำได้ใน Firefox: image-rendering: optimizationSpeed; - Arnaud

เป็นต้นฉบับ

ไม่สามารถทำได้โดยตรงจากเบราว์เซอร์

การปรับให้เรียบนั้นใช้ผ่านอัลกอริธึมและเบราว์เซอร์สมัยใหม่ส่วนใหญ่จะคล้ายกันและใน IE, Firefox และ Chrome ไม่มีวิธีใดที่จะปิดการใช้งานได้

http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE

คุณมีตัวเลือกอื่น ๆ ต่อไปนี้เป็น 2 ประเด็นหลักจากลิงก์ด้านบนทั้งสองเป็นส่วนเสริมของ Chrome

image-resizer
imagezoom

คุณสามารถใช้รหัส CSS ด้านล่างในเบราว์เซอร์ซึ่งจะปิด!

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: pixelated;                 /* Chrome as of 2019   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }

ฉันสังเกตเห็นปัญหาบางอย่างกับ Chrome และ Firefox เมื่อใช้การเรนเดอร์ GPU กับภาพ เช่น:

img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

หากคุณมีคำสั่ง CSS ต่อไปนี้ลองลบออกและดูว่าคุณภาพของภาพของคุณเพิ่มขึ้นหรือไม่

ฉันทำ bookmarklet นี้เพื่อปิดการปรับให้เรียบ ฉันจะเก็บลิงค์ไว้ในแถบที่คั่นหน้าของฉันและแตะเมื่อฉันต้องการปิดการลดรอยหยักบนหน้าเว็บโดยปกติแล้วจะเป็นพิกเซลอาร์ตหรือเกมคลาสสิค :

javascript:(function pixelate() {
  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
})()

เหตุผลที่ bookmarklet น่าสนใจคือฉันไม่ชอบให้สิทธิ์ในการ "อ่านและเปลี่ยนแปลงข้อมูลทั้งหมดของคุณบนเว็บไซต์ที่คุณเยี่ยมชม" ส่วนขยาย

เป็นไปได้ในปี 2019 ด้วย CSS ต่อไปนี้: image-rendering: pixelated;