3 Tips Praktikal Untuk Optimasi Imej dan Gambar Supaya Ringan

Terdapat dua jenis optimasi imej dalam wordpress:

1. Optimasi alternate text (untuk SEO)
2. Optimasi saiz file imej (untuk kelajuan)

Kebanyakkan orang hanya mementingkan optimasi alternate text, dan tidak mempedulikan kepentingan optimasi saiz imej.

Ini adalah kesilapan serius yang sering terjadi.

Imej adalah punca utama yang mengurangkan kelajuan laman web anda dengan drastik.

Walaupun dengan penggunaan caching dan  CDN, imej yang tidak dioptimasi masih akan meninggalkan impak yang cukup besar dalam memperlahankan kelajuan blog.

Oleh itu langkah pertama anda dalam proses meningkatkan kelajuan blog adalah dengan melakukan optimasi imej dalam website anda.

---

Sebagai pemilik laman web, imej adalah dibawah kawalan kita sepenuhnya.

---

Tapi malangnya, bukan semua orang pandai mengoptimasikan imej.

Ia tidak sukar, tetapi ia jarang didedahkan. Maka tidak hairanlah jika anda tidak tahu.

Secara purata, imej membebankan sehingga 30% daripada jumlah keseluruhan load time laman web kita.

Dalam sesetengah kes yang pernah saya handle, ada yang sehingga hampir 60%. Ini adalah sesuatu yang sangat tidak boleh diterima bagi saya.

Disini adalah contoh bagaimana imej yang tidak dioptimasi akan menjejaskan laman web anda:

Bayangkan laman web anda mengambil masa 12 saat untuk dimuat (load) dan berat keseluruhan laman adalah 8MB..

… dimana sebahagian daripada jumlah itu, imej sahaja sudah seberat 6.7MB!

– Ini adalah sesuatu yang gila bagi saya!

Ada sebab penting sebenarnya mengapa anda seharusnya membuat optimasi imej.

Bila anda membuat optimasi imej, maka anda akan:

• Mengurangkan masa loading laman web dengan drastik
• Mengurangkan pembaziran bandwitdh.
• Meningkatkan kedudukan di SERP
• Paling penting, ia memberi kesan browsing experience yang baik kepada pembaca.

Tetapi jangan risau, ada cara praktikal untuk mengerjakannya dan mengoptimasi imej, agar anda boleh meningkatkan kelajuan laman web anda.

 

Dimensi sesuatu imej bermaksud;

Sebeberapa banyak ruang yang diperlukan oleh imej di dalam skrin, dan disukat dalam unit pixel (px).

Semakin besar dimensi sesuatu imej, maka semakin besar saiz atau berat sesuatu imej itu.

Saiz berat imej biasanya diukur dalam unit Kilobyte (kB) atau pun Megabyte (mB)

 1000 kB = 1 mB 

Untuk memudahkan pemahaman anda, kelebaran ruang kolum utama blog ini adalah 600px.

Contohnya, jika saya mengambil gambar dengan kamera saya, kelebaran gambar itu biasanya sekitar 4000px (atau lebih) dengan berat sekitar 5MB (atau 5000kB).

Jika saya mengambil gambar dengan kamera saya dan terus uploadnya direct ke blog tanpa sebarang optimasi..

… maka saya telah memuatnaik sesuatu 6 kali ganda lebih daripada apa yang diperlukan.

Ia adalah sesuatu pembaziran dan pada masa sama juga membebankan server saya.

Jadi, walaupun benda ini nampak mudah, tetapi kesannya sangat kronik.

Ini adalah punca masalah utama yang membataskan kelajuan blog.

Kerana ia menambah berat dan beban server yang tidak diperlukan kepada blog anda.

 

Optimasi imej tidaklah sukar.

Semua orang boleh melakukannya.

Ia hanya memerlukan sedikit masa dan menggunakan peralatan yang betul supaya imej tersebut ringan serta tidak terjejas kualitinya.

Untuk melakukan optimasi imej yang sempurna, saya cadangkan tiga langkah asas ini:

 

1# Mengubah saiz imej

---

Perkara pertama yang anda perlu buat adalah mengubah saiz imej kepada saiz yang tepat dan sepatutnya.

Untuk imej pada artikel blog, pastikan anda memuat naik gambar mengikut saiz kelebaran kawasan kolum kandungan blog.

Pastikan jangan muatnaik gambar yang lebih lebar dari kawasan kolum tersebut.

Jika anda ingin gunakan imej tersebut didalam slider, pastikan dahulu saiz dimensi slider tersebut.

Bagaimana nak tahu saiz kelebaran kawasan kandungan blog anda?

Gunakan developer tools dalam Mozilla atau Chrome anda.

Right-click dan pilih pada ‘inspect’ (atau ‘inspect elemet’ pada Mozilla), kemudian klik pada icon ‘pick element‘.

Selepas itu ada hanya perlu lalukan anak panah tetikus anda ke kawasan kolum kandungan blog.

Saiz dimensi akan dipaparkan mengikut skala pixel (lebar x tinggi).

Contoh kawasan kolum kandungan blog dalam halaman ini adalah lebarnya 600 pixel.

Jadi apa yang saya perlu buat adalah memastikan saiz lebar gambar saya tidak melebihi 600 pixel sebelum dimuatnaik ke dalam entri yang ingin diterbitkan.

Alternatif lain, anda boleh gunakan extention chrome ini untuk memudahkan anda: Page Ruler

Setelah anda berjaya mengetahui saiz dimensi imej anda yang sepatutnya, anda boleh mula gunakan beberapa tools untuk mengubah saiz image.

Tools kegemaran saya adalah Photoshop.

Pertama sekali buka imej tersebut dalam perisian photoshop.

1. Lihat pada tab bahagian atas, dan klik pada ‘image’
2. Pilih option ‘image size‘ dalam dropdown menu tersebut.
3. Kemudian paparan seperti dibawah akan muncul:

1. Masukkan saiz dimensi imej yang anda perlukan (contoh blog ini adalah 600px)
2. Sila check semua petak-petak kecil ini.

Selesai satu langkah.

Langkah seterusnya kita perlu ‘memampatkan imej’ tersebut.

 

2# Memampatkan imej (compressing)

---

Kita sudah selesai berurusan dengan saiz imej, seterusnya kita perlu mengerjakan berat fail imej pula.

Kita mahu memampatkan imej supaya menjadi sekecil yang boleh, agar masa loading lebih cepat.

Matlamatnya adalah mengurangkan saiz berat fail imej tersebut.

Tiada angka khusus untuk berat imej kerana setiap imej bergantung dengan kegunaan kita.

Tetapi secara umum, saya menyarankan supaya berat file setiap imej hendaklah dibawah 100kB.

Lagi ringan lagi bagus.

Tetapi anda harus ingat, kesan proses compression ini adalah ia akan mengurangkan sedikit kualiti gambar.

Jadi kita harus seimbangkan diantara saiz file dan kualiti gambar tersebut.

Dibawah saya tunjukkan cara memampatkan gambar menggunakan photoshop:

1. Pada tab bahagian atas, pilih ‘File‘
2. Selepas itu, pilih option ‘Save for Web & Devices…‘
3. Seterusnya paparan seperti dibawah akan muncul:

Ikuti langkah seperti yang ditandakan diatas:

1. Pilih format imej yang diperlukan (JPEG, PNG atau GIF)
2. Tentukan kualiti imej yang anda mahu. Anda boleh melaras slider mengikut keperluan.
3. Sila check dua kotak kecil ini (optimized & Convert to sRGB)
4. Anda boleh mengubah saiz dan tahap sharpening imej disini.
5. Disini memaparkan anggaran jumlah berat file imej anda. (Saya lebih prefer menyasarkan file dibawah 100kB – tetapi ia bergantung kepada jenis gambar)
6. Bila telah berpuas hati, anda boleh save gambar anda.

Sekarang imej anda telah sedia untuk dimuatnaik ke laman web anda.

 

3# Gunakan format imej yang betul

---

Imej untuk web sepatutnya disimpan dalam tiga jenis format yang utama, iaitu  .gif, .png, .jpg 

• JPEG adalah format terbaik untuk imej berbentuk gambar fotografi umum, yang tidak memerlukan sebarang kesan tranperansi. Format ini senang dimampatkan untuk mendapatkan saiz yang kecil sebelum dimuat naik.

• PNG selalunya menghasil saiz fail yang lebih besar. Oleh itu ia seharusnya digunakan hanya bila anda memerlukan gambar yangmemerlukan ciri transperansi.

• GIF adalah format yang paling jarang digunakan. Ia biasa digunakan untuk menghasilkan imej banner yang bergerak. Ia mempunya julat warna yang terhad.

 

Jangan risau, terdapat banyak perisian online diluar sana akan membantu anda.

Antara tools online yang bagus adalah:

• PicMonkey
• Pixlr
• FotoFlexer
• GIMP

Kesemua aplikasi diatas adalah percuma dan boleh menjalankan tugas-tugas suntingan asas dengan mudah.

Tidak kisah mana satu yang anda gunakan, yang penting adalah ia membolehkan anda menetapkan jumlah pixel yang diperlukan dan memudahkan optimasi imej anda.

Plugin wordpress untuk compress imej pula adalah:

• Imsanity
• EWWW Image optimizer

Komuniti wordpress mencadangkan plugin-plugin ini kerana ia tidak bergantung kepada server luar untuk membuat optimasi imej anda.

 

Tolong simpan didalam minda, apabila memampatkan saiz imej dengan terlalu banyak, ia akan membuatkan imej tersebut kehilangan kualiti dengan begitu ketara.

Ia akan jelas kelihatan.

Kita pasti tidak mahu imej dan gambar yang hodoh.

Oleh itu, penting untuk kita menyunting imej secara seimbang supaya kualitinya tidak terjejas.

Kepada mereka yang sangat mementingkan kualiti gambar (contohnya jurugambar), saya mencadangkan anda menggunakan Lazy Load.

Setelah plugin tersebut diaktifkan, imej hanya akan dipamerkan bila ia terdedah dalam pelayar (browser).

Ia banyak membantu mengurangkan saiz permulaan laman web kerana imej hanya akan dimuatkan apabila pelawat scroll down sesuatu laman web itu.

Semoga tutorial ini membantu anda membuat optimasi imej dan seterusnya meningkatkan kelajuan blog.