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. Modifikasi Tampilan Halaman Daftar Isi
  2. Optimasi Secret Key pada file wp-config.php
  3. Cara Setting Plugin WP Super Cache
  4. Tips Menjaga Dan Melindungi Keamanan WordPress
  5. Tips Menghemat Quota Bandwidth
  6. Cara Membuat Spoiler
  7. Cara Menghapus Versi WordPress Pada Plugin Google XML Sitemap Generator
  8. Mematikan Fungsi Autolink di Kotak Komentar
  9. Cara Submit Blog atau Website di Google Webmasters
  10. Cara Mempercepat Loading Blog WordPress (Minimize SQL Queries)
  1. 13-12-2010 at 07:34 | #1

    Akhirnya aku bisa merasakan yang PERTAMA !

    Reply

    Hybrid car Reply:

    Ternyata rasanya nikmaaaaaat…! hehe…

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?! emang nikmat hehehe

    Reply

    Metrotik Reply:

    izin nyelip sekalian melapor baru sempat mampir.

    Reply

  2. 13-12-2010 at 07:36 | #2

    Kalau saya sering pake cara yang Image sprite itu bung alwi.

    Reply

    alamendah Reply:

    Image sprite?, kalau minum sprite saya tahu… hikhikhik

    Reply

    Hybrid car Reply:

    eh…enggak boleh ada pesan sponsor lho bung alam…hehe…

    Reply

  3. 13-12-2010 at 09:54 | #3

    yang subdomain itu pake CNAME ya?
    makin ga sabar nunggu CNAME ma CDN nya..
    pengen grade firebug nya paLing tidak mendekati m-alwi dot com.. ^^,
    .
    makasih, Kang.. sementara nyoba tutoriaL yang ada duLu…

    Reply

    Hybrid car Reply:

    Masih ada PR yang lalu ya Bung Hari ?

    Reply

  4. 13-12-2010 at 18:39 | #4

    Saya palingan mengompress ulang tiap gambar yang mau tak upload.

    Reply

    alamendah Reply:

    cara kedua dan ketiga gak terlalu ngeh… :hehehe

    Reply

    Hybrid car Reply:

    mengompress ? memangnya sakit panas ? hehe…

    Reply

  5. 13-12-2010 at 21:57 | #5

    Aku masih harus belajar lagi tentang hal ini…

    Reply

  6. 14-12-2010 at 00:31 | #6

    Wah penting banget nih, saya biasanya hanya compress via office picture manager tapi hasilnya jadi kurang bagus.

    Reply

  7. 14-12-2010 at 07:34 | #7

    tips yg sangat bagus mas, soalnya saya blum sempat² juga utk optimasi gambar *sok sibuk* padahal saya juga banyak gunakan gambar baik di theme maupun postingan

    Reply

  8. 14-12-2010 at 08:10 | #8

    kalau menggunakan CDN bukannya fitur ini berbyar mas??
    tp ditunggu postingannya.. pasti keren nih bs buat CDN menggunakan subdomain

    Reply

    Hybrid car Reply:

    Setahuku begitu tom….tapi mungkin bung alwi punya tips-nya.

    Reply

    Alwi Reply:

    Kebanyakan CDN memang berbayar, tapi kita bisa kok memanfaatkan domain atau subdomain sendiri, baik dg manual atau dg memanfaatkan fitur yg ada di sebuah plugin.
    termasuk salah satunya dg cara ini sekarang Score Firebug jadi mentok 100 dan YSlow mentok di Grade A untuk halaman utama (Home)

    Reply

  9. 14-12-2010 at 16:11 | #9

    wah keren neh cara mengoptimasi gambar theme…patut diacungin jempol mas alwi.. :)

    Reply

    cara mengecilkan perut Reply:

    iya betul
    two thumbs up deh d(^_^)b

    Reply

  10. 14-12-2010 at 22:52 | #10

    baru tau saya kalo ada soal kayak gt …hehe ga donk saya

    Reply

Comment pages
0+5=? (Wajib diisi)