bersama guruKATRO …. bapak/ibu/kakak bisa membimbing Murid MI-SD dalam belajar MATEMATIKA secara DARING dan tentunya GRATIS

27/12/17

Memperbaiki Image Thumbnail Blog tanpa Javascript

Assalaamu alaikum sahabat guruKATRO,

Memang ... sangat banyak blogger yang lebih memilih tampilan image thumbnail default blog pada Halaman Utama atau Beranda atau Home Page, tentunya beliau beliau memiliki alasan demi kecepatan loading blog, walau mungkin hanya sekedar dimata pagespeed insight google atau website website analiser loading blog saja.

guruKATRO agak agak berani mengatakan hanya dimata PSI Google atau beberapa website penganalisa loading blog, karena media penganalisa itu hampir semuanya hanya mengandalkan analisa pada hamepage saja. Dan tidak menjanjikan analisa untuk tiap tiap halaman selain homepage.

Padahal, bounce rate pengunjung sama sekali tidak terpengaruh oleh penilaian para analiser tersebut, terutama bila bloger bersangkutan hanya mengutamakan kecepatan loading home page saja. Misalnya dengan cara membuat se minimal mungkin ukuran gambar thumbnail. Dan hal ini !00% didukung aturan default blogger yang dengan cara memaksa penggunanya untuk mengubah ukuran berapapun image thumbnail menjadi lebar 72px dan tinggi juga 72px.

=====
kalau yang seperti contoh dibawah ini, dan semua gambar pertama disetiap guruKATRO posting, pasti berukuran 272 x 204 px,


dengan asumsi secara pribadi biar gambar thumbnail masih lumayan bagus, tapi tidak terlalu membuat buruk pandangan google pagespeed insight.
=====

Pengaturan default blogger itu jelas akan membuat ukuran gambar yang aslinya memiliki rasio 2/3 atau 3/4 atau 5/8 atau seperti contoh diatas yang berukuran 272 x 204px (persegi panjang) akan menjadi tidak linear lagi, misalnya menjadi tembem alias gendut, karena dipaksa menjadi persegi (72 x 72px). Sebenarnya kelemahan ini bisa disiasati dengan cara upload gambar paling atas di setiap postingan dengan ukuran persegi atau panjang dan lebar sama ukurannya.

Tapi masih ada satu lagi kelemahan default pengaturan blogger itu, yaitu membuat ukuran gambar menjadi sangat kecil, dan tentunya bagi sebagian orang akan merasa menjadi kurang sedap dipandang mata. Sementara bila kita paksakan membesarkan ukuran dengan css atau langsung dalam html, memang gambar thumbnail tersebut akan menjadi besar sesuai ukuran yang diatur pada css atau html. tapi sayangnya pembesaran itu hanya sejenis zoom, sehingga image menjadi blur dan kabur.

Kebanyakan para blogeer yang mabuk gambar bagus memilih menggunakan script untuk melawan 72x72 bawaan blogger itu. dan script semacam itu sudah banyak beredar di berbagai tutorial blog dan pula sudah sangat banyak yang menggunakannya, serta tidak di bahas disini.

Disini guruKATRO mencoba membagikan pengalaman tersendiri hasil experiment sendiri, walau mungkin saja sebenarnya telah dicoba oleh blogger lain, namun guruKATRO belum pernah melihat, atau mungkin sudah di publikasikan oleh beberapa blogger namun secara kebetulan guruKATRO tidak pernah membacanya.

Untuk bisa menampilkan gambar thumbnail yang ukurannya sesuai keinginan kita sendiri tanpa tersandung aturan dasar blogger, guruKATRO hanya melakukan satu langkah kecil saja, yaitu mengganti nama :
data:post.thumbnailUrl
menjadi
data:post.firstImageUrl
saja,

sangat ringan dan sangat mudah bukan ????.  tapi hasilnya cukup mengejutkan ....

Cara ini guruKATRO sebut sebagai tidak melawan aturan dasar ukuran thumbnail blogger, tapi hanya sekedar berkelit saja.

Coba amati html blog guruKATRO pada awalnya,



hasil image thumbnail home page seperti ini:




gambar blur dan gendut, padahal ukuran dasarnya sudah guruKATRO buat 192x144, tapi karena telah di resize oleh blogger menjadi 72x72, maka biar pada css maupun html sudah dikembalikan ke 192x144, hasilnya tetap saja seperti itu


ockey sekarang coba kita ganti
expr:src='data:pos.thumbnailUrl'
menjadi
expr:src='data:post.firstImageUrl'




Hasilnya akan persis seperti ukuran gambar paling atas di upload pada setiap postingan, karena fisrt itu maknanya pertama, berarti fisrtImage dibaca sebagai gambar pertama pada tiap tiap postingan. seperti ini :



ukuran gambar tetap sebagaimana aslinya, tidak seperti diatas, menjadi gendut dan pendek.

bagi yang menganut sistem blog dengan pengaturan non aktif tampilan mobile untuk menghormati dan untuk menunjukkan rasa iba pada tampilan mobile, tentunya agar loading mobile tidak tersendat, maka diatur agar image besar itu hanya muncul di desktop saja, sedang di mobile sebaiknya gunakan aturan default blogger 72x72. 

Buatlah html kondisional untuk tampilan mobile agar muncul
expr:src='data:pos.thumbnailUrl'
sedang pada desktop agar muncul
expr:src='data:post.firstImageUrl'
(untuk blogger yang meng aktifkan tampilan mobile tentu cara ini tidak perlu dilakukan).


untuk lebih jelasnya tentang html kondisional pengatur tampilan mobile dan desktop, silakan amati 17 baris terakhir pada gambar urutan nomor 4 dari atas.

dan apabila anda tergolong dalam komunitas malas atur sama image paling atas tiap tiap postingan, silakan tambah saja ukuran width (lebar) dan height (tinggi) gambar, langsung pada html img nya, seperti ini.

Dengan dimasukkannya width='' height='' pada html img, maka walaupun upload gambar paling atas pada setiap postingan berbeda beda ukuran, pasti outpunya akan secara otomatis mengikuti ukuran width dan height yang telah diatur itu.

Entah secara kebetulan hanya untuk blog guruKATRO atau ada kemungkinan lain, Wallahu a'lam ....

inilah penilaian pagespeed insight google

Mobile :


ada empat gambar mendapat peringatan  untuk memperkecil ukuran



Desktop :


hanya ada tiga gambar dengan peringatan ......


Dengan catatan setiap kali mempublikasikan sebuah postingan, pasti gambar pertama guruKATRO atur dengan ukuran 192 x 144 px, tapi ukuran ini bukan ukuran mutlak, berapaun silakan sesuaikan dengan kondisi blog anda, yang terpenting adalah buat satu ukuran statis (selalu dengan ukuran yang sama) untuk gambar gambar pertama setiap kali posting. Agar tampilan image pada homepage blog memiliki ukuran yang sama pada masing masing posting

Diterapkan pada blog lain .... mungkin saja hasilnya tidak menggembirakan, tapi tak ada salahnya bila sekedar mencoba ....

Salam Blogger ...
Ya Allah ya Tuhan Kami Yang Maha Bijaksana,
Berikanlah keberkahan yang melimpah,
kepada pembaca kami
yang tidak memblokir iklan
pada halaman ini

bagikan Artikel ini melalui :

Demikian Posting tentang Memperbaiki Image Thumbnail Blog tanpa Javascript yang dapat guruKATRO sajikan, mohon maaf bila masih banyak kekurangannya, kritik dan saran serta pertanyaan dapat disampaikan melalui kolom komentar.

Terima kasih

7 komentar

  1. Bagus hasilnya kok gan, terimakasih

    BalasHapus
    Balasan
    1. kembali kasih,
      heheheh ... setidaknya bagus menurut adminnya blog ini

      Hapus
  2. oalah... ternyata default toh 72 itu. pantes sampe ngantuk ngubek2 template gak nemu juga buat ngerubah itu.

    thanks gaan...

    BalasHapus
  3. Boleh dicoba ni
    Kunjungi juga ya
    https://aprcard-info.blogspot.com/2019/03/nik-kk-fresh.html?m=1

    BalasHapus
  4. Mantap tutorialnya gan.
    Mampir juga gan ke https://www.jlepp.com

    BalasHapus