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. Modifikasi Tampilan Halaman Daftar Isi
  2. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  3. CSS3, Sonic Mengejar Bola
  4. Yesterday, The Beatles
  5. Bypass Template Path dan Stylesheet Path
  6. Mempercantik Tampilan Code Snippets Dengan CSS
  7. Cara Mencegah Copy Paste Dengan CSS
  8. Main Remi Bersama Top Komentator
  9. Tips dan Tricks CSS (Cascading Style Sheets)
  10. Cara Mengganti Background Theme WordPress
  1. 17-5-2012 at 13:43 | #1

    tester dulu ane gan, trims

    Reply

  2. 20-7-2012 at 01:43 | #2

    blajar nih gan, kalo mau gabungin beberapa gambar jadi satu caranya gimana ya gan… maklum pemula

    Reply

  3. 25-9-2012 at 21:40 | #3

    thank tar saya coba deh,mayan buat memperingan

    Reply

  4. 1-11-2012 at 20:20 | #4

    thx gan artikelnya, membantu
    ngejar pagespeed :)
    Fyi, opsi no.1, websitenya lebih simpel, langsung praktek

    Reply

  5. 28-12-2012 at 16:00 | #5

    terimakasih gan infonya … mau saya coba dulu

    Reply

  6. 3-1-2013 at 18:01 | #6

    berarti bisa mempercepat loading blog ya mas. seperti blog ini ya. loadingnya cepet banget..

    Reply

  7. 12-1-2013 at 11:41 | #7

    Alhamdulillah setelah menerapkan cara Image sprite dengan bantuan Css Sprite Generator, blog saya agak cepat request http, hanya untuk blogspot pengoptimalan lebih lanjut masih sangat terbatas, seperti parshing Js, chace date header dll (masih banyak)
    jadi poin setelah dicek di Google Pagespeed Insihts belum dapat skor 100% :)

    Trims infonya mas :) Salam

    Reply

  8. 27-4-2013 at 13:05 | #8

    terimakasih informasinya gan, saya coba yang nomor 5 gan

    Reply

  9. 20-5-2013 at 06:52 | #9

    saya tidak mudeng dengan ess sprite yang saya tau ess sprite jika diminum siang-siang sueger dan bisa bikin dahaga sirnah.

    Reply

  10. 20-5-2013 at 07:01 | #10

    coba tak mudeng-mudengne gambar saya dalam web http://agrobuah.com dan saya cek di pagespeed gt metrix ada petunjuk merah dan minta perbaikan diantaranya :
    1. Combine images using CSS sprites isi kesalahan terdapat pada theme gambar dari tema yang saya pakai amazing grace
    2. Remove query strings from static resources isi keterangannya gambar timthumb yang harus diperbaiki.

    bagaimana ini untuk memperbaikinya ?

    Reply

    agro buah Reply:

    o iya bung alwi saya menggunakan plugin w3total cahce apakah ada yang bisa dimanfaatkan di settingan plugin tersebut?

    Reply

Comment pages
3+9=? (Wajib diisi)