Bagaimana cara mengubah latar belakang .png kabur menjadi .jpg terkompresi tanpa memperkenalkan artefak?

Saat ini saya sedang berhadapan dengan masalah kualitas gambar untuk gambar latar belakang situs web saya.

Saya memiliki gambar latar belakang buram yang besar yang ingin saya gunakan tetapi ingin ukurannya sekecil mungkin untuk situs web.

Untuk memilikinya dalam kualitas tertinggi (png), sekitar 200kb.

Saya bisa turun ke sekitar 100kb sebagai JPG tetapi kualitasnya berkurang yang diharapkan tetapi ada garis-garis tampak mengerikan di sekitar linier yang membuatnya tampak mengerikan.

Apakah ada cara khusus untuk mengubah png ini menjadi jpg tetapi menjaga gambar agar tidak memiliki cacat ini?

Berikut gambar-gambarnya:

PNG:

Kualitas JPG (100%):

JPEG bukan kompresi lossless

Kompresi JPEG dianggap kompresi lossy bahkan ketika diatur pada kualitas 100% Anda kehilangan beberapa kualitas. Itu sebabnya untuk grafik sederhana seperti antarmuka UI dan latar belakang umumnya lebih baik menggunakan format lossless seperti PNG.

200kb tidak terlalu besar di 2014/2015

Meskipun ada ide untuk mengurangi ukuran latar belakang sebanyak mungkin, penting untuk dicatat bahwa 200kb tidak terlalu besar untuk sebagian besar koneksi broadband. Anda dapat menyajikan versi yang berbeda untuk ponsel dan tablet menggunakan kueri media css .

Membuat file png lebih kecil

Photoshop dan paket cat lainnya menggunakan kompresi PNG standar, Anda mungkin harus mengurangi 200kb itu menjadi lebih sedikit menggunakan PngOptimizer atau Yahoo's Online Service Smush It . Mengurangi ukuran file bahkan lebih rendah tidak akan menurunkan kualitas sebagai format lossless ... itu pada dasarnya mengoptimalkan kode mengurangi lebih lanjut, membandingkannya dengan file ZIP atau RAR, file kompres ini tetapi tidak mengurangi kualitas konten.

Mempertimbangkan menggunakan gradien garis

Solusi lain yang mungkin bisa Anda gunakan adalah gradien PNG tipis yang 1px melintang dan kemudian tinggi halaman, Anda kemudian menduplikasi ini menggunakan background-repeat, Anda bahkan dapat mempertimbangkan menggunakan CSS untuk menghasilkan Gradien untuk Anda, tetapi tentu saja Anda dibatasi oleh tidak bisa menggunakan bayangan dan tweak lainnya.

Ini mungkin tidak menjawab pertanyaan Anda. Beberapa alternatif yang mungkin ...

Sudahkah Anda mempertimbangkan CSS sebagai gantinya:

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

Atau mungkin Anda bisa menggunakan teknik SVG base64 ( alat generator di sini ):

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

Sudahkah Anda mencoba menggunakan PNG yang lebih kecil dan memungkinkan algoritme peningkatan skala asli browser untuk memperbesarnya? Ini mungkin menurunkan ukuran file serta menghilangkan artefak JPG.

Saya sarankan Anda memeriksa Kraken.io , mereka memiliki pengoptimal gambar. Gambar dalam topik Anda ukurannya berkurang 45%, tanpa terlihat oleh mata!

Anda juga bisa menggunakan css, colorzilla memiliki alat yang bagus untuk membuat css yang tepat untuk semua browser.

Jika Anda merasa lebih nyaman dengan gambar gradien, letakkan warnanya, buatlah hitam dan putih, lalu berikan latar belakang div / body / elemen seperti:

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

Beberapa editor gambar seperti GIMP memungkinkan Anda menerapkan perataan serta mengontrol kompresi saat menyimpan jpeg.

Smoothing: Mengatur opsi smoothing ke nilai yang tidak nol akan memuluskan gambar sedikit. Ini mengurangi artefak fuzzy dari kompresi, dan membantu dengan kompresi. Pengaturan 0,10-0,15 menghilangkan sebagian artefak tanpa mengolesi tepi.

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

Anda juga dapat mengurangi artefak dengan mengontrol subsampling

Walaupun subsampling standar biasanya memadai untuk sebagian besar gambar, memberikan rasio yang baik antara kualitas gambar dan ukuran file, ada beberapa situasi di mana penggunaan tanpa subsampling (4: 4: 4) memberikan peningkatan nyata dalam kualitas gambar, bahkan jika Anda gunakan rasio kompresi yang lebih tinggi untuk mempertahankan ukuran file. Kasus yang paling menonjol adalah ketika gambar berisi beberapa bagian dengan detail halus, seperti teks di atas latar belakang yang seragam, dan gambar yang berisi warna hampir rata.

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

Cobalah untuk menambahkan noise untuk meminimalkan banding:

Photoshop:

1. Buat layer baru.
2. Pergi ke: Image > Fill... >dan gunakan nilai-nilai ini:

3. Ubah blending mode layer ke Overlay
4. Pergi ke: Filter > Noise > Add Noise... >. Nilai-nilai ini bekerja dengan baik untuk saya:

5. Sesuaikan opacity layer sesuai keinginan Anda. 22% cukup baik dan JPG yang dihasilkan adalah:

Jadi tidak ada bandeng jahat, ukuran lebih kecil tetapi dengan mengorbankan kebisingan. File jauh lebih berat dibandingkan dengan versi yang tidak berisik (sekitar 100 kb), tetapi setengah dari PNG asli. Sebenarnya saya agak terkejut PNG Anda sebesar ini.

Satu saran lagi:

Jika Anda tidak ingin menambahkan noise, coba pastikan Anda bekerja di mana-mana dalam ruang warna sRGB, yang menyediakan gamut terkaya untuk layar monitor (kurang banding).