Optimalisasi Grafis Blog Jilid 2

Optimalisasi Grafis Jilid 2 ini masih melanjutkan sedikit bahasan posting sebelumnya tentang posting seputar peran grafis dalam Optimalisasi Blog.
Orde Baru Jilid 2 kali ini (huss jangan nyenggol-nyenggol area politik..); Begini saudara-saudara, pada Tips Optimalisasi SEO kali ini ; haiyyaah ... maksud alkatro Optimalisasi Grafis Blog Jilid 2 kali ini menyajikan tentang optimalisasi grafis blog menggunakan sedikit kombinasi script, image dan hosting pada blogger.
Hal ini mungkin diperlukan bagi Anda yang hobby melakukan modifikasi template pada website atau blog kesayangan anda agar lebih terlihat meriah dan segar; bagi anda yang sudah expert dengan hal ini silahkan diminum dulu teh celupnya.. sruput ... sueggerr.. he he.
Tujuan dari optimalisasi Grafis Blog adalah untuk mempercepat waktu loading page sehingga visitor bisa mengakses halaman website atau blog anda dan bisa juga untuk mengurangi angka eksternal link karena penggunaan free hosting third party seperti tinypic atau photobucket.
Tips Optimalisasi Grafis Jilid 2 tersebut antara lain:

1. Optimalisasi Ukuran File Image
Jika anda telah menentukan jenis file image yang diinginkan terpasang pada blog anda; langkah optimalisasinya yaitu simpan ulang file tersebut dengan menurunkan 'sedikit' kualitas image misalnya 10% -20% persen saja (hal ini tidak begitu nampak mempengaruhi dari segi indera penglihatan kita; tetapi dapat mengurangi ukuran bobot file secara signifikan dan secara langsung mengurangi juga bobot loading page pada blog atau website Anda).

2. Optimalisasi image pada Gradasi warna.

Beberapa seniman grafis kadang menyukai teknik gradasi warna dalam memoles keindahan latar belakang sebuah template baik latar belakang pada, heading side bar content, main content maupun menu dropdown.
Langkah Optimalisasinya yaitu dengan menggunakan kombinasi script dan guntingan dari image tersebut. Hal ini bisa menghemat ukuran image sampai 20x ukuran normal. Jika contoh di bawah yang akan saya uraikan hanya menyusut sekitar 2 sampai 8 kali dari ukuran semula; itu hanyalah simulasi sederhana karena file background yang sesungguhnya pada blog biasanya memiliki ukuran panjang atau lebar sampai 700 pixel. Contoh hasil optimalisasi blog yang menggunakan cara tersebut bisa anda lihat pada blog saudara Alkatro (tenang saja sekarang servernya sudah aman; setelah kemarin siang sempat lenyap karena ada banjir pada kampung server domain dan hosting kontrakan 'luar biasa' he he)

Secara standar Efek Gradasi warna hanya mengacu pada dua jenis, yaitu:

a. Efek Gradasi Lansdcape (melebar)
Biasa dipakai untuk menghiasi background logo, header dan menu dropdown.
Contoh nama file background gambar adalah optimalisasi-blog.jpg ;ukuran file 16.3 kb dan script awal:
background-image: url(../optimalisasi-blog.jpg);





Langkah Optimalisasinya:
potong image tersebut dengan lebar (width)1 px dan panjang (height) tetap;seperti pada gambar di samping; ukuran file yang semula 16.3 kb sekarang menyusut menjadi sekitar 2.2 kb dengan kualitas yang sama.
kemudian tambahkan pada script blog repeat-x di baris berikutnya sehingga scriptnya menjadi :

background-image: url(../optimalisasi-blog.jpg);
background-repeat: repeat-x;

b. Efek Gradasi potrait (memanjang).
biasa dipakai untuk menghiasi background sidebar widget dan main content.Contoh imagenya terlihat seperti pada gambar di samping. Contoh nama file background gambar tersebut anggap saja adalah optimalisasi-blog-juga.jpg ;ukuran file 6.6 kb

Langkah Optimalisasinya:
hampir sama seperti pada langkah optimalisasi pada efek gradasi landscape;
potong image tersebut dengan lebar (width) tetap dan height 1 px ;
ukuran file yang semula 6.6 kb sekarang menyusut menjadi sekitar 2 kb dengan kualitas yang sama.


kemudian tambahkan script repeat-y di baris berikutnya.
sehingga scriptnya menjadi :
background-image: url("optimalisasi-blog-juga.jpg");
background-repeat: repeat-y;

T i p s :
sebenarnya tanpa menambahkan script di baris berikutnya; browser akan mengulang otomatis image tersebut dan akan terpasang di layout seperti saat sebelum terpotong menyesuaikan lebar kolom. (jadi ga usah ditambahin script sebaris di bawahnya juga tidak masalah he he)


Jika anda menggunakan image real seperti pemandangan; anda bisa memotong gambar menjadi beberapa bagian dan alkatro sarankan menggunakan bantuan software saudara Dreamweaver dan Flash yang bernama Fire Work.

3. Menggunakan Blogger Sebagai tempat Hosting Image
Bukan rahasia lagi bahwa photobucket dan tinypic merupakan tempat favorit bagi para webmaster untuk menyimpan koleksi file image yang dimilikinya untuk kemudian dipasang pada sidebar widget; sebagai logo atau icon pada blog.
Pada tips optimalisasi blog kali ini, alkatro sedikit menawarkan alternatif penyimpan image dengan menggunakan hosting kampung kita sendiri yaitu hosting di blogger.com. Hal ini dimaksudkan untuk mengurangi load data image external dari luar blogger (istilah kerennya third party)
dan juga sebagai antisipasi kalau suatu saat server image hosting tersebut mengalami down.
Caranya adalah:
a. Login ke account blog anda di blogger.com.
b. Klik New Posting; berilah judul posting Blogger Hosting Image;
c. kemudian klik icon image (seperti saat anda mengupload image pada ilustrasi posting)
d. nah pada posting editor biasanya akan tercantum kode script misalnya seperti contoh di bawah ini :

.... ="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgYB33tbDmhd4XxCVsuzYlKo914V2D55bf0YqWzSSwvZ_sfbX82vKbUc-g1xRY4yTTUnYZTJjWY6WvIz6AZ-8McP7dx7EzYoma6N1_1HcFsuaVTU5iRH9EEIuv4C6VSnuU_bkiEhEOxM/s1600-h/hari+pahlawan.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 145px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgYB33tbDmhd4XxCVsuzYlKo914V2D55bf0YqWzSSwvZ_sfbX82vKbUc-g1xRY4yTTUnYZTJjWY6WvIz6AZ-8McP7dx7EzYoma6N1_1HcFsuaVTU5iRH9EEIuv4C6VSnuU_bkiEhEOxM/s320/hari+pahlawan.jpg" alt="" id="BLOGGER_PHOTO_ID_5403521135114773938"....

Nah, alamat image yang dihosting tercantum dalam syntax script, di dalam tanda petik setelah text 'src=', yaitu :
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgYB33tbDmhd4XxCVsuzYlKo914V2D55bf0YqWzSSwvZ_sfbX82vKbUc-g1xRY4yTTUnYZTJjWY6WvIz6AZ-8McP7dx7EzYoma6N1_1HcFsuaVTU5iRH9EEIuv4C6VSnuU_bkiEhEOxM/s320/hari+pahlawan.jpg"

Anda bisa menyimpan beberapa file sekaligus sesuai keinginan anda ke dalam posting tersebut kemudian simpan sebagai draft. Memang alamat image source terlihat agak panjang dibandingkan jika kita mengupload di tinypic ataupun photobucket; namun dari sisi load bisa lebih cepat karena image yang kita ambil masih berasal dari kampung kita sendiri.
Kalau anda lebih berminat menggunakan free image hosting ekternal juga tidak apa-apa; posting ini hanya sekedar menawarkan alternatif sederhana bagi optimalisasi grafis pada blog dan yang pasti untuk arena update posting baru he he.. sretujuu..??

Thanks 4 Your Time