Nyepetkeun Loka Anjeun nganggo CSS Sprites

wéb spritemaster

Kuring nyerat ngeunaan kagancangan halaman rada dina situs ieu sareng éta mangrupikeun bagian anu penting tina analisis sareng paningkatan anu kami laksanakeun pikeun situs klien kami. Kumisan ti ngalih kana sérver anu kuat sareng ngamangpaatkeun alat sapertos Jaringan Pangiriman Eusi, aya sababaraha téhnik pemrograman sanés anu tiasa dianggo ku pangembang wéb rata-rata.

Standar pikeun Cascading Style Sheet asli umurna langkung ti 15 taun ayeuna. CSS mangrupikeun épolusi penting dina pamekaran wéb sabab misahkeun eusi tina desain. Tingali dina blog ieu sareng anu sanésna sareng seuseueurna bédana gaya ngan saukur dina lembaran gaya anu napel. Stylesheets ogé penting sabab disimpen lokal dina cache dina peramban anjeun. Hasilna, nalika jalma teras-terasan ngadatangan situs anjeun, aranjeunna henteu ngaunduh lambaran gaya unggal waktos ... ngan ukur eusi halaman.

Hiji unsur CSS anu sering dianggo henteu seueur nyaéta CSS Sprites. Nalika pangguna nganjang halaman wéb anjeun, anjeun panginten henteu sadar yén aranjeunna henteu ngan saukur ngadamel hiji paménta halaman. Aranjeunna ngadamel sababaraha pamundut… Pamundut pikeun halaman, pikeun lambaran gaya naon waé, pikeun file JavaScript anu napel, teras masing-masing gambar. Upami anjeun ngagaduhan téma anu ngagaduhan séri gambar pikeun wates, palang navigasi, latar tukang, tombol, jsté. Browser kedah naros masing-masing, sakaligus ti sérver wéb anjeun. Kalikeun deui ku rébuan pangunjung sareng anu tiasa janten puluhan rébu pamundut anu dilakukeun ka sérver anjeun!

Ieu, kahareupna ngalambatkeun situs anjeun. A situs laun tiasa gaduh pangaruh dramatis dina Dursasana sareng konvérsi yén pemirsa anjeun damel. Strategi anu dianggo pamekar wéb anu hébat nyaéta nempatkeun sadaya gambar kana hiji file ... anu disebut a sprite. Daripada nyieun pamundut pikeun masing-masing gambar file anjeun, ayeuna ngan ukur kedah aya pamundut pikeun gambar sprite tunggal!

Anjeun tiasa maca ngeunaan kumaha CSS Sprites damel di CSS-Trik or Smashing Magazine urang CSS Sprite tulisan. Intina mah sanés nunjukkeun anjeun kumaha ngagunakeunana, ngan ukur mamatahan anjeun pikeun mastikeun tim pangwangunan anjeun ngasupkeun kana situs. Conto anu disayogikeun ku CSS Tricks nunjukkeun 10 gambar anu 10 pamundut sareng nambihan dugi ka 20.5Kb. Nalika dikumpulkeun dina hiji sprite, éta 1 pamundut éta 13kb! Pamundut pamundut sareng waktos réspon pikeun 9 gambar ayeuna parantos teu aya sareng jumlah data dikirangan langkung ti 30%. Kalikeun ku jumlah pangunjung dina situs anjeun sareng anjeun badé nyukur sababaraha sumber!

globalnavnu apel bar navigasi mangrupikeun conto anu saé. Masing-masing tombol ngagaduhan sababaraha kaayaan ... naha anjeun aya dina halaman, kaluar halaman, atanapi mousing tombol na. CSS ngahartikeun koordinat tombol sareng nampilkeun daérah kaayaan anu leres pikeun panyungsi pangguna. Sadaya nagara bagian ieu runtuh babarengan dina hiji grafik - tapi ditampilkeun daérah dumasar kana daérah sakumaha anu parantos ditangtoskeun dina lambaran gaya.

Upami pangembang anjeun resep alat, aya seueur ton anu tiasa ngabantosan aranjeunna, kalebet Kerangka CSS Kompas, RequestReduce pikeun ASP.NET, CSS-Spriter pikeun Ruby, Naskah CSSSprite pikeun Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue's CSS Sprite Generator, Sprite Master Wéb, jeung SpriteMe Tanda buku.

screenshot of Sprite Master Wéb:
wéb spritemaster

Martech Zone henteu nganggo citra latar tukang dina téma na, janten urang henteu kedah nyebarkeun téhnik ieu dina waktos ayeuna.

2 Komentar

  1. 1

    Antosan… sanes sadayana koleksi mangrupikeun "gambar" (atanapi "pesawat"), sareng masing-masing sub-gambar (atanapi sub-kelompok gambar dina gambar atanapi parobihan anu sacara interaktif) mangrupikeun "sprite"?

    Mungkin barang-barang parantos dirobih deui kumargi terakhir waktos kuring ngatur hal-hal sapertos kieu tapi kuring tiasa sumpah Sprite mangrupikeun unsur anu tungtungna ditampilkeun, sanés tabel data ageung anu ditarikna.

    ("Tabél Sprite" ... éta sanés?)

    • 2

      Urang panginten nyarios dua hal anu béda, Mark. Kalayan CSS, dasarna anjeun tiasa nangtoskeun mana 'bagian' tina file gambar pikeun ditampilkeun ngamangpaatkeun koordinat. Ieu ngamungkinkeun anjeun nempatkeun sadaya gambar anjeun kana hiji 'sprite' teras waé nunjuk ka daérah anu anjeun hoyong tampilkeun ku CSS.

Naon anu anjeun pikirkeun?

Situs migunakeun Akismet pikeun ngurangan spam. Diajar kumaha komentar data anjeun diolah.