Image Optimization

Submitted by admin@soz on Sat, 10/17/2015 - 16:06

Untuk imag optimization, perkara penting yang kita ambil berat ialah jenis image yang kita gunakan & saiz image. Jika saiz imag besar, maka laman web akan menjadi berat dan penguna lambat untuk download. Jenis image yang biasa dipakai ialah JPEG & PNG

Untuk mengecilkan saiz image - boleh gunakan pelbagai cara. Di sini dicadangkan mengunakan cara / program yang percuma yang dimasukan ke dalam komputer. Caranya ialah: -

  1. Creat folder baru di C:/Program Files/Image Optimization
  2. Download file ini: image-optimozation.zip
  3. Unzip fail tersebut & masukan ke dalam foler tadi (Image Optimization)
  4. Lepas itu right click start menu dan click "run" (untuk window 10) - untuk window lain ada beberapa cara..
  5. Taip "redgedit"
  6. Cari HKEY_CLASSES_ROOT\Directory\shell\
  7. Right click "shell" & click "New" & click "Key" & taipkan "Optimization Images"
  8. Rigght click "Optimozation" & click "New" & click "Key" & taipkan "command"
  9. Double click "command" & masukan code di bawah pada "value"

            "C:\Program Files\Image Optimization\optimize.bat" "%1"

Bekarang kita boleh edit / compress image pada komputer. Boleh cuba pergi ke mana-mana folder yang mengandungi image jpeg atau png dan right click mouse > cari option "Optimize Image". Jika kita click, maka image akan di compresskan kepada saiz yang lebih kecil..selamat mencuba !


Mengunakan module Lazy-Load

Dokumentasi untuk versi 8.x-2.x


Things to consider:-
1) Aspect ratio
: Aspect ratio is about the ratio Width against Height. Maintain this aspect ration for all images to prevent an image become distorted. Aspect ratio depend to the image type

  • Landscape-style: 3:2 (eg 1000px width x 666px height) ~ mean width is 1.5 time longer than wheight

  • Portrait-style: 2:3 (eg 500px width × 750px height) ~ mean height is 1.5 time longer than width

2) Image width:

  • Generally about 1500-2500 pixel base on what purpose

  • Full width image (max): 2400 x 1600 px (with 3:2 aspect ratio)
  • Inside content (max): Horizontal – max width 1500px (eg 1000px x 660px)) 
                                            Vertical – max width 1000 px (eg 660px x 1000px)

3) Image size: Should be less tha 500kb
4) Alt text: Must give the Alt text for all image to tells search engines what the image is about, which makes it more likely that you'll show up in image searches.
5) Image Orientation: Landscape orientation look better (but depend to the need and purpose)

6) Image format: Jpeg