Beste Möglichkeit, JPG-Bilder zu speichern, um sie im Web (Css) zu skalieren, ohne die Qualität in Photoshop zu verlieren?

Irgendwelche Ideen, wie man ein JPG-Bild (oder ein ähnliches - kleines Format (KB)) mit der Größe von 300px/300px in Photoshop speichert - um es mit CSS auf einer Webseite auf 600px/600px zu skalieren, ohne "Qualität" zu verlieren ? Ich versuche herauszufinden, welche Einstellungen gut funktionieren ... Und wie ich die Bilder in kleinen Größen speichern kann (KB)

1. JPG in Photoshop in 300x300px speichern

Geben Sie hier die Bildbeschreibung ein

2. Hochskalieren mit CSS auf 600 x 600 Pixel

Geben Sie hier die Bildbeschreibung ein

Antworten (2)

Es gibt keine Möglichkeit, ein Bild zu vergrößern, ohne an Qualität zu verlieren.

In diesem Fall sollten Sie Ihr Bild verkleinern .

Speichern Sie es also nicht als 300 x 300, sondern als 600 x 600. Suchen Sie nach guten Optimierungs- / Komprimierungsmethoden, verwenden Sie stattdessen möglicherweise PNG (da manchmal ein komprimiertes PNG-8 kleiner als ein JPEG sein kann). Sie müssen wahrscheinlich ein anderes Tool verwenden, um die PNG-Datei zu optimieren (suchen Sie im Internet nach „PNG-Bildoptimierer“)

Besser noch, ich würde es in einer Größe zwischen 300px und 600px speichern, also ist es sowohl kleiner als 600 und hat eine bessere Qualität als 300. Möglicherweise müssen Sie ein paar verschiedene Größen ausprobieren, um das richtige Gleichgewicht zwischen Qualität und Dateigröße zu finden.

Danke für deinen Vorschlag. Eventuell speichere ich die Bilder in JPEG (600x600) und optimiere sie... PNG-8 kommt der Größe von JPEG nahe, sieht aber schlechter aus. Ich habe festgestellt, dass größere Bilder, die verkleinert werden, auf Mobilgeräten großartig aussehen ...
Ja, vor allem, weil die mobilen Geräte hochauflösende Displays haben, daher funktioniert das Herunterskalieren normalerweise auch besser

Mehr um Lucianos Antwort zu ergänzen als ihr entgegenzuwirken:

Eine andere zu berücksichtigende Sache ist die Verbindungsgeschwindigkeit und Bandbreite – Sie möchten kein riesiges Bild über das Internet schießen, wenn Sie damit durchkommen können. Eine Option besteht darin, zwei Versionen des Bildes zu haben, von denen eine als Miniaturansicht und die andere als Bild in voller Größe fungiert.

Obwohl JPEGs eine Komprimierung haben, ist es dennoch wichtig, sich daran zu erinnern: Obwohl es so aussieht , als würden Sie die Größe des Bildes nur verdoppeln, vervierfachen Sie es tatsächlich. ZB 600 x 600 = 360.000 Pixel, 300 x 300 = 90.000 Pixel (dann multiplizieren Sie das mit 3 oder 4, je nach Anzahl der Bytes pro Pixel).

Die Größe eines komprimierten JPEG ist weniger eine Funktion der Pixelanzahl als vielmehr der Entropie des Bildes. Die Entropie wächst tendenziell mit der Bildgröße, aber dann können Sie es sich leisten, mehr zu komprimieren.
@joojaa: Stimmt, aber das OP hat nach Komprimierung gefragt, ohne an Qualität zu verlieren. Zum Glück hat PS einen Vorschaumodus, um zu zeigen, wie das Bild vor der eigentlichen Komprimierung aussehen wird. Ich verwende dies, um die Qualität des endgültigen Speicherns zu messen. Das andere Problem sind natürlich die Details des Bildes; ein lebhaftes Bild hat weitaus weniger Möglichkeiten zur Komprimierung, ohne von Artefakten beeinträchtigt zu werden (unter Verwendung von JPEG oder einer ähnlichen verlustbehafteten Komprimierung).
Beste Möglichkeit, JPG-Bilder zu speichern, um sie im Web (Css) zu skalieren, ohne die Qualität in Photoshop zu verlieren?
AntwortenHierDatenschutz-Bestimmungen1y, 0v