アーティファクトを導入せずに、.pngでぼやけた背景を圧縮された.jpgに変換するにはどうすればよいですか？

現在、ウェブサイトの背景画像の画質の問題に取り組んでいます。

使用したい大きなぼやけた背景画像がありますが、ウェブサイトのサイズをできるだけ小さくしたいと思います。

最高品質（png）にするためには、約200kbです。

私はそれをJPGとして約100kbまで下げることができますが、予想される品質は低下しますが、線形の周りに恐ろしく見える線があり、それがひどく見えます。

このpngをjpgに変換する特別な方法はありますが、画像にこれらの欠陥がないようにする方法はありますか？

画像は次のとおりです。

PNG：

JPG（100％）品質：

JPEGは可逆圧縮ではありません

JPEG圧縮は、品質が100％に設定されている場合でも、損失のある圧縮と見なされます。そのため、一般的にUIインターフェイスや背景などの単純なグラフィックスでは、PNGなどのロスレス形式を使用する方が適切です。

2014/2015では200kbはそれほど大きくありません

背景のサイズをできる限り小さくすることをお勧めしますが、ほとんどのブロードバンド接続では200kbはそれほど大きくないことに注意することが重要です。CSSメディアクエリを使用して、モバイルとタブレットに異なるバージョンを提供できます。

PNGファイルをさらに小さくする

Photoshopおよびその他のペイントパッケージは標準のPNG圧縮を使用します。PngOptimizerまたはYahooのオンラインサービスSmush Itを使用して、その200kbをさらに小さくする必要があります。ファイルサイズをさらに小さくしても、ロスレス形式として品質が低下することはありません...基本的にコードを最適化してさらに圧縮し、ZIPまたはRARファイルと比較します。これらはファイルを圧縮しますが、コンテンツの品質は低下しません。

ストライプグラデーションの使用を検討する

別の可能な解決策は、幅1pxの薄いPNGグラデーションを使用しbackground-repeat、次にページの高さを使用することです。これを使用してこれを複製し、CSSを使用してグラデーションを生成することを検討することもできますが、もちろん、影やその他の調整を使用できる。

これはおそらくあなたの質問に答えないでしょう。いくつかの可能な選択肢...

代わりにCSSを検討しましたか：

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

または、SVG base64テクニックを使用することもできます（ジェネレーターツールはこちら）。

<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==);

さらに小さい PNG を使用して、ブラウザのネイティブなアップスケーリングアルゴリズムで拡大できるようにしたことがありますか？これにより、ファイルサイズが小さくなり、JPGアーティファクトが除去される場合があります。

Kraken.ioをご覧になることをお勧めします。画像の最適化機能があります。トピックの画像は、目に見えずにサイズが45％縮小します！

また、cssを使用することもできます。colorzillaには、すべてのブラウザーに適切なcssを作成するための素晴らしいツールがあります。

mroeがグラデーション画像に慣れていると感じたら、色を落とし、白黒にし、div / body / elementに次のような背景を与えます。

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

GIMPなどの一部の画像エディターでは、JPEGを保存するときに圧縮を制御するだけでなく、スムージングを適用できます。

平滑化：平滑化オプションをゼロ以外の値に設定すると、画像がわずかに平滑化されます。これにより、圧縮によるファジーアーティファクトが減少し、圧縮に役立ちます。0.10〜0.15に設定すると、エッジが不鮮明になることなく、アーティファクトの大部分が削除されます。

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

サブサンプリングを制御することにより、アーティファクトを減らすこともできます

通常、ほとんどの画像では標準のサブサンプリングで十分であり、画質とファイルサイズの比率は良好ですが、サブサンプリングを使用しない（4：4：4）場合でも、画質が著しく向上する場合がありますファイルサイズを維持するには、より高い圧縮率を使用します。最も顕著なケースは、画像に、均一な背景のテキストや、ほぼ平坦な色を含む画像など、細かい部分が含まれる部分がある場合です。

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

バンディングを最小限に抑えるためにノイズを追加してみてください：

Photoshop：

1. 新しいレイヤーを作成します。
2. に移動しImage > Fill... >、これらの値を使用します。

3. レイヤーの描画モードをオーバーレイに変更します
4. に移動しますFilter > Noise > Add Noise... >。これらの値は私にとってはうまくいきました。

5. レイヤーの不透明度を好みに合わせて調整します。22％はやや良かったので、結果のJPGは次のとおりです。

不快なバンディングはなく、サイズは小さくなりますが、ノイズが発生します。ファイルは、ノイズのないバージョン（約100kb）に比べてかなり重いですが、元のPNGの半分です。実際、PNGがこれほど大きかったことに少し驚いています。

もう1つの提案：

ノイズを追加したくない場合は、sRGB色空間のどこでも作業していることを確認してください。これにより、モニター画面に最も豊かな色域が提供されます（バンディングが少なくなります）。