Bild ist im Browser bei 100% verschwommen, aber nicht in Photoshop!

Ich bin auf diese Seite gestoßen und habe gesehen, dass sie ein paar verschwommene Bilder hatte. Ich habe meinen Browser-Zoom in Firefox und Chrome überprüft und beide waren 100%. Ich habe die Bilder kopiert, um sie in Photoshop und Paint anzusehen, und sie waren sowohl scharf als auch kleiner dargestellt.

Mein erster Gedanke war, dass es Browser-Zoom war, aber das ist es nicht. Soweit ich das beurteilen kann, gibt es keine CSS-Codierung, um die Bilder im Browser größer zu machen. Es ist schön und scharf bei 75% Zoom in Chrome. Um was geht es? Bildschirmauflösung?

Browser-Erfassung

Photoshop-Aufnahme

Browser-Erfassung

Photoshop-Aufnahme

Bildschirmauflösung

Es ist möglich, dass das HTML die Bilder vergrößert hat. Es gibt wirklich keine Möglichkeit, dies zu sagen, ohne den Code oder die Originalbilder zu untersuchen .
Du hast recht Scott, das könnte sein. Es ist auf einigen Seiten der Website klar, aber nicht auf deren Hauptseite ... nib.com.au Wollen Sie auch sagen, dass wenn ich das Bild speichere, es mir nicht das Originalbild zeigt?
Basierend auf der Website und Ihren angehängten Bildern scheint es, als ob der Zoom Ihres Browsers auf mehr als 100 % eingestellt ist.
Scheint ein Auflösungsproblem gewesen zu sein, das meine Browser in Windows 8.1 betrifft. Stellen Sie meine Anzeige auf Mittel - 125% ein und das hat Chrome behoben. Für Firefox habe ich eine Problemumgehung durchgeführt und das Standard-Zoomstufen-Add-On erhalten und den Standard-Zoom auf 80 % eingestellt, damit er mit Chrome übereinstimmt. Zumindest weiß ich jetzt, dass es das Display ist und nicht der Code oder die Bilder ... Safari auf dem Mac zeigte die Bilder in der richtigen Größe.
Ja, es gibt viele Probleme mit einigen Windows-Browsern, die auf einigen Geräten mit hoher Pixeldichte seltsame Standard-Zoomstufen haben. Firefox ist das Schlimmste, weil es so tut, als wäre es nicht herangezoomt, obwohl es tatsächlich so ist. Hier gibt es einige Diskussionen und mögliche Problemumgehungen - Wie handhaben Sie den Browser-Zoom des Clients? tldr; Erwägen Sie, die Abmessungen der Bilddatei zu verdoppeln, während Sie die Bildgröße mit CSS oder mit SVG beibehalten

Antworten (3)

Ich habe die Bilder kopiert, um sie in Photoshop und Paint zu betrachten, und sie waren sowohl scharf als auch kleiner dargestellt .

Das ist der Schlüssel zu deinem Problem. Wenn Sie die Bilder einfach in PS kopiert und eingefügt haben und sie dort kleiner sind als im Browser, skaliert Ihr Browser sie hoch, wodurch die Pixel vergrößert werden und Sie die verschwommene Ansicht erhalten.

Überprüfen Sie Ihr CSS erneut. Irgendwo weisen Sie den Browser an, die Bilder größer als die tatsächliche Größe anzuzeigen. Basierend auf den Bildern, die Sie in Ihren Beitrag eingefügt haben, ist das Original etwa 250 x 290 px groß, während der Browser es mit 435 x 380 px anzeigt. (wenn Ihre enthaltenen Bilder 100% sind)

Danke für die Vorschläge, Jungs. Wenn es der Code wäre, der es zoomt, würde es auf einem anderen Gerät gezoomt und nicht (ich habe es auf einem Mac überprüft). Es ist mein Windows 8.1 in Kombination mit einem Bildschirm mit hoher Auflösung, der die Browser unabhängig von den üblichen Zoom-Steuerelementen im Browser zoomt, da ich überprüft habe, dass der Zoom im Browser auf 100 % eingestellt war.

Das heißt, die Bilder haben keine Probleme. Der HTML/CSS-Code vergrößert das Bild von seiner tatsächlichen Größe.

Überprüfen Sie die Größe, wie sie durch den Quellcode definiert ist, indem Sie das Inspect-Element des Browsers verwenden. Breite und Höhe können von der tatsächlichen Größe des Bildes abweichen.

Bild ist im Browser bei 100% verschwommen, aber nicht in Photoshop!
AntwortenHierDatenschutz-Bestimmungen1y, 2v