Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger

Ini adalah auto read-more link script yang biasa Anda gunakan untuk mengubah posting asli menjadi ringkasan posting:

<script>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 100,
    img_thumb_width  = 120;
</script>
<script>
//<![CDATA[
/**
 * =======================================================================
 * Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
 * =======================================================================
 */
function removeHtmlTag(strx, chop) {
    if (strx.indexOf("<") != -1) {
        var s = strx.split("<");
        for (var i = 0; i < s.length; i++) {
            if (s[i].indexOf(">") != -1) {
                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
            }
        }
        strx = s.join(" ");
    }
    chop = (chop < strx.length - 1) ? chop : strx.length - 2;
    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
    strx = strx.substring(0, chop - 1);
    return strx + '...';
}

function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (img.length >= 1) {
        imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

Merasa ada yang aneh dengan itu? Saya rasa tidak. Tapi jika Anda sedikit lebih jeli dan memasuki cara kerjanya lebih dalam, maka Anda akan mengerti beberapa hal:

• Pertama, script tersebut akan mengurangi jumlah karakter posting yang panjang menjadi lebih pendek sesuai dengan pengaturan pada variabel summary_noimg dan summary_img
• Ke dua, script tersebut akan menampilkan sebuah gambar mini/thumbnail yang diambil dari gambar pertama pada posting terkait. Ukurannya juga berubah, menjadi lebih kecil. Dalam contoh di atas ukurannya dapat diketahui akan berubah menjadi 120 × 100 piksel (nilainya ada pada variabel img_thumb_width dan img_thumb_height).

Itu berarti bahwa jika kita menerapkan fitur auto-readmore-link pada blog kita, maka kita dapat mempercepat proses muat halaman blog, karena kita pikir kita telah mengubah paragraf posting yang panjang menjadi lebih pendek. Dan bahkan, ukuran gambar telah diperkecil menjadi 120 × 100 piksel.

Tapi kenapa saat Anda mencoba merasakan proses muat halaman blog Anda rasanya tidak ada perbedaan yang terlalu jauh antara kecepatan muat posting yang asli dengan versi yang sudah diringkas?

JavaScript Hanya Memanipulasi, Bukan Mengurangi

Script auto read-more link tidak mengurangi ukuran file posting, tapi hanya memanipulasi tampilannya pada pandangan mata. Jika Anda melihat kode sumber dari halaman blog Anda, maka Anda akan melihat bahwa keseluruhan isi posting sebenarnya masih tetap ada pada tempatnya dan ditransfer secara penuh. JavaScript bertugas untuk mengambil beberapa karakter saja dan menampilkannya dalam bentuk ringkasan. Sementara posting yang asli akan ditindih dengan ringkasan yang telah dibuat:

// Menyisipkan summary (duplikat/clone posting yang telah dimanipulasi)
// ke dalam posting dengan ID yang diambil dari <data:post.id/>
var div = document.getElementById(pID);
...
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
...div.innerHTML = summary;

Sejauh ini tidak ada yang bisa kita lakukan dengan ringkasan posting. Yang bisa kita lakukan hanyalah mengoptimasi ukuran thumbnail. Perlu diketahui bahwa meskipun ukuran gambar pada posting read-more Anda sudah menjadi lebih kecil dari sebelumnya, tapi sebenarnya yang berubah hanya ukuran tinggi dan lebarnya saja, sedangkan ukuran gambar masih tetap sama besarnya dan sama beratnya. Coba Anda klik kanan pada salah satu thumbnail posting kemudian klik View Image Info:

Menampilkan info gambar

dari situ Anda akan melihat ukuran gambar aslinya, bukan hanya ukuran lebar dan tinggi gambar asli, tapi juga ukuran file dari gambar tersebut:

Ukuran gambar jauh lebih besar dari yang terlihat

NAH! Ternyata thumbnail kecil yang Anda lihat sebagai gambar berukuran 120 × 100 piksel adalah gambar berukuran 495 × 371 piksel. Dan bukan itu saja, coba lihat pada file size: 24.75KB! Untuk ukuran gambar sebesar itu, kenapa harus dipaksakan menjadi berukuran 120 × 100? Lalu, bisakah kita memperkecil ukuran gambar tersebut secara nyata, dan bukan hanya sekedar menekan ukuran lebar dan tinggi gambar menggunakan atribut width dan height?

Picasa memiliki cara yang unik dalam mengompres gambar. Mereka mengambil ukuran gambar dari URLnya (yaitu kode-kode seperti /s200, /s400, /s1600, /s40-c dan yang lainnya). Dari path itulah Picasa akan mentransfer ukuran gambar dengan resolusi sesuai dengan kode ukuran yang tercantum.

Blogger menggunakan fasilitas yang sama, jadi kita bisa menggunakan kunci sederhana itu untuk memperkecil gambar. Berikut ini adalah beberapa contoh ukuran bawaan dari editor posting pada Blogger seperti Small, Medium, Large, X-Large dan Original Size (Tapi sebenarnya Anda juga masih bisa menentukan ukurannya sendiri):

Kode	Ukuran	Contoh URL
/s72-c	Media Thumbnail (Ukuran Persegi)	http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s72-c/319.jpg
/s200	Small	http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s200/319.jpg
/s320	Medium	http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s320/319.jpg
/s400	Large	http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s400/319.jpg
/s640	X-Large	http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s640/319.jpg
/s1600	Original Size	http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s1600/319.jpg

Semua tautan gambar di atas sebenarnya sama. Saya hanya membedakan pada bagian yang berwarna jingga. Namun saat Anda mencoba mengeceknya, ternyata hanya dengan mengubah URL tersebut saja sudah bisa memperkecil ukuran gambar. Pada awalnya Saya sempat berpikir bahwa saat kita mengunggah gambar ke Picasa, maka Picasa akan menyimpan semua gambar yang sama tersebut dalam berbagai ukuran ke dalam folder bernama s200, s400 dan seterusnya. Tapi semua orang tahu bahwa Google tidak sebodoh itu » https://developers.google.com/speed/docs/best-practices/payload#ScaleImages

Posting blog kita memiliki ukuran gambar yang berbeda-beda, bagaimana kita bisa memperkecil ukuran thumbnail tanpa harus memperkecil ukuran gambar pada posting?

Caranya sederhana. Kita cukup mengubah URL thumbnail yang tadinya berada di seputar /s400, /s640 dan /s1600 menjadi ukuran yang lebih kecil seperti ini:

imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s200") + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';

dan agar pengaturan ukuran menjadi jauh lebih mudah, lebih baik set karakter pengganti berdasarkan variabel lebar thumbnail:

imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';

Dengan cara di atas maka ukuran thumbnail bisa diperkecil sampai dua kali lipatnya. Bahkan lebih!

Ukuran gambar mengecil sampai 2 kali lipat

Saran Saya untuk Developer Blogger

Meskipun tulisan panjang ini hanya membicarakan seputar thumbnail auto read-more link blogspot, tapi sebenarnya bukan itu inti dari apa yang ingin Saya sampaikan. Jika Anda adalah seorang pembuat widget Blogger, Saya harap Anda bersedia untuk memulai mengubah sedikit cara Anda memperkecil gambar. Ini adalah saran terbaik dari Saya. Jika Anda menciptakan widget dengan ukuran lebar dan tinggi thumbnail yang telah diset di dalam variabel, jangan lupa juga untuk menerapkan variabel tersebut sebagai pengganti URL gambar, sehingga kecepatan muat gambar pada widget juga bisa ditingkatkan:

var thumbWidth  = 200,
    thumbHeight = 100;

// Kode widget Anda....
document.write('<img src="' + postimg.replace(/\/s(320|400|640|1600)/, "\/s" + thumbWidth) + '" width="' + thumbWidth + '" height="' + thumbHeight + '" alt="thumbnail" />');

Mengenai ringkasan posting, Saya harap suatu saat nanti Blogger akan merilis tag <data> khusus untuk memanggil ringkasan posting, sama seperti halnya dalam pembagian opsi feed yang sudah ada.

Konsepnya kira-kira begini:

Dengan begitu kita tidak perlu lagi repot-repot menuliskan JavaScript yang rumit untuk menciptakan posting read-more. Yang perlu kita lakukan hanyalah sesuatu yang sederhana seperti ini:

<article class='post-body entry-content'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <div expr:id='data:post.id'><data:post.bodySummary/>      </div>
      <div class='alignright'>
        <a class='read-more' expr:href='data:post.url' rel='dofollow'>READ MORE</a>
      </div>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    </b:if>
  </b:if>
  <div class='clear'/>
</article>

Pembaharuan: 28 April 2012

Blogger sudah memiliki tag <data> yang bisa menampilkan ringkasan posting meski jumlahnya masih sangat terbatas:

<data:post.snippet/>

Elemen ini sebenarnya lebih sering kita jumpai pada widget Posting Populer yang biasa digunakan untuk menampilkan ringkasan pendek di sekitar thumbnail. Selengkapnya mengenai implementasi auto read-more tanpa JavaScript dengan memanfaatkan tag <data:post.snippet/> dapat Anda baca pada salah satu posting dari seseorang di Vietnam » Auto readmore không s? d?ng javascript cho Blogger

---

Ikon: ArtDesigner