Photoshop / Website: PS-Skalierung vs. HTML-Skalierung?

585
Devoted

Was ist der Unterschied zwischen der Skalierung eines Bildes in Photoshop auf 150 Pixel und der Verwendung in HTML:

<img src="blah.png" /> 

gegen

Ein 500px-Bild verwenden und dann in HTML verwenden:

<img src="blah.png" width="150px"/>? 

Gibt es einen Qualitätsunterschied?

6

3 Antworten auf die Frage

8
hyperslug

Interessanterweise kann man den Unterschied heutzutage fast nicht erkennen 1 . Es sieht gut aus in Chrome / IE, aber Firefox skaliert nicht so gut. Jedenfalls, um Mikes Punkt über Bandbreite hinzuzufügen :

  • Die Ladezeit der Seite leidet stark bei großen Bildern. Ein Bild über einem T3 wäre keine große Sache, aber eine E-Commerce-Site auf einem Smartphone mit niedriger Bandbreite wäre eine Strafe.
  • Sie verschwenden Server-Bandbreite, die Sie Geld kosten kann (wenn Sie niemals das größere Bild liefern).
  • Sie verschwenden Benutzerbandbreite, die sie Geld kosten kann.

(1) 500x500 gezwungen, links 150x150, rechts 150 native

Chrome / IE vs. FF gilt eher für das Downsizing. Das Dehnen ist bei allen dreien gleichermaßen verschwommen. Interessanterweise ist der Qualitätsunterschied beim Heranzoomen sehr offensichtlich. ssube vor 14 Jahren 1
4
Mike Fitzpatrick

In Photoshop können Sie die Skalierungsmethode auswählen, z. B. "bikubisch schärfer". Diese Methode eignet sich häufig zur Verringerung der Bildgröße als die standardmäßige "bikubische" Größenänderung.

Wenn Sie eine Browserskalierung durchführen, variiert die Qualität zwischen den Browsern. Sie haben keine Kontrolle darüber.

Wenn Sie das Bild immer im Browser skalieren und niemals in voller Auflösung anzeigen, verschwenden Sie zusätzlich Bandbreite.

2
AttackingHobo

Ja da ist. Die meisten Browser verfügen nicht über einen guten Bildabtastwert wie Photoshop. Bilder, die in HTML verkleinert wurden, wirken etwas blockiert und erfordern mehr Bandbreite, Speicher und CPU-Auslastung.

Es wird empfohlen, neu aufgenommene Bilder aus Photoshop zu verwenden, um sie in nativer Auflösung anzuzeigen.