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 Mengganti Sparator Tag dan Category
  2. Mengenal Kode Widget Sidebar WordPress
  3. Menghemat Quota Bandwidth dengan HTTP Compression
  4. Cara Membuat Breadcrumb Di WordPress
  5. Cek Performa Blog Dengan Firebug Dan Page Speed
  6. Cara Menggabungkan File CSS WordPress
  7. Cara Menyembunyikan Versi WordPress
  8. Cara Membatasi Jumlah Karakter Komentar
  9. Saran Dari Google Adsense Tentang Tata Letak Dan Navigasi
  10. Cara Setting Permalink WordPress Untuk SEO, Performa dan Usability
  1. 18-12-2010 at 13:03 | #1

    ikutan nimbrung aja ah.. walaupun kurang ngerti..

    Reply

    Berpikir Positif Reply:

    semoga akan ngerti pada akhirnya

    Reply

  2. 21-12-2010 at 14:56 | #2

    Ok deh Mas Alwi. Jadi keinget tadi sy berkomentar di blognya Om Is ttg hobi sy nyimpan gambar pake save for web-nya adobe. Makasih pencerahannya.

    Reply

  3. 21-12-2010 at 14:59 | #3

    Ok deh Mas Alwi. Jadi keinget tadi sy berkomentar di blognya Om Is ttg hobi sy nyimpan gambar pake save for web-nya adobe. Makasih pencerahannya.

    Mas, sy kirim komen koq ada peringatan “file function.php tidk ditemukan”. Malahan sy disuruh ngecek ke blog sy. Padahal sy kan berkomentarnya di blognya Mas Alwi, bukan blog sy.

    Nah, sy pikir komentar sy tidak masuk. Sy submit lagi malah dibilang duplicate comment. Hedehhh.

    Maaf muncul begituan, kemaren saya ngoprek plugin wp threath comments belum sempurna keburu ada acara, sekarang mudah2an sudah beres …

    Reply

  4. 21-12-2010 at 21:46 | #4

    Kunjungan perdana .. ikut mempelajari …

    Reply

  5. 22-12-2010 at 09:52 | #5

    kelamaan masalah seo dan masalah theme, jadinya kita malah gak posting!

    Reply

    Berpikir Positif Reply:

    lah ini satu orang ya mas kok komentarnya sama semua

    Reply

  6. 22-12-2010 at 19:53 | #6

    Ukuran gambar untuk web itu yang pas sekitar berapa kb ya?

    Reply

  7. 5-1-2011 at 18:23 | #7

    nice info mas..kelamaan masalah seo dan masalah theme, jadinya kita malah gak posting!

    Reply

  8. 1-2-2011 at 15:32 | #8

    Ditunggu cdn nya pak.. saya baca artikel luar susah jga mahaminnya…

    Reply

    dHaNy Reply:

    WAduh masuk kotak ya pak..

    Reply

    Alwi Reply:

    Banyak banget memang teknik cara dan jenisnya, saya sebenarnya juga pakai dan pernah janji akan membuatkan postingannya cuman sampai saat ini masih terus saya uji coba dulu teknik dan cara mana yg paling simpel mudah dan murah tentunya alias gratis heee

    Reply

  9. 5-2-2011 at 02:55 | #9

    Saya coba dulu ya mas.

    Reply

  10. 3-4-2011 at 19:03 | #10

    info yang menarik layak dicoba

    Reply

Comment pages
3+7=? (Wajib diisi)