Haruskah saya menanamkan gambar sebagai data / base64 di CSS atau HTML

Untuk mengurangi permintaan nomor pada server saya telah menyematkan beberapa gambar (PNG & SVG) sebagai BASE64 langsung ke css. (Ini otomatis dalam proses pembuatan)

seperti ini:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

Apakah ini praktik yang baik? Apakah ada alasan untuk menghindari ini? Apakah ada beberapa browser utama yang tidak memiliki dukungan url data?

Pertanyaan bonus: Apakah masuk akal untuk melakukan ini untuk CSS & JS juga?

Apakah ini praktik yang baik? Apakah ada alasan untuk menghindari ini?

Ini adalah praktik yang baik biasanya hanya untuk gambar CSS yang sangat kecil yang akan digunakan bersama (seperti sprite CSS) ketika kompatibilitas IE tidak masalah, dan menyimpan permintaan lebih penting daripada cacheability.

Ini memiliki sejumlah kelemahan utama:

• Tidak bekerja sama sekali di IE6 dan 7.

• Bekerja hanya untuk sumber daya hingga ukuran 32k di IE8 . Ini adalah batas yang berlaku setelah pengkodean base64. Dengan kata lain, tidak lebih dari 32.768 karakter.

• Ini menyimpan permintaan, tetapi malah menggembungkan halaman HTML! Dan membuat gambar tidak bisa disimpan. Mereka dimuat setiap kali halaman yang mengandung atau style sheet dimuat.

• Base64 menyandikan ukuran gambar sebesar 33%.

• Jika disajikan dalam sumber daya yang di-gzip, data:gambar hampir pasti akan menjadi beban yang mengerikan pada sumber daya server! Gambar secara tradisional sangat intensif menggunakan CPU untuk dikompres, dengan sedikit sekali pengurangan ukuran.

Jawaban umum di sini tampaknya menunjukkan bahwa ini tidak diperlukan, karena serangkaian alasan yang sah. Namun, semua ini tampaknya mengabaikan perilaku aplikasi modern dan proses pembangunan.

Bukan tidak mungkin (dan sebenarnya cukup mudah) untuk merancang proses sederhana yang akan berjalan melalui folder gambar dan akan menghasilkan satu CSS dengan semua gambar folder ini.

Css ini akan sepenuhnya di-cache dan secara dramatis akan mengurangi perjalanan bolak-balik ke server, yang disarankan oleh @MemeDeveloper sebagai salah satu hit kinerja terbesar.

Tentu, ini retas. tanpa keraguan. sama seperti sprite adalah hack. Di dunia yang sempurna ini tidak akan diperlukan, sampai saat itu, itu mungkin dilakukan jika yang perlu Anda perbaiki adalah:

1. Halaman dengan banyak gambar yang tidak mudah "spritable".
2. Round trip ke server adalah hambatan yang sebenarnya (pikirkan mobile).
3. kecepatan (ke tingkat milidetik) sangat penting untuk kasus penggunaan Anda.
4. Anda tidak peduli (seperti yang seharusnya, jika Anda ingin web untuk melanjutkan) tentang IE5 dan IE6.

pandangan ku.

Itu bukan praktik yang baik. Beberapa browser tidak mendukung data URI (mis. IE 6 dan 7) atau dukungan terbatas (mis. 32KB untuk IE8).

Lihat juga artikel Wikipedia ini untuk detail lengkap tentang Kerugian URI Data:

• Skema URI data

Kekurangan

• Data URI tidak di-cache secara terpisah dari dokumen yang berisi (mis. File CSS atau HTML) sehingga data diunduh setiap kali dokumen yang mengandung diunduh ulang.
• Konten harus disandikan ulang dan disematkan kembali setiap kali perubahan dilakukan.
• Internet Explorer melalui versi 7 (sekitar 15% dari pasar pada Januari 2011), tidak memiliki dukungan.
• Internet Explorer 8 membatasi URI data hingga panjang maksimum 32 KB.
• Data dimasukkan sebagai aliran sederhana, dan banyak lingkungan pemrosesan (seperti browser web) mungkin tidak mendukung penggunaan wadah (seperti multipart/alternativeatau message/rfc822) untuk memberikan kompleksitas yang lebih besar seperti metadata, kompresi data, atau negosiasi konten.
• URI data yang dikodekan Base64 berukuran 1/3 lebih besar dari padanan binernya. (Namun, overhead ini berkurang menjadi 2-3% jika server HTTP memampatkan respons menggunakan gzip)
• URI data mempersulit perangkat lunak keamanan untuk memfilter konten.

Saya menggunakan data-uri selama sekitar satu bulan, dan saya baru saja berhenti menggunakannya karena mereka membuat lembar style saya sangat besar.

Data-uri berfungsi di IE6 / 7 (Anda hanya perlu menyajikan file mhtml ke browser tersebut).

Satu manfaat yang saya dapatkan dari menggunakan data-uri adalah bahwa gambar latar belakang saya diberikan segera setelah stylesheet diunduh, sebagai lawan dari pemuatan bertahap yang kita lihat sebaliknya

Sangat menyenangkan bahwa kami memiliki teknik ini tersedia, tetapi saya tidak akan menggunakannya terlalu banyak di masa depan. Saya merekomendasikan untuk mencobanya, supaya Anda tahu sendiri

Saya lebih cenderung menggunakan CSS Sprite untuk menggabungkan gambar dan menghemat permintaan. Saya belum pernah mencoba teknik base64 tetapi ternyata tidak berhasil di IE6 dan IE7. Juga berarti bahwa jika ada perubahan gambar maka Anda harus mengirim ulang seluruh yang hilang, kecuali Anda memiliki banyak file CSS, tentu saja.

Saya tidak tahu tentang praktik terbaik umum tetapi saya tidak ingin melihat hal seperti itu jika saya bisa membantu. :)

Browser dan server web memiliki banyak hal caching yang ada di dalamnya, jadi saya akan berpikir bahwa cara terbaik Anda adalah meminta server Anda untuk memberi tahu klien untuk menyimpan file gambar cache. Kecuali jika Anda memiliki banyak gambar yang sangat kecil pada sebuah halaman maka saya tidak akan berpikir biaya overhead dari beberapa permintaan adalah masalah besar. Browser umumnya akan menggunakan koneksi yang sama untuk meminta banyak file sehingga tidak ada koneksi jaringan baru yang dibuat, kecuali jika volume lalu lintas melalui header HTTP signifikan dibandingkan dengan ukuran file gambar, saya tidak akan terlalu khawatir tentang banyak permintaan banyak .

Apakah ada alasan mengapa Anda berpikir bahwa ada terlalu banyak permintaan ke server saat ini?

Saya menyarankan untuk gambar kecil yang sering digunakan, misalnya ikon umum aplikasi web.

• Mungil, karena pengkodean Base64 meningkatkan ukuran
• Sering digunakan, karena ini membenarkan waktu muat awal yang lebih lama

Tentu saja masalah dukungan dengan browser lama harus selalu diingat. Mungkin juga merupakan ide yang baik untuk menggunakan kemampuan kerangka kerja untuk secara otomatis menyejajarkan gambar dengan url data seperti GWT's ClientBundle atau setidaknya menggunakan kelas CSS alih-alih menambahkannya ke gaya elemen secara langsung.

Informasi lebih lanjut dikumpulkan di sini: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-and-when-not-to/