Teks asli: CSS Sprite: Harus Dilakukan atau Tidak Dilakukan?
Diterjemahkan dari: Ke Sprite Atau Tidak Ke Sprite
Penafian: Sprite CSS yang dimaksud dalam artikel ini adalah Sprite CSS . Frasa ini tidak pernah memiliki terjemahan bahasa Mandarin yang tetap atau konvensional. Beberapa orang mulai menyebutnya sebagai Sprite CSS. Anggap saja ini sebagai percobaan. kami akan terus melakukannya di masa depan. Akan terus disebut CSS Sprite. Shenfei (vokal)
CSS Sprite telah ada sejak lama dan muncul sebagai cara untuk membuat situs web Anda lebih cepat. Steve Souders baru saja mempresentasikan SpriteMe! di Velocity 09 (membahas mengapa menggunakan CSS Sprite Generator atau alat berbasis server lainnya ketika Anda dapat menggunakan kanvas dan toDataURL dan menghasilkan sprite dengan cepat?). Namun, ada beberapa kesalahpahaman tentang sprite CSS, yang utama adalah bahwa sprite tersebut tidak memiliki kekurangan.
Prinsip dasar CSS Sprite adalah mengintegrasikan beberapa gambar yang digunakan di situs web Anda menjadi satu gambar, sehingga mengurangi jumlah permintaan HTTP untuk situs web Anda. Gambar dirender menggunakan properti CSS background dan background-position (perlu disebutkan bahwa ini juga berarti tag Anda menjadi lebih kompleks, gambar ditentukan dalam CSS, bukan tag <img>).
Masalah terbesar dengan CSS Sprite adalah penggunaan memori. Kecuali jika gambar sprite diatur dengan sangat hati-hati, Anda akan mendapatkan banyak ruang putih yang tidak berguna. Contoh favorit saya adalah dari situs WHIT TV, di mana gambar ini digunakan sebagai sprite. Perhatikan bahwa ini adalah gambar PNG 129915.000 piksel. Ini juga dikompresi dengan sangat baik dan ukuran unduhan sebenarnya hanya sekitar 26K - tetapi browser tidak merender data gambar yang dikompresi. Saat gambar ini diunduh dan didekompresi, gambar ini akan menempati sekitar 75MB memori (1299*15000*4). Jika gambar ini tidak menggunakan transparansi alfa, maka akan dioptimalkan ke 1299 * 15000 * 3, namun mengorbankan kecepatan rendering. Meski begitu, kita berbicara tentang 55MB. Sebagian besar gambar ini sebenarnya kosong , tidak ada apa pun di sana, tidak ada konten yang bermanfaat. Memuat beranda WHIT saja akan menyebabkan penggunaan memori browser Anda meningkat setidaknya 75+MB, hanya karena satu gambar itu. ( PS: Sayangnya websitenya baru saja direvisi dan gambar-gambar yang disebutkan di artikel sudah tidak ada lagi )
Tidak ada trade-off yang tepat untuk mendukung situs web.
Kerugian lain (walaupun tidak begitu penting) adalah jika halaman yang menggunakan CSS Sprite diskalakan menggunakan fitur zoom halaman penuh yang disediakan oleh beberapa browser, browser perlu melakukan beberapa pekerjaan ekstra untuk memperbaiki perilaku tepi gambar ini mencegah gambar yang berdekatan di Sprite terekspos. Ini bukan masalah untuk gambar kecil, namun akan berdampak buruk pada kinerja untuk gambar besar.
Tentu saja ada beberapa contoh yang menunjukkan manfaat nyata dari sprite CSS, yang utama adalah menggabungkan sekumpulan gambar dengan ukuran yang sama ke dalam satu file. Misalnya rangkaian ikon berukuran 16x16 yang digunakan untuk mengidentifikasi banyak hal di website Anda, atau beberapa ikon berukuran 32x32 yang digunakan sebagai header kategori atau sejenisnya. Namun menggabungkan gambar dengan ukuran yang sangat berbeda bukanlah ide yang baik, terutama gambar yang tinggi dan tipis di samping gambar yang lebar dan pendek.
Namun, CSS Sprite meningkatkan waktu pemuatan halaman (setidaknya pada pemuatan halaman awal dan pemuatan halaman berikutnya, browser menyimpan gambar dalam cache). Apakah ada yang bisa diganti? Sayangnya, belum ada alternatif lain. Banyak browser mulai mendukung manifes offline, dan dimungkinkan untuk memperluasnya agar memungkinkan pengunduhan file (seperti file jar/zip) yang berisi daftar sumber daya dan URL terkait. Namun pendekatan seperti itu tidak akan terlihat untuk beberapa waktu ke depan...
Jadi, ketika memutuskan apakah akan menggunakan CSS Sprite, ketahuilah bahwa ada banyak faktor di luar kinerja pemuatan halaman awal. Sebagai pedoman umum, jika sebagian besar sprite CSS Anda tidak berisi konten gambar sebenarnya, Anda sebaiknya menghindari penggunaannya. Demikian pula, awasi kemungkinan masalah di masa depan sambil menjaga kecepatan memuat halaman sambil berhati-hati untuk menghindari bug memori dan dampak kinerja Sprite.
Kekurangan CSS Sprite lainnya
Berikut beberapa kekurangan CSS Sprite yang disebutkan oleh beberapa netizen pada komentar artikel ini:
Gambar yang dipanggil oleh CSS Sprite tidak dapat dicetak kecuali pernyataan print secara khusus ditambahkan ke @media oleh RichB
Jika Anda ingin memodifikasi gambar di Sprite, Anda harus memodifikasi keseluruhan gambar, yang tentunya akan menambah beban kerja Tom B
Jika Anda menemukan kekurangan pada Sprite CSS lain selama penggunaan, silakan menyebutkannya.