Wie konvertiere ich einen .png-unscharfen Hintergrund in einen komprimierten .jpg-Hintergrund, ohne Artefakte einzuführen?

Ich habe zurzeit ein Problem mit der Bildqualität für das Hintergrundbild meiner Website.

Ich möchte ein großes unscharfes Hintergrundbild verwenden, möchte jedoch, dass es für die Website so klein wie möglich ist.

Um es in höchster Qualität (png) zu haben, sind es ungefähr 200kb.

Ich kann es auf ungefähr 100kb als JPG bringen, aber die Qualität ist verringert, was erwartet wird, aber es gibt schrecklich aussehende Linien um die Linear, die es schrecklich aussehen lassen.

Gibt es eine Möglichkeit, diese PNG-Datei in eine JPG-Datei umzuwandeln, ohne dass das Bild diese Fehler aufweist?

Hier sind die Bilder:

PNG:

JPG-Qualität (100%):

JPEG ist keine verlustfreie Komprimierung

JPEG-Komprimierung wird als verlustbehaftete Komprimierung angesehen, auch wenn die Qualität auf 100% eingestellt ist . Aus diesem Grund ist es für einfache Grafiken wie Benutzeroberflächen und Hintergründe im Allgemeinen besser, ein verlustfreies Format wie PNG zu verwenden.

200kb sind in 2014/2015 nicht so groß

Es ist zwar ratsam, die Hintergrundgröße so weit wie möglich zu verringern, es ist jedoch wichtig zu beachten, dass 200 KB für die meisten Breitbandverbindungen nicht so groß sind. Sie könnten eine andere Version für Handys und Tablets mit CSS-Medienabfragen bereitstellen .

Eine PNG-Datei noch kleiner machen

Photoshop und andere Malpakete verwenden die Standard-PNG-Komprimierung. Mit PngOptimizer oder dem Yahoo- Onlinedienst Smush It können Sie diese 200 KB wahrscheinlich auf noch weniger reduzieren . Wenn Sie die Dateigröße noch weiter verringern, wird die Qualität nicht beeinträchtigt, da es sich um ein verlustfreies Format handelt. Sie optimiert den Code im Grunde genommen, indem Sie ihn weiter reduzieren. Vergleichen Sie ihn mit einer ZIP- oder RAR-Datei. Diese Dateien komprimieren, ohne die Qualität des Inhalts zu beeinträchtigen.

Erwägen Sie die Verwendung eines Streifenverlaufs

Eine andere mögliche Lösung könnte darin bestehen, dass Sie einen dünnen PNG-Farbverlauf mit einer Breite von 1 Pixel und dann der Höhe der Seite verwenden. Anschließend duplizieren Sie diesen mit background-repeat. Sie könnten sogar die Verwendung von CSS in Betracht ziehen, um den Farbverlauf für Sie zu generieren in der Lage sein, Schatten und andere Verbesserungen zu verwenden.

Dies beantwortet Ihre Frage wahrscheinlich nicht. Einige mögliche Alternativen ...

Haben Sie stattdessen CSS in Betracht gezogen:

background: linear-gradient(45deg, #3d667c, #1d283e);

Oder vielleicht könnten Sie die SVG base64-Technik ( Generator-Tool hier ) verwenden:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

Haben Sie versucht, ein noch kleineres PNG zu verwenden und es dem nativen Hochskalierungsalgorithmus des Browsers zu ermöglichen, es zu vergrößern? Dies kann die Dateigröße verringern und JPG-Artefakte beseitigen.

Ich schlage vor, dass Sie Kraken.io ausprobieren , sie haben einen Bildoptimierer. Die Bilder in Ihrem Thema werden um 45% verkleinert, ohne dass dies für das Auge sichtbar ist!

Sie können auch einfach css verwenden. Colorzilla hat ein nützliches Tool, um das richtige CSS für alle Browser zu erstellen.

Wenn Sie sich mit einem Verlaufsbild wohl fühlen, lassen Sie die Farbe fallen, machen Sie sie schwarz und weiß, und geben Sie dann dem div / body / element den folgenden Hintergrund:

background: blue url('images/gradient.png')

In einigen Bildbearbeitungsprogrammen wie GIMP können Sie beim Speichern eines JPEGs sowohl die Glättung als auch die Komprimierung steuern.

Glätten: Wenn Sie die Glättungsoption auf einen Wert ungleich Null einstellen, wird das Bild leicht geglättet. Dies reduziert unscharfe Artefakte bei der Komprimierung und hilft bei der Komprimierung. Bei einer Einstellung von 0.10-0.15 wird ein Großteil der Artefakte entfernt, ohne dass Kanten verschmiert werden.

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

Möglicherweise können Sie auch Artefakte reduzieren, indem Sie die Unterabtastung steuern

Während die Standard-Unterabtastung normalerweise für die meisten Bilder ausreichend ist und ein gutes Verhältnis zwischen Bildqualität und Dateigröße bietet, kann die Bildqualität in einigen Situationen spürbar gesteigert werden, wenn keine Unterabtastung (4: 4: 4) verwendet wird Verwenden Sie eine höhere Komprimierungsrate, um die Dateigröße beizubehalten. Die bemerkenswertesten Fälle sind, wenn das Bild einige Bereiche mit feinen Details enthält, wie z. B. Text auf einem einheitlichen Hintergrund und Bilder, die fast flache Farben enthalten.

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

Versuchen Sie, Rauschen hinzuzufügen, um Streifenbildung zu minimieren:

Photoshop:

1. Erstelle eine neue Ebene.
2. Gehe zu: Image > Fill... >und verwende diese Werte:

3. Ändern Sie den Füllmodus der Ebene in Überlagern
4. Gehe zu: Filter > Noise > Add Noise... >. Diese Werte haben bei mir gut funktioniert:

5. Passen Sie die Deckkraft der Ebene Ihren Wünschen an. 22% waren irgendwie OK und das resultierende JPG ist:

Also keine bösen Streifen, kleiner aber auf Kosten des Rauschens. Dateien sind im Vergleich zur nicht-lauten Version (ca. 100 KB) erheblich schwerer, aber die Hälfte des ursprünglichen PNG. Eigentlich bin ich ein bisschen überrascht, dass dein PNG so groß war.

Noch ein Vorschlag:

Wenn Sie kein Rauschen hinzufügen möchten, sollten Sie sicherstellen, dass Sie überall im sRGB-Farbraum arbeiten, der den umfangreichsten Farbumfang für Bildschirme bietet (weniger Streifenbildung).