Gambar merupakan salah satu media yang dapat menarik rasa penasaran dan keingintahuan pengunjung. Gambar bisa membuat setiap postingan blog kita menjada terasa lebih hidup, dan dengan gambar pula dapat mewakili ekspresi yang ingin kita sampaikan pada suatu postingan. Gambar juga yang mempercantik tampilan web/blog kita, membuatnya lebih atraktif dan ekspresif.

Tapi tau gak, gambar pulalah yang bikin blog kita jadi “Siput” ketika di-load, alias lemot. Gambar pula yang dapat menurunkan performa web/blog kita di mata mbah Google. Apalagi jika gambar tersebut berukuran gedhe, lebih dari 50 KB.

Semakin banyak gambar-gambar pada halaman web/blog juga akan memperlama waktu load halaman tersebut. Kenapa? karena browser akan melakukan request sebanyak gambar-gambar tersebut, intinya jumlah gambar yang makin banyak akan meningkatkan HTTP header request dari web browser/search engine bot (Googlebot).

Ada banyak trick optimisasi gambar yang bisa kita lakukan untuk mengurangi ukuran dan jumlah gambar, diantaranya ada 2 trick penting yang akan saya beberkan disini (just diblog ini ), yaitu Image size optimization dan CSS Sprite Trick.

Image Size Optimization

Sudah jelas, semakin gedhe ukuran gambar yang kita pasang di halaman web/blog akan memperlama waktu load halaman tersebut. Beberapa blogger (termasuk saya) biasanya me-resize ukuran gambar tersebut pada text-editor postingan, dengan memberikan atribut height:"xxx" dan width="yyy" pada tag <img>. Tau gak? ternyata teknik ini sedikitpun tidak memberikan manfaat pada penurunan ukuran gambar, pada saat halaman tersebut dibuka tetap saja gambar yang diload adalah seukuran dan sebesar yang aslinya Nah, sia-sia dech

Untuk mengatasi hal itu, maka mau tidak mau kita harus me-resize gambar-gambar yang dirasa kegedean dan gak nyukup di area postingan tersebut sebelum dipasang. Jadi bener-bener diresize dengan image editor, gak cuma sekedar diresize atribut <img> nya

CSS Sprite

Trick yang satu ini membutuhkan sedikit pengetahuan tentang CSS (sedikit aja koq, gak banyak-banyak ). Jika anda menggunakan banyak logo/button pada tampilan theme blog, maka sebaiknya anda sedikit menerapkan trick CSS sprite ini untuk meminimalisir request gambar.

Logo-logo/button tersebut bisa anda gabungkan dalam satu gambar, kemudian untuk menampilkannya tinggal memanggil script CSS yang telah didefinisikan.

Contoh website yang menggunakan CSS sprite untuk logo/button menu diantaranya Google Checkout, Yahoo! dan Amazon. Untuk tutorial lengkapnya bisa anda pelajari pada artikel Website Optimization dari Sitepoint.

Tricky: Anda bisa menggunakan instant CSS Sprite generator untuk menggabungkan gambar-gambar logo/button yang anda inginkan, enaknya tool ini sekaligus dapat membuat script CSS-nya jadi gak usah ambil pusing klo belum paham CSS. Silakan dicoba CSS Sprite Generator.

Kata Kunci Pencarian:

ukuran 10kb |

• «Previous Post
• Next Post »