Home » CSS » CSS Image Sprites Generator

CSS Image Sprites Generator

10 Apr. 201229 comments
CSS Image Sprites Generator

Di postingan sebelumnya tentang  Cara Mengoptimasi Gambar Theme pernah saya katakan bahwa salah satu cara untuk meningkatkan kecepatan loading blog salah satunya yaitu kita harus mengoptimalkan dalam penggunaan gambar yang ada di theme, baik ukuran, skala gambar maupun jumlah gambar. Ketika kita menggunakan gambar yang cukup banyak dalam satu halaman, maka kita bisa menggunakan metode image sprite, yaitu menggabungkan beberapa image/gambar menjadi satu file kemudian kita tampilkan gambar-gambar tersebut dengan CSS Sprite (combine images into CSS sprites).

Dengan cara ini akan mengurangi jumlah http request dan parallelize downloads across hostnames. Ini juga sebagai salah satu cara untuk meningkatkan skor di pagespeed dan gtmetrix.com. Dan untuk membantu memudahkan dalam membuat image sprites berikut ini beberapa tool (website) CSS Image Sprites Generator yang bisa dimanfaatkan :

1. spritegen.website-performance.org

css sprites generator

2. csssprites.com

css sprites generator

3. css-sprit.es

css sprites generator

4. css.spritegen.com

css sprites generator

5. spritebox.net

css sprites generator

6.Canvas: CSS Sprites Generator

css sprites generator

Mudah-mudahan artikel tentang CSS Image Sprites Generator ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. CSS3 Animation, Zoom In Zoom Out, Rotation
  2. Border Style, Border Width, Border Color
  3. Modifikasi Tampilan Halaman Daftar Isi
  4. CSS3, Sonic Mengejar Bola
  5. Bypass Template Path dan Stylesheet Path
  6. Source Code Main Remi Bersama Top Komentator
  7. Mempercantik Tampilan Code Snippets Dengan CSS
  8. Custom CSS Per Post
  9. Membuat Efek Text Stroke Dengan CSS
  10. Menggulingkan Top Komentator
  1. 10-4-2012 at 12:29 | #1

    Wah,, akhirnya muncul juga info ttg CSS Spritesnya..
    Makasih gan…

    Nyobain ntar aja,, nie mau masuk kuliah…
    Bookmark dlu

    Reply

  2. 11-4-2012 at 15:26 | #2

    Kok spriteme.org gak masuk mas, kan lebih praktis ?


    Boleh dah ntar dimasukin/diupdate, sebenarnya masih banyak juga yg lainnya tapi yg ada sementara udah cukup

    Reply

  3. 11-4-2012 at 20:33 | #3

    Wah ini jawaban dari pertanyaan saya di FB kemarin ya bang Alwi? tak coba dulu deh bang, mungkin bisa ngangkat kecepatan blog saya :)

    Reply

  4. 12-4-2012 at 16:43 | #4

    Kula bokmake rumiyinin mas Muthohar.

    Reply

  5. 12-4-2012 at 16:48 | #5

    Langsung nyoba mas, muga-muga semoga, load blogku bisa melebihi mae mas Alwi :lol:

    Reply

  6. 14-4-2012 at 06:08 | #6

    Keren banget postingannya mas,semoga saja efective bagi web aku.

    Reply

  7. 15-4-2012 at 17:51 | #7

    mas.tolong donk bikin tutorialnya untuk mengoptimasi blog yang disarankan oleh http://gtmetrix.com ya..
    tolong donk bantuannya dnegan snagat.saya bener – bener gak ngerti yang dimaksud disana.apa itu keep alive terus gzip compression pada css dan js dan juga Use efficient CSS selectors.
    tolong ya mas..mungkin juga banyak sekali yang butuh.

    Reply

  8. 16-4-2012 at 10:06 | #8

    pernah coba yg css-sprit.es yg lain baru tahu skrg :D
    kdg ukuran sesudah digabungin malah lbh gede dari sebelumnya

    Reply

  9. kuroshiroman
    22-4-2012 at 02:40 | #9

    mas, saya mau bikin thumbnail image di satu templete…
    yang nantinya image akan bergerak otomatis…
    pakai js, ya… share tuto+script-nya,dong…

    Reply

  10. 27-4-2012 at 08:31 | #10

    bang, saya coba kemaren edit theme saya pake sprite, kok jadi ga jelas begitu tampilan nya ya??

    Reply

Comment pages
5+5=? (Wajib diisi)