Gambar (Image) merupakan salah satu media yang dapat menarik rasa penasaran dan keingintahuan pengunjung blog. Gambar bisa membuat setiap tulisan blog kita menjada terasa lebih hidup, dan dengan gambar pula dapat mewakili ekspresi yang ingin kita sampaikan pada sebuah tulisan. Gambar juga yang mempercantik tampilan blog kita, membuatnya lebih atraktif dan ekspresif.
Sayangnya, semakin banyak gambar dan semakin besar ukuran gambar akan memperlama waktu loading halaman blog. Kenapa? karena browser akan melakukan request sebanyak jumlah gambar tersebut, intinya jumlah gambar yang makin banyak akan meningkatkan jumlah HTTP header request dari web browser/search engine bot (Googlebot) yang berpengaruh pada kecepatan loading dan score SEO. Untuk itu, perlunya dilakukan optimasi gambar supaya loading blog kita tidak mengecewakan para pengunjung.
Ada banyak cara optimisasi gambar untuk blog yang bisa kita lakukan untuk mengurangi ukuran dan jumlah gambar, diantaranya ada 2 trick penting yang akan saya beberkan disini, yaitu Image size optimization dan CSS Sprite Trick. Sebagai tambahan, cara optimasi yang saat ini (2016) biasa digunakan adalah Image Lazy Load untuk mempercepat halaman blog saat dibuka.
1. Image Size Optimization
Sudah jelas, semakin besar ukuran gambar yang kita pasang di halaman 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 filesize 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. Keuntungan lain dengan menggunakan image editor, kita juga bisa melakukan kompresi gambar, sehingga ukuran filesizenya makin kecil, namun resikonya kualitas gambar akan turun drastis.
2. CSS Sprite
Trick yang satu ini membutuhkan sedikit pengetahuan tentang CSS (sedikit aja koq, gak banyak-banyak ). Jika sobat menggunakan banyak logo/button pada tampilan theme blog yang menggunakan gambar, maka sebaiknya sobat sedikit menerapkan trick CSS sprite ini untuk meminimalisir request gambar.
Logo-logo/button tersebut bisa sobat gabungkan dalam satu gambar, kemudian untuk menampilkannya tinggal memanggil script CSS yang telah didefinisikan.
Contoh website yang menggunakan CSS sprite diantaranya Google Checkout, Yahoo! dan Amazon. Untuk tutorial lengkapnya bisa sobat pelajari pada artikel Website Optimization dari Sitepoint.
Tips: sobat bisa menggunakan instant CSS Sprite generator untuk menggabungkan gambar-gambar logo/button yang sobat inginkan, enaknya tool ini sekaligus dapat membuat script CSS-nya jadi gak usah ambil pusing klo belum paham CSS. Silakan dicoba CSS Sprite Generator.
3. Image Lazy Load
Sebagai tambahan untuk tips cara mempercepat loading halaman website dengan teknik image optimization berikutnya sobat bisa coba menggunakan teknik Image Lazy Load. Cara kerja Lazy Load sesuai dengan namanya, yaitu dengan menunda pemuatan gambar pada halaman website yang panjang. Gambar-gambar pada halaman website di luar area layar monitor hanya akan dimuat ketika kita menggeser halaman tersebut (scroll ke bawah).
Kurang lebih seperti itu definisi dan cara kerja Image Lazy Load, sedangkan untuk penerapannya sobat bisa menggunakan plugin yang banyak terdapat di repository WordPress.org.
Demikian tips ngeblog kali ini tentang teknik optimasi gambar untuk mempercepat loading halaman blog. Tips ini akan sangat terasa manfaatnya terutama jika postingan blog sobat berisi cukup banyak gambar, seperti blog photography atau wallpaper.
…
Repost from Archive.org (28/04/2010)