확대할 때 Chrome에서 작은 이미지가 흐려지는 것을 방지하는 방법은 무엇입니까?

Question

픽셀 아트를 가까이서 보려고 하면 크롬이 이미지를 흐리게 하기 시작합니다. 이미지를 확대해도 픽셀이 흐려지지 않고 선명하게 디테일하게 볼 수 있도록 만들고 싶습니다.

Answer 1

업데이트

의견에 따르면 :

이제 Firefox에서 가능합니다: image-rendering:optimSpeed; – 아르노

원래의

이는 브라우저에서 직접 불가능합니다.

스무딩은 알고리즘을 통해 적용되며 대부분의 최신 브라우저는 이와 유사하며 IE, Firefox 및 Chrome에서는 이 기능을 끌 수 있는 방법이 없습니다.

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

다른 옵션도 있습니다. 위 링크의 2가지 주요 사항은 다음과 같습니다. 둘 다 Chrome 애드온입니다.

이미지 크기 조정기
이미지 확대

당신은브라우저의 아래 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+                */
    }

Answer 2

2019년에는 다음 CSS를 사용하여 가능합니다.image-rendering: pixelated;

Answer 3

스무딩을 비활성화하기 위해 이 북마크를 만들었습니다. 나는 북마크바에 링크를 유지하고 일반적으로 픽셀 아트나 페이지의 안티앨리어싱을 비활성화하고 싶을 때 이 링크를 탭합니다.클래식 게임:

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);
  }
})()

북마크릿이 매력적인 이유는 확장 프로그램에 "방문하는 웹 사이트의 모든 데이터 읽기 및 변경" 권한을 부여하는 것을 좋아하지 않기 때문입니다.

Answer 4

이미지에 GPU 렌더링을 사용할 때 Chrome 및 Firefox에서 몇 가지 문제를 발견했습니다. 예:

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

다음 내용이 포함된 CSS 문이 있는 경우 해당 문을 제거하고 이미지 품질이 향상되는지 확인하세요.