Panduan Blogger optimumkan Imej untuk blog agar lebih laju

Sekadar perkongsian untuk rakan blogger bagaimana optimumkan imej untuk blog supaya layout blog korang akan lebih ringan, kemas dan tersusun. Tidak rongak, tidak turun naik dan yang penting tidak melambatkan proses loading.  Jangan sesekali upload size yang besar.. huihh.. Memang banyak yang kita kena belajar sebenarnya kalau nak jadi blogger. Ini nak cerita pasal imej sahaja.

Loading issue

Kesan meletakkan gambar yg bersaiz besar akan membuat korang terpaksa menyewa space yang lebih besar di hosting provider pada satu hari nanti. Maka lebih besar space lebih banyak RM yang akan dikenakan kepada korang nanti..

Optimumkan imej untuk blog ini bermaksudkan kecilkan saiz gambar yang korang akan upload dalam setiap entri nanti.

Sebaiknya, size setiap imej mestilah tidak lebih dari 100kb… kalau boleh dapat dalam 75kb tapi kalau nampak gambar pecah, boleh up mengikut kesesuian.

Untuk tambahan perkongsian berkenaan imej ini, komposisi  atau susunan yang tidak teratur juga mampu menggugat minat pembaca. Jadi ini  sangat penting untuk semua blogger faham kepentingan imej, tak kiralah atas platform apa yang korang pakai samada wordpress atau blogspot atau apa sahaja.

Kenapa penting untuk optimumkan imej untuk blog?

1. SEO 2019 adalah berkaitan dengan speed loading setiap blog atau website, bukan sekadar content semata mata. Jadi faktor optimize atau optimumkan  imej ini memang satu faktor yang perlu  dititik beratkan setiap kali korang membuat entri blog.
2. SEO pula akan berkembang kepada  SXO , Search Experience Optimization.  tambahan pula dizaman Mobile kesemua faktor page speed, mobil responsif, content, internal linking dan bounce rate sangat sangat mempengaruhi carian masuk ke dalm blog kita.
3. Jadi marilah kita pastikan imej yang di upload ke blog kita membawa kebaikan kepada blog dan bukan memudaratkannya lagi.
4. Pernah tak korang alami macam ni. Kadang kadang korang rasa seperti tidak kena dengan blog, tapi tidak tahu apa puncanya. Sebenarnya faktor imej yang tidak standard juga memberikan impak  ketidakseimbangan kepada layout keseluruhan  blog.

Dengan pengalaman bekerja team designer yang ramai maka secara tidak lansung aku paham apa yang diperlukan untuk gambar itu lebih menyerlah dalam sesuatu layout. Kemudian bila masuk dalam dunia blogging baru aku sedar ada pelbagai kategori blogger pula.

Sebelum aku meneruskan perkongsian bagaimana nak Optimumkan imej untuk blog aku nak bawak korang faham sepintas lalu apakah design principles atau prinsip design . Kalau korang faham ini insyallah akan mudah faham seterusnya

Design principles/ Prinsip Design

Bila membina blog bermakna korang juga sedang melakukan kerja kerja design, kerana terdapatnya elemen gambar dan layout yang  menjadi tunggak sesuatu design

• balance – keseimbangan
• proximity – jarak
• alignment – jajaran
• repetition – pengulangan
• contrast – kontras
• space – ruang

Yang lebih penting kita kena pastikan blog kita akan nampak lebih kemas dan mudah dibaca. Jangan lupa kita adalah manusia, kita perlukan ruang untuk bernafas.

Itulah kepentingan white space.

Pemilihan paragraph align left adalah yang terbaik samada untuk sebarang kerja design untuk printing seperti brochure, leaflet, buku dan ia juga bagus untuk design  digital platform seperti blog. Dengan kata lain apa sahaja yang melibatkan text yang panjang!

Manakala Justify akan membuatkan layout a bit cramp dan penuh. Pemilihan align left ini juga mewujudkan breathing space.

Tips Panduan Blogger Untuk optimumkan Imej Blog

1. Tengok template layout blog yang dipakai, refer sample sedia ada
   Sebarang template yang korang pakai sebenarnya selalunya memberikan sample atau contoh dari size gambar untuk blog tersebut.  Sila click images tersebut dalam media, pastinya korang boleh lihat size dimension yang dipakai.
2. Image Landscape atau potrait. 
   Lihat cara template tersebut, kalau kebanyakkan landscape tetapkan final output yang akan dipakai adalah landscape. Normally sewaktu design dibuat designer atau developer merekabentuk dalam kesesuaian gambar untuk layout tersebut. Jadi jangan terlebih kreatif sehingga menggangu layout asal
3. Sewaktu Shooting
   Sewaktu pergambaran produk, scenary atau apa sahaja. Pastikan korang ambil gambar dalam bentuk landscape dan portait. Ambil perbagai gambar yang agak loose dan close up. Pastikan ada head room untuk  sekiranya ada orang dalam gambar tersebut.
4. Proses editing
   Gambar yang diambil mestilah melalui proses editing, jangan sesekali up gambar dari phone ke dalam platform blog. Sizenya nanti ya ampun! mengaumlaaa. Tambah sekarang banyak phone mampu menghasilkan resolution yang besar.  akan kongsikan proses untuk editing. Dengan kata lain korang perlu mengubah saiz imej anda terlebih dahulu dalam editor imej seperti Photoshop, Lightroom, Pixlr – atau juga MS Paint, ataupun online tools
5. Setkan Size
   Sebaiknya setkan size untuk gambar yang akan dipakai. size yang dimasukkan disini adalah dimension width x height dalam pixel format. Standardize kan untuk kesemua gambar
6. Setkan template – standardisekan size
   Cara paling senang dan cepat, sekirannya pengguna photoshop siapkan satu file untuk proses editing. Drag gambar tersebut dalam size yang ditentukan. Kesemua gambar akan lebih seragam
7. Watermark
   Untuk mengelak gambar dicuri, pastikan korang letakkan watermark. Pengguna psd boleh setkan satu layer khas untuk watermark.

Imej di atas menunjukkan perbezaan gambar yang diletakkan dalam format potrait vs landscape dalam mobil atau handphone.  Imej yang diletakkan dalam bentuk potrait telah mengambil space yang banyak berbanding landscape.  Screen shot diatas diambil dari Iphone X yang mempunya keluasan skrin yang luas.

Jadi, cuba bayangkan bagaimanakah pula kalau skrin mobil HP yang lebih kecil.

Basic Optimumkan imej untuk blog atau website

Kita mesti kenal dan tahu jenis jenis format image yang boleh diguna pakai mengikut keperluan

• Jpg : gunakan untuk gambar dan reka bentuk di mana orang, tempat atau benda dipaparkan
• PNG terbaik untuk grafik, logo, reka bentuk teks-berat, tangkapan skrin, dan apabila anda memerlukan imej dengan latar belakang telus
• Gif : jika anda memerlukan animasi, jika tidak, gunakan PNG

Cara editing di Photoshop untuk Optimumkan imej untuk blog

Aku memang menggunakan psd atau photohoshop untuk optimumkan imej yang akan dimasukkan didalam blog nanti. Ini sebagai contoh. File yang aku gunakan untuk editing lebih cepat.

Setkan satu file yang complete dengan imej size yang sama. Contoh blog aku dimension adalah 600 x 424 pixel. Jangan follow aku yer. Korang set ikut blog korang sendiri.

Setelah masukkan dalam template yang sedia ada dan juga ada editing atau improvisasi jika ada. Kemudian click export for web. Automatik kita ada dapat screen seperti dibawah yang memaparkan kualiti dan size imej yang berbeza.

Imej kita memang berwarna warni, lagi banyak warna lagi  maka besarlah file tersebut. Jadi final output yang terhasil selalunya berbeza beza, jadi selalunya aku tidak fix option yang mana. Yang penting tidak pecah dan size bawah 100kb

Dalam empat screen dibawah sebenarnya ada perbezaan kualiti gambar. Dari yg tingin hinggalah paling rendah. Pilihlah gambar yang sharp dan file bawah 75kb. Korang boleh tengok  perbezaan setiap file dibawah yang aku bulatkan warna biru

Untuk mereka yang tidak memmpunyai software photoshop jadi option yang ada sama ada menggunakan paint dalam windows dan juga online tools sepeti Canva online yang korang boleh setkan dimension yer . atau beberapa tools lain seperi yang di highlightkan dalam entri https://wiser.my/kecilkan-saiz-gambar-sehingga-90-dengan-kualiti-optimum/

Sebagai contoh dari befunky.com dibawah ini juga ada menyatakan resize imej seperti di skrin kecik.

So ini lah sedikit sebanyak perkongsian aku kepentingan untuk korang refer. Buzz me kalau tak faham apa apa or letak komen dibawah yer.