Mengenai optimasi teknologi CSS Sprite, seberapa banyak yang bisa kita lakukan dan seberapa banyak kita bisa mengurangi jumlah permintaan? Hal ini tidak bisa dilakukan secara sepihak, semua bergantung pada kerjasama antara gambar XHTML, CSS, dan CSS Sprite. Sejauh ini, belum ada metode optimasi yang mutlak. Inilah sebabnya saya sering mengukur hubungan antara gambar CSS Sprite dan XHTML dalam proyek, seperti: "A Background Implements Adaptive Nine-Grid Grid". optimasi gambar.
Pengoptimalan Gambar
Untuk GIF non-animasi, disarankan untuk menggunakan PNG8 karena juga dapat memperoleh efek yang sama dan menghemat 10%-30% ukuran file.
Dibandingkan dengan Fireworks, Photoshop mengekspor gambar PNG dengan kualitas yang sama, namun ukurannya sedikit lebih besar. Meskipun Fireworks telah melakukan optimasi kompresi yang sesuai, Fireworks belum mencapai kompresi terbaik.
Perangkat lunak desain yang saya tahu tidak mencapai kompresi terbaik untuk memproses gambar PNG, dan ukuran gambar masih memiliki sejumlah ruang kompresi. Anda dapat mencoba menggunakan "Alat Pengoptimalan Gambar" yang diperkenalkan di bawah ini untuk mencapai pengoptimalan kompresi bebas distorsi.
Dalam hal volume dan ukuran gambar, disarankan agar ukurannya dijaga dalam 100K (yang lebih sesuai dengan persyaratan UKURAN terbaik kondisi nasional) dan ukurannya adalah 800px (ukuran terbaik). (Belajar dari sumber personel yang berwenang, tidak ada cara untuk memverifikasi detailnya)
Teknik Pemotongan Gambar Sprite CSS
Urutan gambar Sprite CSS dan gambar gabungan ditambahkan dari atas ke bawah, kiri ke kanan. Posisi latar belakang umumnya diposisikan menggunakan kombinasi angka, yang dapat mengurangi masalah yang tidak perlu akibat pemeliharaan.
Tidak disarankan untuk menjaga jarak tertentu pada gambar CSS Sprite karena ukuran file bertambah dan ukuran file bertambah.
Pada CSS Sprite, menggabungkan warna yang berdekatan atau sama dapat mengurangi jumlah warna, karena ukuran file gambar dengan jumlah warna yang sedikit akan relatif kecil.
Ada kesenjangan besar dalam gambar CSS Sprite dengan ukuran yang sama, yang dalam banyak kasus meningkatkan ukuran sampai batas tertentu, sehingga gambar CSS Sprite tidak boleh memiliki kesenjangan.
Di antara gambar CSS Sprite dengan ukuran yang sama, gambar yang disusun secara vertikal akan memiliki ukuran file lebih besar daripada gambar yang disusun secara horizontal. Demo
Pada gambar CSS Sprite, gambar yang disusun secara horizontal akan memiliki ukuran file yang lebih besar dibandingkan gambar yang disusun secara vertikal. Demo
Penggabungan gambar yang sama: Saat menerapkan gambar CSS Sprite, gabungkan gambar identik dengan tepat untuk menghemat ruang dan mengurangi volume. Demo
Membedakan gambar yang tidak perlu digabungkan: Jika pengguna saat ini menentukan bahwa hanya satu negara bagian atau level yang akan ditampilkan, tidak perlu menggabungkan gambar dari level atau negara bagian lain. Demo
Posisi pemotongan emas: Posisi paling fleksibel di sisi kanan atau kiri gambar CSS Sprite adalah posisi yang paling cocok untuk menempatkan ikon di depan teks sehingga tidak akan terganggu oleh gambar CSS Sprite lainnya, dan ada tidak perlu memesan lebar garis tertentu.