Nyepetake Situs Sampeyan nganggo CSS Sprites

web spritemaster

Aku nulis babagan kacepetan kaca rada suwe ing situs iki lan minangka bagean penting saka analisis lan asil dandan sing digawe ing situs klien. Kajaba pindhah menyang server sing kuat lan nggunakake alat kaya Jaringan Pangiriman Konten, ana sawetara teknik pamrograman liyane sing bisa digunakake pangembang web rata-rata.

Standar kanggo Cascading Style Sheet asli saiki umure wis luwih saka 15 taun. CSS minangka evolusi penting ing pangembangan web amarga misahake konten saka desain. Deleng blog iki lan liyane lan mayoritas prabédan gaya mung ing styleheet sing dipasang. Stylesheets uga penting amarga disimpen kanthi lokal ing cache ing browser. Asile, nalika terus-terusan ngunjungi situs sampeyan, saben-saben ora ndownload sheet style… mung konten kaca.

Salah sawijining elemen CSS sing asring kurang digunakake yaiku CSS Sprites. Nalika pangguna ngunjungi situs web sampeyan, sampeyan bisa uga ora ngerti yen dheweke ora mung njaluk siji kaca. Dheweke nggawe macem-macem panjaluk… Panjalukan kanggo kaca, sheet sheet apa wae, kanggo file JavaScript sing dipasang, banjur saben gambar. Yen sampeyan duwe tema sing duwe serangkaian gambar kanggo wates, garis navigasi, latar mburi, tombol, lsp. Browser kudu njaluk saben siji sekaligus saka server web sampeyan. Multiply karo ewu pengunjung lan bisa dadi puluhan ewu panjaluk sing digawe menyang server sampeyan!

Sabanjure, situs sampeyan bakal mandheg. A situs sing alon bisa nduwe pengaruh dramatis ing keterlibatan lan konversi sing digawe para pamirsa. Strategi sing digunakake pangembang web gedhe yaiku nyelehake kabeh gambar menyang sawijining file… sing diarani a sprite. Luwih ora njaluk panjaluk kanggo saben gambar file, saiki mung ana panjaluk kanggo siji gambar sprite!

Sampeyan bisa maca babagan kepiye cara kerja CSS Sprites ing CSS-Tricks or Majalah Smashing CSS Sprite kirim Maksudku ora nuduhake sampeyan cara nggunakake, mung kanggo menehi saran supaya tim pangembangan nggabungake menyang situs kasebut. Conto sing diwenehake CSS Tricks nuduhake 10 gambar sing 10 panjaluk lan nambah nganti 20.5Kb. Yen diklumpukake ing sprite tunggal, iku 1 panjaluk sing 13kb! Panjaluk perjalanan lan wektu respons kanggo 9 gambar saiki wis ilang lan jumlah data dikurangi luwih saka 30%. Multiply karo jumlah pengunjung ing situs sampeyan lan sampeyan bakal nyukur sumber daya tenan!

globalnavThe Apple bar pandhu arah minangka conto sing apik. Saben tombol duwe sawetara negara… manawa sampeyan lagi ing kaca, ora ana kaca, utawa menehi tombol ing endi wae. CSS nemtokake koordinat tombol lan nampilake wilayah negara sing bener menyang browser pangguna. Kabeh negara kasebut ambruk bebarengan ing siji grafis - nanging ditampilake wilayah miturut wilayah sing ditemtokake ing sheet gaya.

Yen pangembang seneng alat, ana akeh ton sing bisa mbantu, kalebu Kerangka kerja CSS kompas, RequestReduce kanggo ASP.NET, CSS-Spriter kanggo Ruby, Skrip CSSSprite kanggo Photoshop, SpritePad, SpriteRight, SapiSapi, ZeroSprites, Pengembang Sprite CSS Project Fondue, Sprite Master Web, Lan SpriteMe Booklet.

Gambar saka Sprite Master Web:
web spritemaster

Martech Zone ora nggunakake gambar latar mburi sajrone tema, mula kita ora prelu nggunakake teknik iki saiki.

2 Komentar

  1. 1

    Ngenteni ... ora kabeh koleksi "gambar" (utawa "pesawat"), lan saben sub-gambar (utawa sub-klompok gambar yen ana gambar animasi utawa interaktif) minangka "sprite"?

    Mungkin barang wis diganti jeneng wiwit pungkasan nalika aku nangani perkara kasebut, nanging aku bisa sumpah Sprite minangka elemen sing pungkasane ditampilake, dudu tabel data gedhe sing ditarik.

    ("Meja Sprite" ... apa ora?)

    • 2

      Kita bisa uga ngomong rong perkara sing beda, Mark. Kanthi CSS, sampeyan bisa nemtokake 'bagean' file gambar sing bakal ditampilake nggunakake koordinat. Iki ngidini sampeyan nggabungake kabeh gambar dadi "sprite" banjur mung nuduhake area sing pengin ditampilake nganggo CSS.

Apa sampeyan mikir?

Situs iki nggunakake Akismet kanggo ngurangi spam. Sinau babagan proses data sampeyan.