Kurangi ukuran file tanpa kehilangan kualitas

11

Saya ingin menyimpan file dalam Photoshop tetapi menyimpannya sekecil mungkin.

Saya menggunakan Simpan untuk Web (dan Perangkat) dan simpan sebagai JPEG. Berikut adalah pengaturan yang saya gunakan:

Pengaturan

Saya benar-benar tidak ingin menurunkan pengaturan kualitas karena saya menggunakan teks dan kadang-kadang saya melihat artefak jika pengaturannya terlalu rendah.

Ini menghasilkan ukuran file beberapa ratus kilobyte tergantung pada ukuran gambar. Meskipun ini bukan masalah besar, gambar ini digunakan untuk web dan lebih kecil lebih baik. Apa teknik tanpa mengurangi kualitas untuk mengurangi ukuran file?

Memperbarui:

Untuk menambahkan beberapa informasi lebih lanjut di sini:

Banyak gambar yang saya gunakan dan buat dikirim melalui email. Ini sangat membatasi apa yang dapat saya lakukan dengan menempatkan teks menggunakan HTML dan CSS di atas gambar.

Saya juga menggunakan berbagai font. Beberapa dapat saya gunakan untuk web menggunakan CSS @font-facetetapi Anda dapat mengalami ukuran file yang besar dan dalam beberapa kasus Anda tidak dapat mengunggah font ke web secara legal. Saya dapat menggunakan layanan seperti Typekit tetapi sekali lagi banyak font yang saya gunakan tidak tersedia dengan Typekit.

Berikut adalah contoh gambar:

Contoh Gambar

adobe-photoshop images image-quality save L84
sumber
1
Ada beberapa jawaban untuk ini - contoh jenis gambar yang Anda bicarakan akan membantu.
e100
1
@ e100 - Saya memperbarui pertanyaan untuk memberikan contoh gambar dan menambahkan lebih banyak informasi.
L84
Pertanyaan serupa: graphicdesign.stackexchange.com/q/3429/10419
Kornel
Jika Anda mengontrol sisi situs web, lihat opsi kode / bangun. Saya adalah perancang untuk tim web profesional dan kami memberikan video layar penuh ke desktop / ponsel tanpa hit besar. Gambar kecuali diminta secara ketat adalah SVG vektor dan dimuat sebagai font. Secara drastis mengurangi jumlah KB halaman. Spanduk pahlawan lebar 2000 piksel adalah JPG sebesar 85% dan para lelaki pra-muat di latar belakang. Perangkat pengguna akhir terdeteksi dan dikirimkan versi relatif file (yaitu versi yang lebih kecil untuk seluler). Pada saat pengguna melewati halaman beranda, beban layar instan. Dan kami bertujuan untuk beranda maksimal 2 detik.
Applefanboy

Jawaban:

15

Pilihan metode kompresi terbaik tergantung pada konten gambar Anda. Jika Anda mencoba untuk menyimpan gambar dengan banyak warna dan transisi yang halus di antara mereka, pilihan Anda lebih baik JPEG. Kalau tidak, jika Anda punya beberapa garis, teks, gambar dengan beberapa warna, Anda harus mencoba PNG.

Skema kompresi spesifik, parameter, pengurangan warna, dll. Bergantung pada case spesifik. Ada beberapa gambar yang dapat Anda simpan dengan aman dengan "slider" kompresi JPEG yang diatur ke 30 atau 40 tanpa membuat artefak tampak jelas. Beberapa lainnya memerlukan pengaturan 80 atau lebih. Mata Anda harus menjadi juri.

Ketika kita berbicara tentang kompresi JPEG, jangan ragu untuk mencoba menggunakan misalnya opsi "Progresif" atau untuk mengatur "Blur" ke nilai yang tidak nol (blur halus dapat menutupi artefak kompresi yang parah).

Dalam kasus PNG, Anda harus mencoba mengurangi jumlah warna yang digunakan sebanyak mungkin (gunakan PNG-8 untuk itu). Ketika beberapa "penghalusan" diperlukan, cobalah algoritma dithering yang berbeda.

Berikut adalah beberapa contoh:

JPEG, Progresif, Kualitas: 40, Blur: 0.18 JPEG, Dioptimalkan, Kualitas: 60, Blur: 0 JPEG, Progresif, Kualitas: 60, Blur: 0 PNG-8, Dithering: difus, 256 warna

Kiri ke kanan, atas ke bawah, parameternya adalah:

  1. JPEG, Progresif, Kualitas: 40, Blur: 0,18, Ukuran: 9 672 byte
  2. JPEG, Dioptimalkan, Kualitas: 60, Blur: 0, Ukuran: 16 898 byte
  3. JPEG, Progresif, Kualitas: 60, Blur: 0, Ukuran: 11 104 byte
  4. PNG-8, Dithering: difus, Warna: 256, Ukuran: 4 528 byte

Bandingkan secara visual dan perhatikan ukuran data masing-masing. Pasangan pertama adalah sekitar 9,7 kB vs 16,9 kB. Kedua adalah 11,1 kB vs 4,5 kB. Semua itu dengan (IMHO) diabaikan perbedaan visual.

thebodzio
sumber
Kekhawatiran terbesar saya tentang opsi progresif adalah dukungan untuk klien email. Saya menambahkan lebih banyak info ke pertanyaan saya untuk menjelaskan ini.
L84
1
Sejauh yang saya tahu "progresif" adalah bagian dari standar JPEG dan bukan sesuatu yang eksotis, sehingga dukungan harus hampir 100%. Tapi itu "Saya pikir" bukan "Saya tahu" :).
thebodzio
Saya setuju dan saya yakin Anda benar, saya telah mengajukan pertanyaan ini di Webmaster SE dan paling buruk gambar akan ditampilkan tetapi tidak sampai mereka dimuat sepenuhnya.
L84
1
Begitulah cara "progresif" dimaksudkan untuk bekerja: itu harus menunjukkan versi gambar yang lebih dan lebih rinci secara berurutan karena lebih banyak data tersedia.
thebodzio
Maaf, yang saya maksud adalah tidak ada yang muncul sama sekali sampai gambar dimuat vs pemindaian memindai.
L84
10

Berikut ini beberapa opsi:

  • Gunakan format lain selain JPEG (PNG atau GIF); hasil dalam hal ukuran file dan kualitas gambar akan tergantung pada konten gambar Anda; masing-masing lebih baik pada jenis konten tertentu
  • Jadikan gambar lebih kecil dalam hal piksel - ini akan memiliki efek yang sangat signifikan dan harus dipertimbangkan jika Anda memiliki kendali atas tata letak keseluruhan
  • Gunakan elemen non-gambar jika memungkinkan, misalnya mencoba mengganti teks dalam gambar dengan teks HTML; coba ganti blok warna dengan elemen HTML.

Memperluas pada dua poin terakhir, Anda harus mencari untuk meminimalkan tingkat gambar dalam tata letak Anda secara keseluruhan sebelum Anda menghabiskan waktu untuk mengurangi ukuran file gambar yang ada.

e100
sumber
2

Saya akan mencoba menjawab beberapa pertanyaan yang belum terjawab sejauh ini:

Banyak gambar yang saya gunakan dan buat dikirim melalui email. Ini sangat membatasi apa yang dapat saya lakukan dengan menempatkan teks menggunakan HTML dan CSS di atas gambar.

Anda dapat mengirim email html (cara membuat buletin). Dengan html dan inline CSS (untuk kompatibilitas). Gambar harus berada di server dan Anda harus meletakkan URL lengkap di stylings / img-tag. Inilah daftar yang berfungsi di klien email yang berbeda.

Saya juga menggunakan berbagai font. Beberapa dapat saya gunakan untuk web menggunakan @-font-face CSS tetapi Anda dapat mengalami ukuran file yang besar dan dalam beberapa kasus Anda tidak dapat mengunggah font ke web secara legal.

Coba google webfonts , sejauh ini sumber webfont terbaik. Semua gratis untuk digunakan. Yang lainnya adalah Font Squirrel . (Ini menggunakan @ font-face juga).

Jannik Ruf
sumber
Terima kasih atas tautannya. Saya telah melihat-lihat beberapa situs web Pemantau Kampanye tetapi belum melihat halaman CSS. Info yang sangat berguna di sana.
L84
-1

Tidak mungkin kamu bisa melakukan ini. JPEG adalah format lossy. Selalu ada pertukaran antara kualitas dan ukuran file.

ingin252
sumber
Rekomendasi lain selain menggunakan JPEG. Bagaimana PNG?
L84
1
PNG itu lossless tetapi juga cukup besar. Di mana Anda menggunakan gambar ini? Jika itu untuk web, selalu lebih baik untuk kode teks.
Jannik Ruf
JPEG dan GIF adalah pilihan yang baik untuk tampilan web (PNG jarang digunakan). Tapi itu tergantung banyak pada apa yang ingin Anda lakukan: latar belakang, tayangan slide gambar, thumbnail atau ikon dll ...
ingin252
Jika hanya Teks tanpa efek (yaitu hanya teks putih dengan latar belakang hitam) Gif bagus dan ukurannya sangat kecil.
Jannik Ruf
4
Ini sebenarnya bukan jawaban yang sangat bagus. Ada beberapa cara untuk mengurangi ukuran file; tidak benar untuk mengatakan PNG jarang digunakan di web.
e100