Cara Mengoptimalkan Gambar Untuk Tampilan Website
Pasti Anda pernah menunggu loading
image/gambar disebuah website, mungkin bisa mencapai 2-5 menit itu akan
sangat membosankan dan pasti Anda ingin cepat untuk menutup atau bahkan
mengganti dengan halaman website yang lainnya. Semua itu lumrah terjadi
karena adanya kecenderungan pengguna internet zaman sekarang
menginginkan sesuatu yang serba cepat 
. Nah pada kesempatan ini saya ingin berbagi sedikit tips tentang
bagaimana optimalisasi sebuah gambar untuk tampilan sebuah website.
Salah satu faktor kenapa sampai lambatnya loading image itu karena, gambar tersebut tidak atau kurang dioptimalisasikan. Jika Anda seorang desainer ataupun fotografer masalah ini akan sangat mengganggu, karena publik yang ingin melihat hasil karya Anda di website terhalang karena lambatnya sebuah image untuk tampil pada website Anda. Jangan sampai teman, saudara, kerabat atau calon klien potensial kita kabur hanya karena sebuah gambar yang tidak teroptimalisasi dengan baik.
Sebelum saya memberikan bagaimana optimalisasi gambar ada baiknya saya menjelaskan dengan singkat tentang file-file gambar yang biasa Anda gunakan untuk ditampilkan pada website.
. Kelebihan utamanya adalah mendukung transparansi seperti format GIF
namun dengan ukuran file yang lebih kecil. Ada dua macam format PNG yang
biasa digunakan untuk keperluan web, yaitu PNG 8 bit dan PNG 24 bit.
Keduanya memiliki kelebihan dan kekurangan masing-masing.
PNG 8 biasa digunakan untuk gambar-gambar yang memiliki karakteristik warna solid seperti kartun atau logo. Tapi, jika gambar kita merupakan sebuah foto dan kita memerlukan background transparan maka kita bisa menggunakan PNG 24.
2. Lalu Anda masuk ke menu File-> Save for Web & Device atau bisa dengan menekan shortcut (Ctrl+Alt+Shift+S). Lihat Gambar 2
Lihat pada sisi kanan merupakan gambar orisinal-nya sedangkan yang
sisi kiri merupakan hasil optimalisasinya. Perhatikan pada sisi kanan
gambar tersebut memiliki nilai 703 k, ukuran yang sangat besar untuk
tampilan sebuah website. coba perhatikan dengan gambar disebelah kiri
yang memiliki nilai 43.1 k, perbedaannya sangat besar bukan? Dengan
kualitas yang sama perbedaannya hampir sepuluh kali lipat.
Angka 16 sec @256 Kbps artinya gambar kita akan bisa ditampilkan sempurna setelah 16 detik dengan menggunakan koneksi internet yang kecepatannya 256Kbps. Penulis menggunakan Adobe Versi 7 sehingga tidak ada dropdown untuk mengatur kecepatan internet, tetapi untuk versi CS 1 keatas sudah bisa menggunakan fitur tersebut.
Di kanan atas terdapat kolom pengaturan format file (JPEG,PNG,GIF), kualitas serta ukuran gambar. Karena gambar yang akan saya optimalisasi berupa foto yang memiliki ribuan warna maka saya menggunakan format JPEG. Ubah angka di kolom quality sampai gambar benar-benar terlihat baik sesuai kebutuhan. Setelah puas hasil optimalisasi, klik save lalu simpan gambar di komputer kita. Lihat Gambar 3
. Nah pada kesempatan ini saya ingin berbagi sedikit tips tentang
bagaimana optimalisasi sebuah gambar untuk tampilan sebuah website.Salah satu faktor kenapa sampai lambatnya loading image itu karena, gambar tersebut tidak atau kurang dioptimalisasikan. Jika Anda seorang desainer ataupun fotografer masalah ini akan sangat mengganggu, karena publik yang ingin melihat hasil karya Anda di website terhalang karena lambatnya sebuah image untuk tampil pada website Anda. Jangan sampai teman, saudara, kerabat atau calon klien potensial kita kabur hanya karena sebuah gambar yang tidak teroptimalisasi dengan baik.
Sebelum saya memberikan bagaimana optimalisasi gambar ada baiknya saya menjelaskan dengan singkat tentang file-file gambar yang biasa Anda gunakan untuk ditampilkan pada website.
JPEG (Joint Photographic Expert Group)
Format file ini adalah format yang paling umum dan biasanya sudah sering diketahui oleh para desainer maupun para developer website, bahkan pengguna internetpun sudah tidak asing dengan format file ini. Format JPEG ini memiliki kemampuannya untuk menampikan foto dengan kualitas baik namun dengan ukuran file yang relatif kecil. Keunggulan lain dari format ini adalah fleksibilitasnya. Format JPEG dapat ditampilkan di semua perangkat komputer apapun operating system-nya. Jika gambar kita berupa foto yang kaya dengan warna, maka sebaiknya pilih format ini. JPEG mendukung sampai 16 juta warna, sehingga kita tidak akan mengalami distorsi warna yang berarti pada foto kita.PNG (Portable Network Graphic)
PNG adalah format kedua yang terkenal se-alam jagad internet setelah JPEG
. Kelebihan utamanya adalah mendukung transparansi seperti format GIF
namun dengan ukuran file yang lebih kecil. Ada dua macam format PNG yang
biasa digunakan untuk keperluan web, yaitu PNG 8 bit dan PNG 24 bit.
Keduanya memiliki kelebihan dan kekurangan masing-masing.
PNG 8 biasa digunakan untuk gambar-gambar yang memiliki karakteristik warna solid seperti kartun atau logo. Tapi, jika gambar kita merupakan sebuah foto dan kita memerlukan background transparan maka kita bisa menggunakan PNG 24.
GIF (Graphic Interchange Format)
Format GIF biasanya digunakan untuk gambar animasi bergerak dengan dimensi yang kecil dan file size yang relatif kecil juga. Walaupun PNG pun sebenarnya bisa digunakan untuk keperluan gambar animasi dengan PNG sequenze-nya, tetapi biasanya GIF yang sering digunakan untuk animasi yang singkat dan ringan. Contoh penggunaanya seperti emoticon di setiap forum komunitas, blog dan website. atau biasa kita temui di gambar advertising yang bergerak. Pada Basicnya animasi GIF ini menggunakan sistem frame by frame.OPTIMALISASI MENGGUNAKAN ADOBE PHOTOSHOP
1. Buka halaman Adobe Photoshop lalu pilih gambar yang akan Anda optimaliasasikan. Lihat Gambar 1
Gambar 1
Gambar 2
Angka 16 sec @256 Kbps artinya gambar kita akan bisa ditampilkan sempurna setelah 16 detik dengan menggunakan koneksi internet yang kecepatannya 256Kbps. Penulis menggunakan Adobe Versi 7 sehingga tidak ada dropdown untuk mengatur kecepatan internet, tetapi untuk versi CS 1 keatas sudah bisa menggunakan fitur tersebut.
Di kanan atas terdapat kolom pengaturan format file (JPEG,PNG,GIF), kualitas serta ukuran gambar. Karena gambar yang akan saya optimalisasi berupa foto yang memiliki ribuan warna maka saya menggunakan format JPEG. Ubah angka di kolom quality sampai gambar benar-benar terlihat baik sesuai kebutuhan. Setelah puas hasil optimalisasi, klik save lalu simpan gambar di komputer kita. Lihat Gambar 3
Gambar 3
Kita perlu mempertimbangkan juga untuk siapa gambar kita. Jika kira-kira orang yang melihat web kita memiliki koneksi internet yang cepat maka kita bisa memperbesar kualitas gambar sampai ke quality 80-100, begitupun sebaliknya. Selamat mencoba
Bagaimana Mengoptimalkan Gambar Untuk Tampilan Website
Pasti Anda pernah menunggu loading
image/gambar disebuah website, mungkin bisa mencapai 2-5 menit itu akan
sangat membosankan dan pasti Anda ingin cepat untuk menutup atau bahkan
mengganti dengan halaman website yang lainnya. Semua itu lumrah terjadi
karena adanya kecenderungan pengguna internet zaman sekarang
menginginkan sesuatu yang serba cepat
. Nah pada kesempatan ini saya ingin berbagi sedikit tips tentang
bagaimana optimalisasi sebuah gambar untuk tampilan sebuah website.
Salah satu faktor kenapa sampai lambatnya loading image itu karena, gambar tersebut tidak atau kurang dioptimalisasikan. Jika Anda seorang desainer ataupun fotografer masalah ini akan sangat mengganggu, karena publik yang ingin melihat hasil karya Anda di website terhalang karena lambatnya sebuah image untuk tampil pada website Anda. Jangan sampai teman, saudara, kerabat atau calon klien potensial kita kabur hanya karena sebuah gambar yang tidak teroptimalisasi dengan baik.
Sebelum saya memberikan bagaimana optimalisasi gambar ada baiknya saya menjelaskan dengan singkat tentang file-file gambar yang biasa Anda gunakan untuk ditampilkan pada website.
. Kelebihan utamanya adalah mendukung transparansi seperti format GIF
namun dengan ukuran file yang lebih kecil. Ada dua macam format PNG yang
biasa digunakan untuk keperluan web, yaitu PNG 8 bit dan PNG 24 bit.
Keduanya memiliki kelebihan dan kekurangan masing-masing.
PNG 8 biasa digunakan untuk gambar-gambar yang memiliki karakteristik warna solid seperti kartun atau logo. Tapi, jika gambar kita merupakan sebuah foto dan kita memerlukan background transparan maka kita bisa menggunakan PNG 24.
2. Lalu Anda masuk ke menu File-> Save for Web & Device atau bisa dengan menekan shortcut (Ctrl+Alt+Shift+S). Lihat Gambar 2
Lihat pada sisi kanan merupakan gambar orisinal-nya sedangkan yang
sisi kiri merupakan hasil optimalisasinya. Perhatikan pada sisi kanan
gambar tersebut memiliki nilai 703 k, ukuran yang sangat besar untuk
tampilan sebuah website. coba perhatikan dengan gambar disebelah kiri
yang memiliki nilai 43.1 k, perbedaannya sangat besar bukan? Dengan
kualitas yang sama perbedaannya hampir sepuluh kali lipat.
Angka 16 sec @256 Kbps artinya gambar kita akan bisa ditampilkan sempurna setelah 16 detik dengan menggunakan koneksi internet yang kecepatannya 256Kbps. Penulis menggunakan Adobe Versi 7 sehingga tidak ada dropdown untuk mengatur kecepatan internet, tetapi untuk versi CS 1 keatas sudah bisa menggunakan fitur tersebut.
Di kanan atas terdapat kolom pengaturan format file (JPEG,PNG,GIF), kualitas serta ukuran gambar. Karena gambar yang akan saya optimalisasi berupa foto yang memiliki ribuan warna maka saya menggunakan format JPEG. Ubah angka di kolom quality sampai gambar benar-benar terlihat baik sesuai kebutuhan. Setelah puas hasil optimalisasi, klik save lalu simpan gambar di komputer kita. Lihat Gambar 3
. Nah pada kesempatan ini saya ingin berbagi sedikit tips tentang
bagaimana optimalisasi sebuah gambar untuk tampilan sebuah website.Salah satu faktor kenapa sampai lambatnya loading image itu karena, gambar tersebut tidak atau kurang dioptimalisasikan. Jika Anda seorang desainer ataupun fotografer masalah ini akan sangat mengganggu, karena publik yang ingin melihat hasil karya Anda di website terhalang karena lambatnya sebuah image untuk tampil pada website Anda. Jangan sampai teman, saudara, kerabat atau calon klien potensial kita kabur hanya karena sebuah gambar yang tidak teroptimalisasi dengan baik.
Sebelum saya memberikan bagaimana optimalisasi gambar ada baiknya saya menjelaskan dengan singkat tentang file-file gambar yang biasa Anda gunakan untuk ditampilkan pada website.
JPEG (Joint Photographic Expert Group)
Format file ini adalah format yang paling umum dan biasanya sudah sering diketahui oleh para desainer maupun para developer website, bahkan pengguna internetpun sudah tidak asing dengan format file ini. Format JPEG ini memiliki kemampuannya untuk menampikan foto dengan kualitas baik namun dengan ukuran file yang relatif kecil. Keunggulan lain dari format ini adalah fleksibilitasnya. Format JPEG dapat ditampilkan di semua perangkat komputer apapun operating system-nya. Jika gambar kita berupa foto yang kaya dengan warna, maka sebaiknya pilih format ini. JPEG mendukung sampai 16 juta warna, sehingga kita tidak akan mengalami distorsi warna yang berarti pada foto kita.PNG (Portable Network Graphic)
PNG adalah format kedua yang terkenal se-alam jagad internet setelah JPEG
. Kelebihan utamanya adalah mendukung transparansi seperti format GIF
namun dengan ukuran file yang lebih kecil. Ada dua macam format PNG yang
biasa digunakan untuk keperluan web, yaitu PNG 8 bit dan PNG 24 bit.
Keduanya memiliki kelebihan dan kekurangan masing-masing.PNG 8 biasa digunakan untuk gambar-gambar yang memiliki karakteristik warna solid seperti kartun atau logo. Tapi, jika gambar kita merupakan sebuah foto dan kita memerlukan background transparan maka kita bisa menggunakan PNG 24.
GIF (Graphic Interchange Format)
Format GIF biasanya digunakan untuk gambar animasi bergerak dengan dimensi yang kecil dan file size yang relatif kecil juga. Walaupun PNG pun sebenarnya bisa digunakan untuk keperluan gambar animasi dengan PNG sequenze-nya, tetapi biasanya GIF yang sering digunakan untuk animasi yang singkat dan ringan. Contoh penggunaanya seperti emoticon di setiap forum komunitas, blog dan website. atau biasa kita temui di gambar advertising yang bergerak. Pada Basicnya animasi GIF ini menggunakan sistem frame by frame.OPTIMALISASI MENGGUNAKAN ADOBE PHOTOSHOP
1. Buka halaman Adobe Photoshop lalu pilih gambar yang akan Anda optimaliasasikan. Lihat Gambar 1
Gambar 1
Gambar 2
Angka 16 sec @256 Kbps artinya gambar kita akan bisa ditampilkan sempurna setelah 16 detik dengan menggunakan koneksi internet yang kecepatannya 256Kbps. Penulis menggunakan Adobe Versi 7 sehingga tidak ada dropdown untuk mengatur kecepatan internet, tetapi untuk versi CS 1 keatas sudah bisa menggunakan fitur tersebut.
Di kanan atas terdapat kolom pengaturan format file (JPEG,PNG,GIF), kualitas serta ukuran gambar. Karena gambar yang akan saya optimalisasi berupa foto yang memiliki ribuan warna maka saya menggunakan format JPEG. Ubah angka di kolom quality sampai gambar benar-benar terlihat baik sesuai kebutuhan. Setelah puas hasil optimalisasi, klik save lalu simpan gambar di komputer kita. Lihat Gambar 3
Gambar 3
Kita perlu mempertimbangkan juga untuk siapa gambar kita. Jika kira-kira orang yang melihat web kita memiliki koneksi internet yang cepat maka kita bisa memperbesar kualitas gambar sampai ke quality 80-100, begitupun sebaliknya. Selamat mencoba
One Response to Bagaimana Mengoptimalkan Gambar Untuk Tampilan Website