August 4, 2013 thumb Mengecilkan ukuran gambar untuk Website

salam, akhirnya jumpa lagi dengan tulisan saya, alkisah saya mendapatkan tugas untuk membuat website pariwisata banyuwangi. salah satu tugas tersebut adalah memasang gambar-gambar yang telah disediakan oleh pemda setempat. sebenarnya tidak masalah karena dengan wordpress hal tersebut dapat dilakukan dengan mudah. namun baru akan muncul masalah kalau gambar yang dimaksud berkuran 29.4 MB. tentu ini akan jadi masalah, tidak mungkin gambar 29.4 MB langsung saya jadikan background di situs tersebut, tentu akan sangat-sangat lelet nantinya. setelah kesana-kemari akhirnya saya berhasil membuat gambar berukuran 29.4 MB ngirrit jadi cuma 200 KB saja, dengan tanpa mengorbankan kualitas terlampau jauh. oke silakan ikuti langkah – langkah berikut.

Fille Asli, dengan ukuran 29.4 MB

Fille Asli, dengan ukuran 29.4 MB

  • saya mendapatkan file bernama jebang_thulik.png, ukuranya sekitar 29.4 MB, melihat extensinya PNG akan lebih baik jika saya convert ke JPG, kenapa ? pada kondisi tertentu JPG akan lebih kecil daripada PNG  karena JPG terdiri dari 3 element saja yakni RGB (Red, Green, Blue) sedangkan PNG terdiri dari 4 element RGBA (Red, Green, Blue, Alpha) faktor alpha inilah yang memebuat PNG lebih besar. sehingga langkah awal yang saya lakukan adalah mengconvert gambar tersebut menjadi JPG.
  • karena saya menggunakan linux saya memakai GIMP untuk mengubah gambar dari PNG ke JPG. caranya, buka file dengan GIMP, trus setelah terbuka pilih file->export
Export to JPG

Export to JPG

 

  • akan muncul kotak dialog export, pilih file type sebagai JPG, jangan lupa namanya dirubah pula menjadi extensi JPG.
Jangan Lupa File Type dan extensi nama filenya

Jangan Lupa File Type dan extensi nama filenya

  • setelah itu klik export, dan akan muncul kotal dialog Export as JPG, nah disinilah kita bisa mengompress gambar, perhatikan Image Quality dan bagian show preview in image window. centangi Show Preview in Image Window, dan turunkan Image Quality sesaui kebutuhan, dalam uji coba, saya turunkan hingga 90% sudah cukup mumpuni untuk kebutuhan saya. sesuaikan dengan kebutuhan anda, kita bisa turunkan secara bertahap dengan mengulangi langkah ini beberapa kali. sehingga menghasilkan gambar yang diinginkan.
Penurunan Kualitas yang kita inginkan

Penurunan Kualitas yang kita inginkan

 

  • dalam contoh saya ukuran file langsung terkurangi menjadi 3.2 MB saja, penurunan yang sangat drastis bukan.
  • kemudian saatnya saya bandingkan kualitas gambar (gambar asli dengan gambar hasil convert ke JPG), secara garis besar kedua gambar kelihatan identik, cara termudah untuk mengetahui apakah kualitas adalah melakukan uji coba pada orang lain. sebagai contoh saya meminta istri saya untuk melihat gambar tersebut secara berjajar, dan meminta dia memilih mana kualitasnya yang lebih baik tanpa melakukan zooming dan hasilnya dia tidak bisa memilih mana yang lebih baik. itu artinya kedua gambar ini nyaris identik.
  • perbedaan kualitas gambar akan terlihat ketika gambar di-zoom pada perbesaran yang sangat besar. tapi karena saya gunakan untuk web, siapa yang akan memperbesar gambar ini kecuali kalau digunakan untuk baliho dengan ukuran raksasa di jalan-jalan maka perbedaanya cukup kentara.
  • ok saya berhasil mengurangi ukuran file menjadi 3.2 MB saja, tapi saya masih belum puas. saya olah lagi file JPG tadi (bukan file asli PNG) untuk diperkecil lag dengan GIMP, kali ini saya ingin menurunkan resolusinya, siapa yang butuh gambar dengan resolusi 5184 x 3456, saya akan turunkan menjadi gambar standard web yakni 1500 x 1000 pixel saja.
"Image

melakukan scale pada gambar,  Image -> Scale

  • pilih Image -> Scale . setelah muncul kota dialog scale, pada bagian image size saya tinggal memasukan dibagian width menjadi 1500, untuk bagian height biarkan secara otomatis di scale oleh komputer, ini untuk menjaga aspect ratio supaya tetap. dalam contoh saya kebetulan gambarnya melebar, jika gambarnya meninggi tentu anda harus memasukan sesuai kebutuhan. pada bagian Quality , Interpolation pilih Sinc (LancZos3), kemudian klik scale.
Scale Image sesuai kebutuhan

Scale Image sesuai kebutuhan

 

  • setelah gambar di scale, silakan export sekali lagi menjadi JPG seperti langkah sebelumnya. pada tahap ini saya sudah selesai, jika anda masih merasa perlu mengulangi, silakan ulangi kombinasi antara scale dan export JPG sampai anda mendapatkan ukuran yang pas dengan kualitas yang menurut anda pas juga.
  • sebagai hasil, file asal berukuran 29.4 MB, export pertama ke JPG file berubah ukuran menjadi 3.2 MB dan setelah saya scale file berubah ukuran menjadi 175 KB saja, kecil banget bukan.
Perbandingan ukuran file, dari kiri ke kanan, File Asli, File setelah di export ke JPG, file setelah di scale lebih kecil

Perbandingan ukuran file, dari kiri ke kanan, File Asli, File setelah di export ke JPG, file setelah di scale lebih kecil

 

  • untuk testing kualitas saya kembali memanggil istri saya sebagai tester, dan pada kondisi ukuran saya samakan, istri saya tidak bisa membedakan mana file yang memiliki kualitas terbaik. sehingga dapat disimpulkan pada kondisi ideal baik export maupun scale. memberikan penurunan size yang sangat tinggi tapi tidak pada penurunan kualitas.
Perbandingan gambar pada kondisi ideal, dari kiri ke kanan, File Asli, File setelah di Export ke JPG dan file setelah di scale.

Perbandingan gambar pada kondisi ideal, dari kiri ke kanan, File Asli, File setelah di Export ke JPG dan file setelah di scale.

  • setelah di zooming pada fokus salah satu object mbak yang manis, dengan perbesaran sampai 200% baru kelihatan perbedaan kualitas tapi tidak terlalu significant, untuk ukuran mata manusia biasa (NB : kalau hanya untuk ukuran web). dari inis kelihatan bahwa export dario PNG ke JPG memberi penurunan ukuran file yang sangat besar, tapi penurunan kualitas yang sangat minim, sedangkan scale memberikan penurunan kualitas yang cukup kentara saat di zoom, tapi tidak telalu significant.
Perbandingan setelah di Zoom, dari kiri ke kanan, FIle Asli, File setelah di Export ke JPG, file setelah di Scale.

Perbandingan setelah di Zoom, dari kiri ke kanan, FIle Asli, File setelah di Export ke JPG, file setelah di Scale.

  • karena untuk kebutuhan web, orang awam tidak akan melakukan zooming atau zoomout pada gambar yang saya pasang, pada kondisi default browser, gambar terlihat tidak pecah. dibawah ini hasil screenshot gambar web yang saya pasang.
Hasil di Web

Hasil di Web

ok demikian yang bisa saya posting. intinya adalah sesuaikan dengan kebutuhan anda. terimakasih saya ucapkan untuk istriku tercinta yang setia menemani dan sudah rela jadi bahan tester, jika ada yang kurang benar silakan di koreksi, salam goblooge.

Comments

total comments