☰

Wie kann verhindert werden, dass Chrome kleine Bilder beim Vergrößern unscharf macht?

tag-icon • tag-icon google-chrome images pixels
Wie kann verhindert werden, dass Chrome kleine Bilder beim Vergrößern unscharf macht?

Wenn ich versuche, Pixelkunst aus der Nähe zu betrachten, beginnt Chrome, das Bild zu verschwimmen. Ich möchte es so machen, dass ich die Pixel auch bei vergrößertem Bild noch klar und nicht verschwommen erkennen kann.

Antwort1

Aktualisieren

Gemäß den Kommentaren:

es ist jetzt in Firefox möglich: image-rendering: optimizeSpeed; – Arnaud

Original

Dies ist nicht direkt über den Browser möglich.

Die Glättung wird über einen Algorithmus angewendet und die meisten modernen Browser machen es ähnlich. In Internet Explorer, Firefox und Chrome gibt es jedoch keine Möglichkeit, dies abzuschalten.

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

Sie haben andere Optionen, hier sind die beiden Hauptpunkte aus dem obigen Link, beides sind Chrome-Add-Ons.

Bildgrößenänderung
Bildzoom

Sie können dieCSS-Code unten im Browser, wodurch es ausgeschaltet wird!

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+                */
    }

Antwort2

Ab 2019 mit folgendem CSS möglich:image-rendering: pixelated;

Antwort3

Ich habe dieses Bookmarklet erstellt, um die Glättung zu deaktivieren. Ich behalte den Link in meiner Lesezeichenleiste und tippe darauf, wenn ich das Antialiasing auf einer Seite deaktivieren möchte, normalerweise für Pixelkunst oderklassisches Gaming:

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

Der Grund, warum ein Bookmarklet attraktiv war, liegt darin, dass ich Erweiterungen nicht gern die Berechtigung „alle Ihre Daten auf den von Ihnen besuchten Websites lesen und ändern“ erteile.

Antwort4

Mir sind bei der Verwendung von GPU-Rendering mit Bildern bei Chrome und Firefox einige Probleme aufgefallen. Beispiel:

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

Wenn Sie CSS-Anweisungen mit den folgenden Angaben haben, versuchen Sie, diese zu entfernen und prüfen Sie, ob sich die Bildqualität dadurch verbessert.

verwandte Informationen