Bildqualitätsverlust bei Größenreduzierung

Ich versuche, die Bilder auf meiner Website in ihren px-Abmessungen zu verkleinern, aber ich habe Probleme mit Qualitätsverlust, wenn ich die Größe in Photoshop verändere (ich habe zuerst „Bicubic Sharper“ ausprobiert, dann alle anderen Resampling-Optionen, aber alle kam verschwommen heraus).

Wenn ich die Skalierung dem Browser überlasse (indem ich die kleinere Breite in meinem CSS angebe), kommen sie perfekt scharf heraus. Wie kann das passieren? Ich möchte meine Originalbilder jedoch verkleinern. Wie kann ich sie ohne Qualitätsverlust verkleinern? (Ich habe Photoshop und Illustrator, beide CC 2015)

BEARBEITEN I:

Das Bild enthält Transparenz, daher kann ich es nicht als JPEG speichern.

Der Bicubic Sharpener hat nicht geholfen.

Hier sind die Bilder:

Dies ist ein Screenshot des Originalbildes , das vom Browser/CSS skaliert wurde :

Geben Sie hier die Bildbeschreibung ein

Dies ist ein Screenshot des kleineren Bildes (das im Browser mit 100 % angezeigt wird) :

Geben Sie hier die Bildbeschreibung ein

Dies ist das Originalbild (kein Screenshot):

Geben Sie hier die Bildbeschreibung ein

Hier ist das Bild, dessen Größe in Photoshop mit Bicubic Sharpener geändert wurde (wie im zweiten Screenshot gezeigt):

verkleinertes Bild (kein Screenshot)

Bearbeiten II:

Danke für eure Antworten! Ich schaue es mir von meinem Laptop an, der einen Touchscreen hat, aber ich glaube nicht, dass es mit iPhone-Displays vergleichbar ist ... (Die technischen Daten sagen 16: 9 IPS FHD (1920 x 1080), falls das hilft.) Ich würde es jedoch tun Ich möchte, dass es auf iPhones gut aussieht, da ich versuche, die Website reaktionsschnell zu machen.

Das hat mich überhaupt erst zu dem Problem geführt. Ich verwende Bootstrap und responsive Bilder werden automatisch mit 100 % für die größtmögliche Bildschirmgröße angezeigt, aber ich möchte, dass sie kleiner sind (63 %). Ich dachte, sie kleiner zu machen, wäre sowieso eine gute Idee, da eine kleinere Dateigröße auch eine gute Idee zu sein scheint.

Es tut mir leid, wenn meine Bilderklärungen verwirrend waren, das liegt wahrscheinlich daran, dass ich verwirrt bin ... Ich werde versuchen, es besser zu erklären:

Sowohl das 2. als auch das 4. Bild zeigen dasselbe kleinere Bild, das 2. zeigt es auf der Website.

Die 4. (was mir auch schlecht aussieht) wird im Browser mit 100% Breite angezeigt.

Das 1. Bild zeigt das 3. Bild (Originalgröße) auf 63% skaliert im Browser. Das war zumindest meine Absicht.

@AndrewH Deine Erklärung klingt für mich richtig, außer dass ich nicht versucht habe, sie größer zu skalieren (zumindest nicht absichtlich). Das zweite Bild (Screenshot) wird nur über dem Hintergrund der Website angezeigt, sodass es eine andere Breite hat, die diesen Hintergrund enthält. Oder was übersehe ich?

Zu Ihrer Information, CSS macht das nicht perfekt, besonders bei bestimmten Proportionen. Wenn Sie entwickeln, sollten Sie dennoch versuchen, die Breite eines Bildes von seinen ursprünglichen Abmessungen möglichst nicht zu ändern
Es ist vielleicht nicht perfekt mit CSS, aber es ist viel besser als das, was Photoshop mir gibt. Und ich versuche es zu vermeiden, deshalb habe ich diese Frage gepostet. Ich weiß nur nicht, wie ich das Originalbild verkleinern kann, ohne so viel Qualität zu verlieren.
Können wir ein paar Beispiele für die Originale sehen, die guten Ergebnisse (Screenshot des mit CSS skalierten Bildes) und die schlechten Ergebnisse (mit Photoshop skaliert)? Was Sie als "verschwommen" bezeichnen, kann durch viele verschiedene Artefakte verursacht werden (Fehlausrichtung des Pixelgitters, JPG-Komprimierung usw.).
Das Bild enthält Transparenz, daher kann ich es nicht als JPEG speichern. Der Bicubic Sharpener hat nicht geholfen. Hier sind die Bilder: Dies ist ein Screenshot des Originalbildes, skaliert durch den Browser/CSS: ! Screenshot Browser skaliert Dies ist ein Screenshot des kleineren Bildes (das im Browser mit 100 % angezeigt wird): ! Screenshot kleinere Breite Dies ist das Originalbild (kein Screenshot): ! Originalbild (kein Screenshot) Und hier ist das Bild, dessen Größe in Photoshop mit Bicubic Sharpener geändert wurde (wie gezeigt
Wenn ich das alles richtig lese, sieht es so aus, als ob Sie das Bild verkleinert haben (4. Bild - 298 Pixel breit), aber Code haben, der das 4. Bild auf die Originalgröße (2. Bild - 468 Pixel breit) anpasst. Wenn Sie das Bild verkleinern (was gut aussieht) und es dann größer skalieren, wird es natürlich zu Pixelbildung kommen.
Hallo! Ich glaube, dein viertes Bild fehlt! Wäre es möglich, es so hochzuladen, wie Sie es für die anderen getan haben? Danke!
Können Sie klären, ob "bei 100 % im Browser" "100 Pixel-Bild mit 100 Pixel Breite" oder "100 Pixel-Bild mit 100 % der Größe des Browser-Darstellungsbereichs" bedeutet?
Danke! Ich habe das 4. Bild wieder hinzugefügt. Wenn ich 100 % sage, meine ich, dass mein CSS-Code das Bild mit 100 % Breite (dh in voller Größe, nicht skaliert) für eine bestimmte Bildschirmgröße erscheinen lässt. Es verhindert, dass das Bild größer als seine ursprüngliche Größe wird. Mein Originalbild ist jedoch größer, als ich es haben möchte, und anstatt die 100% in meinem Code zu ändern, würde ich es vorziehen, das Originalbild einfach zu verkleinern, aber dann sieht es schrecklich aus.

Antworten (4)

Aufgrund der verworfenen Pixel beim Reduzieren der Bildgröße habe ich meiner Erfahrung nach bessere Ergebnisse erzielt, wenn ich das Bild sehr klein mache, indem ich das Bild leicht unscharf mache, bevor ich es verkleinere.

Ich habe vor ungefähr 16 Jahren ein Tutorial darüber geschrieben, wie man "Teeny Photo Icons" erstellt. Es ist schon lange vorbei, aber durch das Wunder der Webarchivierung können Sie es immer noch hier einsehen . Die von mir erstellten Symbole waren 256-Farben-GIFs und wären erheblich flüssiger – und wahrscheinlich kleiner in der Dateigröße – wenn sie als PNG-Dateien gespeichert würden, die jetzt universell unterstützt werden.

Wenn ich das richtig verstehe, werden der 2. und 4. Screenshot mit derselben Quelldatei erstellt.

Wenn das stimmt, werden Sie feststellen, dass das Bild, wenn es auf der Seite (2.) verwendet wird, größer ist als seine tatsächlichen Abmessungen (4.). Deshalb sieht es verschwommen aus. Der Browser bildet Pixel, die nicht vorhanden sind, um ein kleineres Bild mit etwas größeren Abmessungen rendern zu können.

Ich habe Ihr Bild (4.) heruntergeladen und auf einer Webseite vor einem schwarzen Hintergrund verwendet. Ich habe keine Abmessungen angegeben, daher wird es mit seinen ursprünglichen Abmessungen gerendert. So sieht es aus (Screenshot von Chrome auf einem normalen Monitor).

Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass es perfekt knackig ist. Vergleichen Sie mit Ihrem. Ihre ist größer, daher dehnt der Browser die Quelldatei, was zu Unschärfe führt.

Geben Sie hier die Bildbeschreibung ein

Ich weiß nicht, was Sie genau meinen, wenn Sie sagen, dass Sie Ihr Bild zu 100% gemacht haben. Es kann verschiedene Dinge bedeuten.

Ich denke, Ihr Bild wird mit 100% Breite seines Containerelements angezeigt . Wenn dies das Problem ist (Sie möchten wissen, wie Sie das Bild so codieren, dass es in echter Größe und nicht in den Abmessungen seines Containers angezeigt wird, oder Sie sind verwirrt darüber, wie Sie Bootstrap codieren sollen), dann ist dies keine Frage für dieses Forum . Bessere Ratschläge finden Sie in stackoverflow , da dies eine Codierungsfrage ist.

Hier sind ein paar Fragen zu diesem Thema: ( hier klicken )

Zu scharf

Ich denke, du überdenkst die Größenänderung. Indem Sie eine Schärfungsmethode auswählen, um die Größe des Bildes zu ändern, machen Sie die Kanten zu scharf. Um glatt auszusehen, müssen die Kanten etwas verschwommen sein.

Das habe ich also getan.

  • Ich habe Ihr Original-PNG in PS geöffnet
  • Ich öffnete das Größenänderungsfenster Menü->Bild->Bildgröße
  • Ich habe die gewünschten Abmessungen eingegeben und alles andere als Standardmethode belassen. Auf OK geklickt.
  • Ich habe die Datei unter einem anderen Namen gespeichert. Ich habe die PNG-Optionen als Standardeinstellungen belassen.

Dies sind die beiden Fenster mit den von mir ausgewählten Optionen

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Dies ist das Ergebnis, das in einer Webseite mit seinen ursprünglichen Abmessungen verwendet wird. Der obere gehört Ihnen (mit dem Bicubic Sharpener). Das untere ist meins, mit der Standardmethode.

Geben Sie hier die Bildbeschreibung ein

Es sieht etwas glatter aus. Sie können mit all den verschiedenen Größenanpassungsmethoden spielen, bis Sie diejenige finden, die Ihnen das beste Ergebnis liefert.

Abschweifung:

Wenn Ihr Ziel die Reaktionsfähigkeit ist (daher die Unterstützung so vieler Geräte da draußen), sollten Sie die Quelldatei auf das Zweifache der erforderlichen Größe einstellen, damit sie auf HD-Monitoren nicht verschwommen aussieht. Ein hochauflösendes Display benötigt ein Quadrat von 2x2 Pixeln für jedes einzelne Pixel, das es anzeigt.

Schauen Sie sich diese Antworten an:

Muss ich meine Bilder auf einem Retina-Display mit der doppelten Pixelgröße erstellen?

DPI/PPI-Auflösung für Produktzoombilder

Vielen Dank, dass Sie mir das klar gemacht haben. Ja, das 2. und 4. Bild stammen aus derselben Quelldatei. Ich kann jetzt sehen, was Sie (und wahrscheinlich auch AndrewH) meinen - der Screenshot (2.) sieht größer aus als die Quelldatei (4.). Ich bin mir nicht sicher, warum mein Screenshot so geworden ist (und es tut mir leid, dass ich es nicht früher bemerkt habe!), aber auf meiner Website hat es tatsächlich die gleiche Größe (wie Bild 4 und wie deine). Bild 4 sieht für mich aber nicht gut aus. Es ist nicht super verschwommen, aber auch nicht so scharf wie die browserskalierte Version von Bild 1. Selbst in Ihrem Beispiel sieht es für mich schlecht aus.
Wenn Sie Bild 3 und Bild 4 vergleichen, sehen Sie sich die roten Linien an, insbesondere die lange untere rechte. Auf einem dunklen Hintergrund wie dem von Ihnen gewählten schwarzen Hintergrund ist es einfacher zu sehen. Kannst du den Unterschied sehen? Oder ist alles nur in meinem Kopf? Oder ist es nur mein Computerbildschirm?
Sie haben auch Recht damit, dass das Bild mit 100 % Breite seines Containerelements angezeigt wird. Das macht sehr viel Sinn. Ich werde versuchen, diesen Teil herauszufinden und bei StackOverflow Hilfe zu bekommen, wenn ich es nicht kann. Abgesehen davon halte ich es immer noch für eine gute Idee, das Originalbild zu verkleinern, wenn ich es nie größer als 63% seiner Originalgröße anzeigen möchte, aber es sieht einfach nicht mehr gut aus, wenn ich es verkleinere . Soll ich es einfach größer lassen, oder gibt es einen besseren Weg, es kleiner zu machen, als Bicubic Sharpener?
Ach und danke für die ganzen Links! Ich werde deinen Rat dort auf jeden Fall befolgen!
@ user3504783: Kein Problem. Schaut euch meine neuste Bearbeitung an.

Resampeln Sie Ihr Foto einfach auf die tatsächlich benötigte Größe. Ich empfehle Bicubic Sharper.

Danach etwas zusätzliches Schärfen anwenden.

PS Das ist kein "Qualitätsverlust". Qualität ist ein Prozess, eine Methodik, ein Arbeitsablauf. Sie verlieren keine Qualität, Sie verlieren Informationen, Details; Mit dem Schärfen simulieren Sie ein neues Detail.

  • Datei > Exportieren > Für Web speichern
  • Voreinstellung: JPEG hoch
  • Progressiv
  • Bildgröße: Stellen Sie die gewünschte Größe ein
  • Qualität: Bicubic Sharper
  • Vergleichen Sie Original mit Optimiert im Vorschaufenster

Schauen Sie sich auch Smush Pro, Kraken und Ewww an , wenn Ihr Bild für eine WordPress-Website ist.

Bildqualitätsverlust bei Größenreduzierung
AntwortenHierDatenschutz-Bestimmungen1y, 0v