Bild im Browser bei 100 % ist verpixelt, Bild erstellen 200 % und halbe Größe skalieren ist scharf

Wie kann ich ein Bild in 100 % Größe im Web hosten und ein scharfes Bild beibehalten? Führt der Webbrowser Downsampling meiner Bilder durch?

Wenn ich ein Bild mit 100 % Größe (z. B. 1000 Pixel breit) erstelle und es natürlich auf einer Website anzeige, ist das Bild etwas verschwommen/verpixelt. Wenn ich jedoch dasselbe Bild mit 200 % (2000 Pixel breit) erstelle und mit 50 % anzeige, ist das Bild scharf. Das Endergebnis ist, dass beide Bilder 1000 Pixel breit sind, aber ein Bild verschwommen und das andere scharf ist. Wir haben mit Auflösung und dpi experimentiert und die Ergebnisse bleiben gleich.

Ich brauche das Bild zu 100%, um 1000px breit zu sein.

Dies ist das Bild, das mit 100 % erstellt und im Browser mit 100 % angezeigt wirdGeben Sie hier die Bildbeschreibung ein

Dies ist das Bild, wenn ich es mit 200 % erstelle und es im Browser mit 50 % anseheGeben Sie hier die Bildbeschreibung ein

Ich kann das Problem nicht replizieren. Bilder werden in einem Browser normalerweise in ihrer ursprünglichen Größe angezeigt, es sei denn, Ihr System zoomt sie. Überprüfen Sie Ihren Systemzoom. Einige Systeme mit hochauflösenden Displays sind standardmäßig auf Zoom eingestellt.
Es scheint auf allen Computern und Browsern verpixelt zu sein. Die Browser sind auf 100%. Es ist auch kein CSS beteiligt. Ich habe auch mehrere Dateiformate und Einstellungen ausprobiert und nichts ändert die Ergebnisse.
Versuchen Sie Breite und Höhe im img-Tag zu erzwingen: <img src="sharp.png" height="1000" width="1000"> und stellen Sie sicher, dass Ihr Bild 72 px/in groß ist.
Ich habe den Beitrag bearbeitet, um näher zu erklären, was passiert.
Ich denke, Sie sehen es als pixelig an, weil diagonale Linien auf Pixeldisplays pixelig sind. Das waren sie schon immer. Anti-Aliasing (leichte Unschärfe/Schattierung) sorgt für viel Zacken. Wenn Buchstabenformen mit 72 ppi gerastert werden, haben sie keine perfekt glatten Linien. Ihre Methode, eine höhere Auflösung zu verwenden und in kleinerer Größe anzuzeigen, ist effektiv und funktioniert in vielen Situationen. Die Anzeige-Engine verwendet die höhere Auflösung, um ein besseres Anti-Aliasing Ihrer Buchstabenformen zu erzielen. Außerdem ermöglicht es einen höheren Zoom, bevor Zacken erscheinen.
Ich kann nicht sagen, dass ich das jemals gesehen habe ... es sei denn, Sie speichern das Bild mit etwa 72 ppi und verwenden einen Retina- oder 4K-Monitor. In diesem Fall vergrößert das Display selbst das Bild, was zu Qualitätsverlusten führt. Bei einer Einsparung von 200 % skaliert das Display weniger, um es an seine Pixeldichte anzupassen, was zu einer besseren Darstellungsqualität führt. Aus diesem Grund müssen Bildschirme mit hoher Pixeldichte (Retina/4k/5k) alle @2x- oder (at)3x-Bilder laden, wenn Sie auf diesen Displays eine gute Qualität wünschen.
es scheint auf allen Monitoren, allen Browsern, allen Einstellungen gleich zu reagieren. Das einzige, was funktioniert, ist, die Breite zu vergrößern und mit CSS zu verkleinern.
Das obere Bild scheint hochskaliert worden zu sein. Das Zoomen des Systems ist doppelt schuld. Ich kann dieses Problem nicht replizieren und kann nicht sicher sein, was Sie getan haben. Ohne Ihren Workflow zu kennen, weiß ich nicht, wie viel Hilfe ich Ihnen geben kann. Können Sie das Originalbild (keine Aufnahme aus dem Browser) mit einer Breite von 1000 teilen?
Nur noch eine Sache, das untere Bild sieht für mich zu 100% perfekt aus. Es passiert also nicht auf allen Computern. Sicher nicht auf meinem, und ich habe ein 4K-Display.
sind das Retina-Bildschirme?
@ DA01 ja, aber ich habe es sowohl mit normalen Monitoren als auch mit Retina versucht.
Nun, das Problem macht Sinn, wenn wir über Retina-Bildschirme sprechen. Ein 100-Pixel-Bild auf einem Retina-Bildschirm mit einer Breite von 100 virtuellen Pixeln wird tatsächlich über 200 reale Pixel breit sein – was bedeutet, dass der Browser die fehlenden Pixel interpolieren muss, die die Unschärfe verursachen. Aber die Verwendung eines 200 Pixel breiten Bildes, das auf 100 virtuelle Pixel eingestellt ist, wird tatsächlich alle 200 realen Pixel auf dem Retina-Bildschirm verwenden – daher das schärfere Aussehen. Ich kann es jedoch nicht erklären, wenn wir nicht über Retina-Bildschirme sprechen.
Das ist die richtige Antwort. Vielen Dank!
@DA01 Möchten Sie dies als Antwort posten? Oder soll ich?
@driverpizza sicher, ich werde einen posten!

Antworten (3)

Basierend auf den Kommentaren scheint das Problem darin zu bestehen, dass Sie diese auf einem Retina-Bildschirm anzeigen.

Apples Retina-Bildschirme haben die tatsächlichen Pixel des Bildschirms von den Pixelabmessungen des Bildes entkoppelt.

Vor Retina-Bildschirmen nahm ein in einen Webbrowser geladenes Bild mit einer Größe von 100 x 100 Pixel genau 100 x 100 Bildschirmpixel ein.

Retina-Bildschirme (was nur Apples Begriff für superhochauflösende Bildschirme ist) hatten ein Problem, bei dem, wenn sie Bilder und Text in „tatsächlicher Pixelgröße“ rendern würden, alles viel zu klein wäre, um lesbar zu sein. Daher versuchen Retina-Bildschirme, Inhalte in der gleichen Größe wie Nicht-Retina-Bildschirme wiederzugeben, verwenden dafür aber mehr Pixel.

Nehmen wir zur einfachen Mathematik an, ein Retina-Bildschirm hat die doppelte Auflösung eines Standardbildschirms.

Wenn Sie ein 100x100-Bild erstellen und es auf einem normalen Bildschirm anzeigen, sieht es scharf aus, da jedes Bildpixel ein Bildschirmpixel belegt.

Auf einem Retina-Bildschirm nimmt dieses 100 x 100-Bild jedoch 200 x 200 Bildschirmpixel ein. Der Browser übersetzt die 100 virtuellen Pixel in 200 reale Pixel. Dazu muss es alle fehlenden Pixel durch Interpolation ausgleichen, was die Unschärfe verursacht, die Sie sehen.

Die Lösung (in diesem Beispiel) besteht darin, Ihre Bilder auf 200 x 200 tatsächliche Pixel zu bringen und sie dann in Ihrem HTML oder Code so anzupassen, dass sie mit 100 x 100 Pixeln gerendert werden.

Auf einem normalen Bildschirm sieht es genauso aus. Die zusätzlichen Pixel werden einfach weggeworfen. Aber auf einem Retina-Bildschirm sieht es jetzt scharf aus, da jedes Bildpixel jetzt ein Bildschirmpixel verwendet.

Ich habe das gleiche Problem und habe festgestellt, dass die Ursache darin besteht, dass ich meine Anzeige auf 125% skaliert eingestellt habe.

In Windows 10 gibt es über „Anzeigeauflösung“ ein Dropdown-Feld für „Ändern der Größe von Text, Apps und anderen Elementen“. Wenn ich es auf 125 % einstelle, sieht das PNG im Photo Viewer gut aus, aber im Browser verschwommen, obwohl das PNG NICHT in HTML skaliert ist.

Wenn ich die Anzeigeskalierung auf 100 % zurückschalte, sieht dasselbe PNG im selben HTML-Dokument im Browser gut aus.

Sie können eine CSS-Regel anwenden, die 100 %-Bilder bei Größenänderung noch schärfer rendert. Wenn Sie beispielsweise ein Bild mit einer natürlichen Breite von 1000 Pixeln haben und die Größe auf 800 Pixel geändert wird, kann der Browser das Bild mit einem leichten Weichzeichnungs-/Anti-Aliasing-Effekt rendern.

CSS

.sharpen {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

In diesem Codebeispiel habe ich Ihr 100%-Bild genommen und es mit der neuen CSS-Regel in der Größe angepasst: https://codepen.io/doppl3r/pen/YLdQxx?editors=1100

Der rechte Bildtext sollte schärfer erscheinen. Um dies zu beweisen, ändern Sie das max-widthvon 400pxin150px

Mir ist bewusst, dass Code dies beheben kann, aber wenn ich dieses Bild für einen Kunden bereitstelle, ist das keine Option. Ich bin verwirrter, warum ein Bild mit einer Größe von 100% keine hohe Qualität anzeigt.
Bild im Browser bei 100 % ist verpixelt, Bild erstellen 200 % und halbe Größe skalieren ist scharf
AntwortenHierDatenschutz-Bestimmungen1y, 0v