Archive for category: Tutorial

Banyak yang menanyakan seperti ini:

“Kok website saya lambat yah, padahal waktu awal dibikin cepat?”
“Kok hosting saya habisnya cepat banget yah, padahal kemaren baru upgrade?”
“Kok bandwidth saya udah abis lagi yah, padahal website gak ada penambahan konten?”

Pertanyaan-pertanyaan seperti di atas sering saya terima akhir-akhir ini. Dan akhirnya kalau ditelusuri dengan seksama semua hal tersebut terjadi karena perilaku user sendiri pada saat mengoperasikan websitenya.

Komponen website biasanya terdiri dari design (theme/template) dan konten. Konten itu sendiri terdiri dari teks, gambar, video atau script (Flash + javascript). Beruntung saat ini hampir semua konten video diambil alias di outsource ke Youtube, Video atau Vine. Jadi sebagai pemilik website, video tidak menjadi hal yang memusingkan.

Gambar pada website adalah musuh dalam selimut

Penggunaan gambar yang tidak bijaksana sering mengakibatkan pemborosan dalam website dan bisnis online. Gambar yang membengkak berarti Anda perlu membeli hosting yang lebih besar lagi, yang tentu saja memerlukan biaya. Penggunaan gambar yang tidak bijak juga membuat website Anda menjadi lambat saat di-browse oleh visitor atau mungkin calon pembeli. Tidak jarang akhirnya visitor atau calon pembeli ini meninggalkan website Anda.

Demi tujuan dagang, gambar dan banner iklan didesain dan dibikin sebesar-besarnya. Padahal menurut statistik pengguna internet di dunia paling banyak menggunakan komputer dengan lebar resolusi 1024 pixel dan 1260 pixel di urutan ke-2. Yang menggunakan 1260 pixel banyaknya adalah user di Amerika dan Kanada (biasanya MAC user).

1024 pixel udah cukup maximal.

Jadi sebenarnya membuat foto produk atau banner untuk iklan di dalam website, 1024 pixel udah cukup maximal. Tapi untuk lebih idealnya, perhatikan design website Anda. Apakah sehalaman penuh (full width) atau ada sidebar nya (navigasi di kiri atau di kanan). Jika ada, berarti lebar daerah konten Anda lebih kecil lagi. Anda bisa menggunakan Photoshop untuk mengecek berapa lebar bidang konten Anda di website. Jika misalnya lebar maksimumnya adalah 800pixel, maka sebaiknya image/foto yang Anda upload ke website Anda tidak melebihi 800pixel.

Pengaruh buruk gambar yang tidak efisien

• Biaya hosting membengkak
• Calon pelanggan kabur
• Website menjadi lemot
• Image atau citra bisnis Anda bisa menjadi kurang baik
• SEO menjadi lebih sulit dan membutuhkan biaya lebih besar
• Digital marketing Anda bisa terbengkalai

Cara menyimpan gambar agar efisien untuk website

Berikut ini adalah panduan untuk save gambar agar efisien di website. Efisien di sini artinya gambar tetap enak dilihat orang pengunjung website Anda, namun ukuran gambar (file size) nya tidak terlalu besar. Software yang akan digunakan adalah Photoshop. Photoshop yang akan digunakan tidak harus versi terbaru, karena fitur yang digunakan dalam panduan ini hanya fitur mengubah image size dan save images for web.

Tipe file images

File images dapat di-save dalam format jpg, gif dan png. Sebenarnya adalah lebih banyak lagi tapi 3 jenis ini yang paling sering digunakan dalam website.

Bagaimana menentukan apakah format file yang cocok ? Tips praktisnya adalah jika image yang Anda olah bentuk terdiri foto, baik hanya sebagian atau semua, sebaiknya gunakan format jpg. Selain itu gunakan gif atau png, tergantung dari filesize nya.

Contoh Panduan Save Images

Berikut ini adalah foto menu resep yang saya temukan di salah satu menu di internet. Ketika di save di komputer untuk diperiksa, ditemukan bahwa file size nya sebesar 301 KB dan dimensinya 1600×1200 pixel.

Hal ini sangat mubazir karena size nya terlalu besar dan dimensinya juga terlalu besar.

File gambar ini kemudian kita edit menggunakan photoshop. Hal yang pertama kita lakukan adalah mengubah dimensi gambar yang terlalu besar. Kita harus menentukan apakah mengubah menjadi lebar 1024 pixel, 800 pixel atau 640 pixel. Atau lebih baik lagi kalau lebar disesuaikan dengan lebar maksimal bagian konten di website Anda.

Pada contoh isi saya ubah menjadi lebar 640 pixel agar sesuai dengan lebar maksimal blog saya ini. Klik Images > Images Size untuk mengubah dimensi images

Jangan lupa centang bagian Constrain Proportions, jadi Anda hanya perlu mengubah nilai width, dan nilai height otomatis mengikuti. Kalau Constrain Proportions tidak dicentang, Anda perlu menghitung dan mengisi sendiri nilai height nya, dan ada kemungkinan gambarnya menjadi tidak simetris.

Setelah dimensinya berubah gambar akan menjadi seperti berikut ini:

Dari gambar di atas dapat dilihat bahwa gambar menunya cukup besar dan jelas untuk menunjukkan details dan kelezatan menunya.

Langkah selanjutnya adalah menyimpan atau save gambar. Klik File>Save for Web. Anda akan menemukan tampilan sebagai berikut:

Tampilan di atas dicoba setting menggunakan gif dengan colors 256, dan hasilnya size gambar 146,8K. Masih sangat besar. Itu sebabnya saya selalu menyarankan untuk foto atau sebagian besar gambarnya terdiri dari foto, gunakan format file JPEG.

pengaturan gambar di atas adalah format JPEG dengan level High. Ukuran gambar nya sebesar 49,9KB.

Pada format JPEG, ada 5 level settingan, Maximum, Very High, High, Medium dan Low. Berikut adalah data ketika diubah-ubah ke setiap level:

• Maximum: gambar bagus, size 208 KB
• Very High: gambar bagus, size 90,97KB
• High: gambar bagus, size 49,9KB
• Medium: gambar mulai ada sedikit bagian yang terkompres, size 22, 86KB
• Low: gambar banyak bagian terkompres, size 14,4KB.

JPEG level low (klik untuk perbesar gambar):

JPEG level medium (klik untuk perbesar gambar):

JPEG level high (klik untuk perbesar gambar):

Dari ketiga contoh di atas, bisa Anda perhatikan pada saat gambar ditampilkan dalam kondisi thumbnail, hampir tidak ada perbedaan gambarnya. Anda baru bisa melihat perbedaan gambar, ketika gambar diperbesar. Level low tidak menjadi pilihan karena banya bagian gambar yang pecah karena dikompres. Jadi pertimbangan antara level medium atau high. Pada kondisi ini saya memilih high karena size nya masih di bawah 50KB dan gambarnya bagus.

Namun, jika kondisi konten hanya bisa memuat gambar dimensi sekitar 400-500 pixel, saya akan memilih level medium. Tips untuk toko online: rata-rata biasanya yang digunakan itu adalah level medium.

Kesimpulan

Jadi kesimpulannya adalah kita menggunakan Photoshop untuk menyimpan gambar pada format dan level yang efisien, dimana gambar tetap enak dilihat dan ukurannya sekecil mungkin. Di atas adalah contoh jika kita menyimpan dalam format JPEG.

Untuk format GIF (lihat gambar di bawah), Anda hanya perlu mengubah Colors, apakah 2, 4, 8, 16, 32, 64, 128 atau 256 bit.

Untuk format PNG-8(lihat gambar di bawah), Anda hanya perlu mengubah Colors, apakah 2, 4, 8, 16, 32, 64, 128 atau 256 bit.

Untuk format PNG-24, pilihannya hanya ada 2, apakah background transparent atau tidak. Biasanya saya hanya menggunakan PNG-24 untuk gambar-gambar yang backgroundnya transparan. Hampir 90% biasanya untuk save gambar yang akan digunakan menjadi logo.

Selamat mencoba!! Semoga gambar-gambar yang mubazir tidak lagi menjadi beban bagi website bisnis Anda.