Photoshop: cara mengurangi ukuran PNG untuk penggunaan web

10

Saya memiliki file PNG yaitu 2042 x 1250 dan 6,1 MB. Ketika saya membuka dengan Photoshop dan melakukan "Save As> PNG 24" dan pilih ukuran file terkompresi dari dua opsi (yang lain tidak ada kompresi) saya masih mendapatkan gambar yang ada di urutan beberapa MB, yang, karena akan menjadi aset web, saya ingin berada di KB dan bukan di MB. Bagaimana cara mengompresi gambar ini secara cerdas ke kisaran rata-rata beberapa ribu KB?

adobe-photoshop website-design compression Thalatta
sumber
1
Gunakan file -> save for web gantinya dan pilih png 24 dari daftar format file (JPG biasanya default).
AndrewH
Apa yang membuat Anda berpikir file dapat dikompresi sebanyak yang Anda inginkan? Anda mungkin ingin beralih ke JPEG dan mengotak-atik dengan pengaturan Kualitas Rendah.
usr2564301

Jawaban:

13

Detail geeky (Anda tidak meminta)

Beberapa format gambar, seperti JPG, mendukung Lossy Compression . Ketika gambar Terkompresi Rugi disimpan dan kemudian dirender kembali, gambar tersebut tidak 100% persis seperti yang Anda rancang, tetapi "tutup" saja, semacam sketsa. Beberapa detail asli hilang . Karena tidak ada harapan keakuratan, gambar Lossy Compressed memiliki kemewahan menyimpan sedikit informasi tentang desain asli, menghasilkan file kecil. Mereka bahkan memungkinkan Anda untuk menentukan seberapa akurat hasilnya: semakin kurang akurat hasilnya, semakin kecil file tersebut.

Di sisi lain, format PNG, sesuai desain, mendukung Lossless Compression . Ini berarti bahwa setelah gambar disimpan dalam file, ketika gambar itu dikembalikan semua piksel diberikan persis seperti yang Anda rancang tanpa kehilangan detail. Ini hebat, tetapi sayangnya itu berarti harus menyimpan banyak informasi untuk membuat gambar dengan sempurna, menghasilkan file besar.

PNG melakukan hal yang cerdas untuk mengoptimalkan informasi yang dibutuhkan sebelum menyimpannya ke dalam file tetapi Anda tidak dapat menentukan, seperti yang Anda lakukan dengan JPG, seberapa kompres atau akurat file yang Anda inginkan. Hasilnya seperti apa adanya dan Anda tidak memiliki kendali pada seberapa besar file tersebut.

Beberapa saran

Karena itu, ada beberapa hal yang dapat Anda lakukan untuk mencoba mendapatkan file yang lebih kecil.

  • Area besar dengan warna pipih lebih baik kompres daripada area berpola kompleks. Lihat apakah Anda dapat menyederhanakan gambar Anda.
  • Apakah Anda memiliki banyak ruang negatif di sekitar gambar? Cobalah untuk memotongnya seminimal mungkin.
  • Apakah Anda menggunakan transparansi? Jika tidak, pertimbangkan untuk menyimpan gambar sebagai JPG.
  • Jika Anda tidak dapat menyimpannya sebagai JPG karena alasan apa pun, tetapi tidak menggunakan transparansi, maka hapus centang "transparansi" dari opsi penyimpanan. Ini akan mencukur sedikit gigitan dari hasil akhir Anda.
  • Pertimbangkan memotong gambar menjadi beberapa bagian dan menyusunnya dalam HTML akhir, seperti semacam puzzle. Anda dapat menyimpan bagian yang membutuhkan transparansi sebagai PNG dan bagian lainnya sebagai JPG yang sangat terkompresi. Hasil total seharusnya tidak terlalu berat.
  • Gunakan alat kompresi PNG (mis. Https://tinypng.com/ ). Pikiran Anda, alat ini menggunakan algoritma lossy. Mereka mencoba menyederhanakan gambar Anda agar dapat menyimpannya sebagai file yang lebih kecil. Mereka memang mengurangi ukuran file Anda secara dramatis tetapi hasil akhirnya mungkin kehilangan terlalu banyak detail. Anda selalu dapat mencobanya dan menilai hasilnya tergantung pada aplikasi.

Jika Anda membagikan gambar Anda, saya dapat memberi Anda beberapa saran.

cockypup
sumber
TinyPNG dikonversi ke PNG 8-bit yang terlihat seperti GIF.
Hannes Schneidermayer
@Heanz. Benar. Itu mengkonversi ke 8-bit. Tapi ini bukan GIF. Ini mendukung transparansi alfa. Dalam pengalaman saya, saya tidak pernah melihat perbedaan antara PNG yang penuh sesak nafas dan yang mereka hasilkan.
cockypup
@cokcypup Untuk logo itu benar, tetapi untuk wajah manusia, tidak mungkin.
Hannes Schneidermayer
@Heanz saya tidak pernah menggunakan untuk wajah manusia tetapi saya menggunakannya secara teratur untuk foto kemasan kosmetik. Saya tidak bisa membedakannya. Tetap saja, komentar saya tentang alpha benar. Format GIF tidak mendukung transparansi alfa.
cockypup
2

Coba tambahkan lapisan penyesuaian Posterize ke gambar dan kurangi jumlah warna. Saya menemukan Anda masih dapat mempertahankan kualitas tinggi dan mengurangi ukuran file melalui metode ini.

Ryan
sumber
Bekerja seperti pesona!
Christian Strang
0

PNG 6.1MB jauh dari jangkauan KB, jadi saran Cokypup akan lebih baik.

Untuk PNG lain yang mungkin Anda buat, cara terbaik untuk menyimpannya untuk digunakan di web adalah menyimpan di Photoshop dengan "Save for Web" daripada "Save As". Photoshop "Save for Web" melakukan beberapa optimasi yang secara dramatis akan mengurangi ukuran file.

Kemudian saya akan menindaklanjutinya dengan menggunakan alat kompresi untuk PNG seperti Tiny PNG
Tiny PNG menggunakan kompresi lossy seperti yang Anda lakukan saat menyimpan JPG. Ini secara dramatis mengurangi ukuran file, dan seperti yang Anda lihat melalui contoh di situs, kompresi lossy yang dilakukannya hampir tidak terlihat.

lycorine
sumber
Hampir tidak terlihat sangat tergantung pada gambar yang Anda makan melalui algoritma yang saya temukan, gunakan dengan hati-hati dan tidak pernah menimpa file asli Anda.
PieBie
Konversi ke 8-bit dan itu terlihat seperti GIF pada foto berwarna.
Hannes Schneidermayer
-1

mungkin tidak perlu dikatakan, tetapi banyak orang lupa untuk mengatur resolusi mereka pada 72 piksel / inci untuk aset web.

Gambar> Ukuran gambar> atur resolusi ke 72 ppi.

tristan
sumber
yang tidak memiliki efek pada gambar yang digunakan untuk web, hanya ukuran dalam px
Luciano