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. Optimasi Link Komentator WordPress
  2. Cara Membuat Tombol Go Top/Back To Top
  3. Modifikasi Tampilan Halaman Daftar Isi
  4. Cara Membuat WordPress Page Number Tanpa Plugin
  5. Cara Mengurangi Jumlah Queri Pada Tampilan Categori WordPress
  6. Cara Membuat Random Post
  7. Cara Memblokir External Requests di Dashborad
  8. Cara Membatasi Jumlah Karakter Komentar
  9. Cara Setting Permalink WordPress Untuk SEO, Performa dan Usability
  10. Cara Membuat Breadcrumb Di WordPress
  1. 15-5-2011 at 15:07 | #1

    aduhh awaknya bingung memulainya………setelah di coba ternyata gampang, coba aja lihat blog saya www.jualcdtutorial.com setelah sukses membangun web itu saya mencoba membuat web toko online www.jualtutorial.com makasih gan ilmunya

    Reply

  2. 27-5-2011 at 20:42 | #2

    dicoba Om,,moga berhasil ok

    Reply

  3. 21-9-2011 at 23:56 | #3

    nice info bozzzzzz………………………………………………………..

    Reply

  4. 26-9-2011 at 15:38 | #4

    dipantengin dolo nih… buat belajar…

    Reply

  5. 6-4-2012 at 16:01 | #5

    Mas cara menggunakan CSS Sprite gimana ya ?


    Kalau mau praktis pakai CSS Online Generator …… banyak banget Googling aja dg kata kunci tsb

    Reply

  6. 9-12-2012 at 06:20 | #6

    wah nice info mas, oh ya saya pernah dengar atau pernah baca di web mana gitu, kalau kita punya header gambar yang ukurannya besar katanya bisa di kompress atau gambarnya menjadi terpecah kecil-kecil sehingga mempercepat loading gambar headernya. gimana caranya ya gan? coba deh lihat blog saya. www.suryapost.com kan headernya gede banget, bisa bikin loading lelet. please bantu ya gan?

    Reply

  7. 6-2-2013 at 11:46 | #7

    Panduannya lengkap, dicoba dulu untuk praktek, terima kasih.

    Reply

Comment pages
2+6=? (Wajib diisi)