Short Tutorial : CSS Sprites untuk Mempercepat Loading Web - Elang Sakti
Download Ebook Belajar Arduino PDF, Arduino untuk pemula
Jasa Pembuatan Program Arduino, pemrograman Arduino
# Hack Your Skills! to be Professional Mechatronics

Short Tutorial : CSS Sprites untuk Mempercepat Loading Web

3 komentar
Programmer web tentu wajib menguasai CSS sebab CSS merupakan inti dari style website seperti pewarnaan dan beberapa animasi minor. Tapi css bukan segalanya, tapi CSS bisa melakukan sesuatu yang tidak bisa dilakukan oleh HTML. Lalu apa bedanya CSS (biasa) dengan CSS Sprites? Tidak ada. Kita hanya menggunakan fasilitas css untuk menampilkan bagian tertentu dari gambar. Jadi, CSS Sprites sekedar teknik pengembangan.

CSS Sprites merupakan salah satu teknik CSS dalam mempercepat loading halaman web. Umumnya CSS Sprites digunakan pada icon-icon atau button yang beragam. Biasanya, setiap icon adalah satu gambar. Maka jika ada 50 icon, berarti ada 50 gambar. Dengan demikian, akan ada 50 link yang harus dirambah oleh browser untuk menampilkan ke-50 gambar tersebut. Jika menggunakan CSS Sprites, kita hanya butuh satu gambar yang berisi banyak icon sehingga loadingnya lebih cepat. Misalkan seperti berikut :


Icon Teknik biasa :
http://www.elangsakti.com/img/icon1.png
http://www.elangsakti.com/img/icon2.png
http://www.elangsakti.com/img/icon3.png
http://www.elangsakti.com/img/icon4.png
.....
http://www.elangsakti.com/img/icon49.png
http://www.elangsakti.com/img/icon50.png



Icon Teknik CSS Sprites :
http://www.elangsakti.com/img/icons.png



Jika untuk menampilkan satu icon butuh waktu 0.5 detik, maka untuk menampilkan 50 icon butuh 25 detik atau dalam hal ini bandwidth juga berpengaruh. Jadi CSS Sprites ini solusi untuk pengguna dengan koneksi lemah. :)

Untuk mengecek seberapa cepat loading web/blog, kita bisa ngecek lewat Google Insight (https://developers.google.com/speed/pagespeed/insights). Dengan tool tersebut, kita akan tahu apa yang membuat loading web kita jadi berat yang dikategorikan dalam High, Medium, dan Low Priority. Bisa karena gambar background, gambar button, css, external link, dll. Salah satu solusi yang direkomendasikan adalah CSS Sprites. Ini hal yang sangat menarik (tentu karena tulisan ini sedang membahas itu :P ).

Oke, kita mulai belajar memnggunakan CSS Sprites. Untuk membuat CSS Sprites, kita butuh dua langkah, pertama membuat icon-icon dalam satu buah gambar. Lebih mudah jika ukuran gambarnya seragam. Kedua, menampilkan gambar tersebut sebagai background sesuai dengan posisi pixelnya.

Berikut contoh gambar icon dalam bentuk array:

Short Tutorial : Belajar CSS Sprites untuk Mempercepat Loading Web


Icon yang dibuat adalah 20x20 pixel dalam array 3x3. Untuk menentukan posisi gambar pada array yaitu menggunakan gambar yang sebelah kanan. Semakin ke kanan posisi gambar, nilai pixelnya semakin negatif. Dan semakin ke bawah posisi gambar nilai pixelnya juga semakin negatif. Untuk menggambarnya dalam bentuk html, kita contohkan menggunakan 'div' berukurang 20x20 pixel sesuai dengan ukuran icon yang sudah dibuat. Berikut script html sekaligus dengan CSS-nya.
<html>
    <head>
        <title>Belajar CSS Sprites</title>
        <style>
        .icon{
            background-image: url('icons.jpg');
            width: 20px;
            height: 20px;
            float: left;
            margin-right: 5px;
        }
        .senyum{
            background-position:-40px 0px;
        }
        .damai{
            background-position:0px -20px;
        }
        .bengong{
            background-position:-40px -40px;
        }
        </style>
    </head>
    <body>
        <div>
            <div class="icon"></div>Sedih
        </div>
        <div>
            <div class="icon senyum"></div>Senyum
        </div>
        <div>
            <div class="icon damai"></div>Damai
        </div>
        <div>
            <div class="icon bengong"></div>Bengong
        </div>
    </body>
</html>

Hasil tampilan dari script di atas :



Semoga Bermanfaat :)

Written by ElangSakti
Short Tutorial : CSS Sprites untuk Mempercepat Loading Web
Bahasan: Programmer web tentu wajib menguasai CSS sebab CSS merupakan inti dari style website seperti pewarnaan dan beberapa animasi minor. Tapi cs...
Published at Rabu, 10 April 2013, Updated at Rabu, 10 April 2013
Reviewed by dr. on
Rating: 4.7

3 komentar :

  1. Gan . , .
    Gmn mengetahui ukuran iconnya. ,.

    BalasHapus
    Balasan
    1. pake ukuran standar aja mas, standar icon itu ukurannya 12px, 16px, 24px, 32px, 48px, 64px, 128px, dst.. coba cek di iconfinder.com. Kalaupun mau bikin sendiri, lebih simple ngikuti standar.

      Hapus
  2. mantap,,. memang anda master yang sangat ahli dibidangnya :)

    BalasHapus