Bagaimana cara mengurangi ukuran file PNG untuk web?

16

Saya memiliki file PNG-24 dengan latar belakang transparan dan ukurannya saat ini adalah 1,5 MB. Bagaimana cara mengurangi ukuran atau menggunakan format file PNG-8 dan menjaga kualitas yang sama?

File PNG dari sini: http://www19.zippyshare.com/v/69590430/file.html

Contoh Gambar diunggah Saya mencoba semua saran tetapi tidak ada hasil yang baik, mohon saran

Terima kasih

adobe-photoshop png

— Welliam
sumber

Apakah Anda menggunakan Save For Web ...? Ini akan memberi Anda pilihan untuk mengurangi ukuran, termasuk kedalaman warna.

— James P

Anda contoh gambar adalah file JPEG. Jika Anda ingin orang mencoba berbagai alat / metode di dalamnya, Anda harus menyediakan salah satu dari Anda file PNG ...!

— Laurent Parenteau

pengunggah situs mengonversikannya menjadi jpg. di sini adalah file png s8.postimage.org/z4apal6z9/cw_Copy.png ..... tolong jangan gunakan posterize karena tidak akan berfungsi dengan file lain yang saya miliki ..... terima kasih

— Welliam

1

Tautan itu juga JPEG.

— Dan D.

kali ini saya yakin itu adalah png www19.zippyshare.com/v/69590430/file.html ............. terima kasih atas bantuan Anda

— Welliam

6

PNG adalah format kompresi lossless - tanpa mengubah bahan sumber dalam file, ada sangat sedikit cara untuk meningkatkan kompresi di luar kompresi tingkat tertinggi default. Satu-satunya cara nyata untuk mengurangi ukuran adalah mengubah gambar, baik dengan mengurangi resolusi, atau kedalaman warna sehingga kompresi PNG memiliki kompleksitas yang lebih sedikit untuk dikerjakan.

Jika Anda ingin kompresi tingkat tinggi untuk gambar dan tidak peduli tentang penyimpanan data lossless, gunakan JPEG.

— mikebabcock
sumber

4

Saya tidak akan banyak bicara. Save For Web Photoshop sangat buruk sehingga PNGOUT seringkali dapat mengurangi file hingga 20-40%. Dan Photoshop tidak mendukung PNG8 + alpha yang bisa 70% lebih kecil untuk beberapa gambar.

— Kornel

Angka terbaik yang pernah saya lihat terbukti sekitar 8-15% tetapi jangan ragu untuk menautkan saya ke data yang lebih baik.

— mikebabcock

1

Saya perlu mengoptimalkan satu file png dan menggunakan tinypng.com untuk itu. Ini menghemat lebih dari 50% ruang.

9

RIOT dapat melakukan itu, dan banyak lagi.

Radical Image Optimization Tool (singkatnya RIOT) adalah pengoptimal gambar gratis yang akan memungkinkan Anda untuk menyesuaikan parameter kompresi secara visual sambil menjaga ukuran file minimum.

Ini digunakan dengan tampilan berdampingan (tampilan ganda) atau tampilan tunggal untuk membandingkan yang asli dengan gambar yang dioptimalkan secara real time dan langsung melihat ukuran file yang dihasilkan.

Pengoptimal gambar ringan, cepat dan mudah digunakan, namun kuat untuk pengguna tingkat lanjut. Anda akan dapat mengontrol kompresi, jumlah warna, pengaturan data meta dan banyak lagi, dan memilih format gambar (JPEG, GIF atau PNG) untuk file output Anda.

Kemungkinan lain adalah dengan menggunakan kombinasi pngquant, pngout, dan pngcrush, seperti dijelaskan di sini , tetapi ini dari baris perintah.

Berikut adalah instruksi bagaimana mengkonversi gambar png24 ke png8 untuk kebaikan ie6, semua melalui baris perintah menggunakan alat open source (saya pikir) pngquant + pngout + pngcrush.

1- mengukur gambar menjadi 256 (jadi pada dasarnya png8 terlihat omong kosong dengan sprite besar atau sprite dengan rentang warna yang besar).

pngquant 256 some_24_bit.png

2- mengonversi gambar dari png24 ke png8

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3 - kompres gambar

pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla -mengurangi some_8_bit_small.png

— Laurent Parenteau
sumber

6

Coba TinyPNG

Dari situs web mereka:

Bagaimana cara kerjanya?

Saat Anda mengunggah file PNG (Portable Network Graphics), warna-warna yang serupa pada gambar Anda digabungkan. Teknik ini disebut "kuantisasi". Karena jumlah warna berkurang, file PNG 24-bit dapat dikonversi ke gambar warna yang diindeks 8-bit yang jauh lebih kecil. Semua metadata yang tidak perlu dihapus juga. Hasilnya: file PNG kecil dengan dukungan 100% untuk transparansi.

Mereka memiliki dua opsi:

Seret dan jatuhkan gambar ke situs web mereka dan akan diproses secara otomatis. Layanan gratis. (Hingga 20 gambar. Maks masing-masing 5 MB)
Plugin Photoshop. Ini biaya $.

Saya belum mencoba plugin PS jadi tidak bisa mengomentari seberapa baik kerjanya.

— Knalpot
sumber

Ini adalah tip yang sangat bagus, TinyPNG mengurangi file PNG 24bit saya dari Photoshop, dari 200k menjadi 50k, dan tetap mempertahankan transparansi campuran! Terima kasih untuk balasan Anda. Perhatikan kualitas gambarnya hampir tidak bisa dibedakan.

— TripleAntigen

Ini benar-benar berfungsi! Gambar PNG 1MB saya menjadi 253KB tanpa kehilangan kualitas!

— BrunoSerrano

5

Jika Anda tidak keberatan dengan baris perintah, lihatlah OptiPNG , mungkin itu yang Anda cari.

OptiPNG adalah pengoptimal PNG yang mengkompres ulang file gambar ke ukuran yang lebih kecil, tanpa kehilangan informasi apa pun. Program ini juga mengonversi format eksternal (BMP, GIF, PNM, dan TIFF) menjadi PNG yang dioptimalkan, dan melakukan pemeriksaan dan koreksi integritas PNG.

— Renan
sumber

Terima kasih tetapi gagal tidak banyak optimasi !! Saya mengunggah gambar

— Welliam

3

Gunakan kombinasi pngoutdandeflopt . pngoutakan secara otomatis menentukan apakah warna PNG Anda cocok dengan PNG-8 dan menggunakannya. defloptakan memeras beberapa byte tambahan dari gambar yang sudah dioptimalkan - ini adalah utilitas untuk bekerja dengan data yang kempes dan PNG adalah salah satunya.

— Oleg V. Volkov
sumber

terima kasih tetapi pngout gagal berkurang hanya beberapa kb !!

— Welliam

1

Apakah Anda mengharapkan sihir? Gambar Anda jelas memiliki lebih dari 256 warna. Posterize untuk mengurangi jumlah warna terlebih dahulu.

— Oleg V. Volkov

Ketika ukuran berkurang dari 970 menjadi 945 ini hasilnya tidak baik juga posterize tidak bekerja dengan PNG lain yang saya miliki.

— Welliam

3

Ide bagus untuk menangani PNG dengan saluran alfa dalam konteks pengembangan situs web adalah membiarkan server melakukan trik untuk Anda: pisahkan data gambar secara dinamis dari saluran alfa di server, optimalkan keduanya secara terpisah dan gabungkan kembali menggunakan elemen kanvas dan beberapa JavaScript di browser. Ta-Da! Bekerja dengan semua browser modern.

Di sini dijelaskan bagaimana hal itu dilakukan:

http://headers-already-sent.com/artikel/shrinkimage-1/

Anda juga akan menemukan paket ZIP lengkap dengan skrip PHP dan plugin jQuery. Beri tahu kami pendapat Anda tentang ini.

— Andreas Ollmann
sumber

1

Jika Anda benar-benar perlu mengecilkan gambar, dan semua saran mudah tidak berhasil, jawaban terakhir adalah memecah gambar menjadi potongan-potongan yang dapat dikompres dan menggabungkannya kembali pada klien dengan skrip.

Gambar dari pertanyaan terlihat seperti gradien warna dengan garis-garis vertikal dan beberapa bercak / noise. Pisahkan itu ke dalam lapisan berikut:

Gradien warna tanpa garis atau noise. Ini akan memampatkan dengan baik di PNG dan sangat baik di JPEG. Lebih baik lagi, gunakan JavaScript untuk menghasilkan gradien warna pada klien. Anda mungkin dapat melakukannya dalam waktu kurang dari 200 byte JS.
Garis-garis vertikal tanpa warna atau noise. Anda dapat mengompresi ini ke saluran 4 bit tunggal (alfa atau abu-abu). Anda hanya membutuhkan gambar setinggi 1 piksel, yang dapat Anda regangkan. Itu akan memampatkan dengan sangat baik di PNG.
Kebisingan. Sekali lagi, yang Anda butuhkan adalah saluran 4 bit tunggal (alfa atau abu-abu). Tanpa warna atau garis, ini akan memampatkan dengan sangat baik dalam PNG atau JPEG.

Gabungkan layer-layer itu menjadi satu gambar dengan JavaScript, dan seluruh "gambar" Anda bisa 15KB atau kurang.

Pekerjaan semacam ini adalah standar industri dalam Games selama beberapa dekade, dan sampai sekarang. Hebatnya adalah bahwa Photoshop sudah memiliki semua lapisan yang terpisah, jika Anda membuat gambar Anda seperti seorang profesional.

— Sophit
sumber

1

File PNG standar sudah merupakan format gambar paling terkompresi yang dapat Anda gunakan, karenanya mengapa file PNG banyak digunakan untuk gambar di situs web, terutama untuk tujuan desain.

Tetapi masih ada cara Anda dapat mengkompres file PNG lebih jauh; dengan mengurangi jumlah warna yang digunakan dalam gambar. Ini sering dapat mengurangi ukuran file hingga 70% atau bahkan lebih tinggi.

Perangkat lunak bebas otomatis terbaik dengan persentase kompresi keseluruhan tertinggi yang saya temukan untuk ini adalah FileOptimizer yang menggunakan beberapa mesin (mis. PngOptimizer, PNGOUT, pngwolf, dll.) Untuk memampatkan gambar ke ukuran sekecil mungkin.

Alat daring lain yang saya temukan dengan hasil bagus adalah ini: http://www.giftofspeed.com/png-compressor/

— William Dresker
sumber

1

Izinkan saya memperkenalkan FileOptimizer . Ini menggabungkan berbagai metode untuk optimasi gambar (termasuk penghapusan EXIF untuk menyimpan beberapa byte tambahan - dapat dimatikan).

Hasil pengujian dan perbandingan dengan solusi lain.

— rluks
sumber

0

ScriptPNG http://css-ig.net/scriptpng

itu memberi Anda sekitar 10 opsi berbeda termasuk lossy! Saya mencoba banyak dan file batch windows ini (dengan sekelompok .exes) hebat

Saya pribadi menggunakannya untuk kompres hingga 8bit lossy. Tidak begitu yakin cara kerjanya tetapi tangkapan layar saya terlihat sama. Saya menggunakannya untuk mengompresi tangkapan layar. Saya memiliki sekitar 2GB pngs, sekarang hanya 700mb

— Mikey
sumber