Home » Optimasi Wordpress » Cara Mengoptimasi Gambar Theme

Cara Mengoptimasi Gambar Theme

13 Des. 201063 comments
Cara Mengoptimasi Gambar Theme

Di postingan sebelumnya sudah cukup banyak saya bahas tentang cara meningkatkan performa atau kecepatan loading sebuah blog khususnya wordpress, baik dengan http compression mod_deflate dan mod_gzip, zlib compression, minimize sql queries, optimasi file css, database cache, widget cache dan lain-lain.

Cara lain untuk meningkatkan kecepatan loading yaitu kita harus mengoptimalkan penggunaan gambar terutama untuk gambar theme. Penggunaan gambar pada theme akan membuat tampilan blog menjadi sangat menarik. Tapi anda harus bijak dalam menggunakannya, seperti ukuran besarnya file gambar, skala gambar, jumlah gambar dan lain-lain.

Untuk mengoptimalkannya anda bisa mengompress ulang gambar-gambar yang anda pakai  menggunakan program pengolah gambar seperti Adobe Photoshop. Dan jangan lupa selalu gunakan metode Save for web untuk mendapatkan hasil ukuran file yang sekecil mungkin.

Untuk mendapatkan hasil kompresan dengan ukuran yang kecil tapi tampilan gambar tetap oke (tidak pecah), anda bisa menggunakan berbagai  variasi format gambar yang ada, bisa dengan format jpg (high, medium atau low), png (PNG-8 128 dithered) atau gif bisa dengan 32 dithered sampai 128 dithered. Untuk mendapatkan hasil yang lebih kecil lagi, anda bisa membuat variasi dengan pilihan color yang berbeda dari 2 color sampai 256 color.

Setelah itu upload kembali gambar hasil kompresi tersebut ke folder image yang ada di theme yang digunakan. Selanjutnya test hasilnya menggunakan Firebug (Analize performance). Jangan lupa bersihkan dulu cookies/cache pada browser Firefox yang digunakan. Lihat hasilnya di bagian Optimize images. Jika hasilnya seperti gambar di bawah ini berarti penggunaan gambar yang ada sudah optimal.

Optimize images

Jika hasilnya seperti gambar di bawah ini, sudah ada ceklist hijau tapi masih ada tanda plus atau seperti yang tengah dengan logo segitiga kuning atau malah seperti gambar yang kanan dengan logo peringatan berwarna merah, berarti penggunaan image atau gambar belum optimal.

Optimized images

Cara mengoptimalkannya, klik tanda plus di sebelah kiri Optimize images untuk melihat gambar mana saja yang masih perlu dioptimalkan, kemudian klik link Save as, simpan gambar tersebut dengan nama sesuai nama gambar yang ingin dioptimalkan tersebut. Selanjutnya upload ulang gambar-gambar tersebut ke folder image pada theme.

Cara lain untuk mengoptimalkan penggunaan gambar yaitu dengan memakai metode image sprite, yaitu menggabungkan beberapa image/gambar menjadi satu file kemudian panggil gambar tersebut dengan CSS Sprite (Combine images into CSS sprites). Dengan cara ini akan mengurangi jumlah http request dan Parallelize downloads across hostnames.

Untuk meminimalkan Parallelize downloads across hostnames atau menggunakan gambar dalam jumlah yang cukup banyak dalam satu host/domain baik yang ada di postingan ataupun theme, anda bisa menggunakan subdomain sebagai CDN (Content delivery network) untuk menaruh gambar-gambar static tersebut. Caranya?  mungkin postingan berikut ini bisa sedikit membantu : Cara Membuat CDN Dengan Subdomain.

Cara lain dalam menggunakan gambar pada area tertentu seperti background, header, sidebar, footer dll kita bisa menggunakan metode repeat image. Dengan menggunakan gambar yang cukup kecil anda bisa tetap mempercantik tampilan blog tanpa mengurangi kecepatan loading. Postingan berikut ini mungkin bisa sedikit membantu cara menggunakan metode repeat image untuk gambar background “Cara Mengganti Background Theme WordPress“.

Mudah-mudahan artikel tentang Cara Mengoptimasi Gambar Theme ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Mempercepat Loading Blog WordPress (Minimize SQL Queries)
  2. Mengenal Kode Widget Sidebar WordPress
  3. Tips Menjaga Dan Melindungi Keamanan WordPress
  4. Cara Menggabungkan File CSS WordPress
  5. Daftar Plugin Yang Saya Gunakan Di Blog Ini
  6. Cara Membuat Social Media Sharing Tanpa Plugin
  7. Cara Setting Permalink WordPress Untuk SEO, Performa dan Usability
  8. Cara Merapikan Keyword Plugin STT2
  9. Cara Menghapus Logo WP Dan Menu Di Admin Bar
  10. Cara Mengganti Sebagian Isi Postingan Dengan SQL
  1. 15-12-2010 at 18:25 | #1

    layak untuk dijadikan referensi memang mantap nih tips-tipsnya kang alwi

    theme saya sudah beberapa kali ganti kang habis sering coba-coba hehe

    Reply

    bang haris Reply:

    bener om buat referensi………

    Reply

    Muhammad Faisal Aziz Reply:

    Iya,bagus tips-tipsnya

    Reply

  2. 16-12-2010 at 08:50 | #2

    coba juga ah, biar mantap juga blog saya kayak punya kang alwi…hahaha

    Reply

    bang haris Reply:

    terus terang ane kurang pahan kode kode, tapi yang jelas blog bang alwi makin kuenceng loadingnya

    Reply

    Hybrid car Reply:

    Saya dulu juga begitu bung haris, tapi coba-coba deh baca-baca…akhirnya agak mudheng….

    Reply

  3. 16-12-2010 at 15:58 | #3

    makin top aja nih blog bang alwi, makin cepet loadingnya

    Reply

    bang haris Reply:

    iya yah…………makin ramping dan gesit……

    Reply

    bang haris Reply:

    semakin cepet di akses, walaupun akses internet lambat

    Reply

    Alwi Reply:

    karena dalemannya dah saya oprek habis2an heee …. biar pengunjung makin betah

    Reply

    Muhammad Faisal Aziz Reply:

    iya,makin cepet loadingnya *lebih cepet lagi pake GC*

    Reply

  4. 16-12-2010 at 16:23 | #4

    blognya saya masukin ke “blog dofollow indonesia”mas..

    Reply

    Alwi Reply:

    Waduh mohon maaf blog ini dah gak dofollow lagi

    Reply

    Hybrid car Reply:

    Hehe..belum tahu rupanya julicavero….sudah lumayan lama nih udah nggak dofollow.

    Reply

  5. 16-12-2010 at 17:00 | #5

    bermanfaat Pak…Alwi…keren bangettt

    Reply

  6. 16-12-2010 at 17:03 | #6

    wah mantap mas tipsnya saat ini load page webku memang agak lemot.

    Reply

  7. 16-12-2010 at 17:03 | #7

    wah mantap mas tipsnya saat ini load page webku memang agak lemot.

    Reply

    Muhammad Faisal Aziz Reply:

    Ke semua web lumayan lemot

    Reply

  8. 16-12-2010 at 20:25 | #8

    ikutan akh …. biar makin oke loadingnya

    Reply

  9. 17-12-2010 at 09:23 | #9

    dukung ya…sobat dalam lomba blogger se-wilayah III cirebon dengan memberi coment. tanks

    Reply

  10. 17-12-2010 at 12:22 | #10

    Mantab infonya.. Optimasi images memang penting banget, dan pemakaian bandwith terbesar dihabiskan pada saat meload images..

    Reply

Comment pages
3+7=? (Wajib diisi)