Alat pengembang · Encoder & decoder Base64
Gambar Base64 sebaris di CSS: kapan data: URI membantu dan kapan merugikan
· Mengapa itu penting
base64 pertunjukan
Menyisipkan gambar sebagai data Base64: URI menghapus permintaan tetapi mengembangkan file dan mengalahkan cache. Posting ini menjelaskan kapan perdagangan itu layak dilakukan dan kapan file terpisah lebih cepat.
Stylesheet yang tumbuh hingga ratusan kilobyte — kebiasaan inlining suatu tim dan bagaimana hal itu muncul dalam waktu pemuatan
Tim pengembangan memutuskan bahwa memasukkan ikon kecil sebagai data Base64: URI di CSS akan mengurangi permintaan HTTP dan meningkatkan kecepatan pemuatan halaman. Seiring waktu, seiring dengan bertambahnya ikon, stylesheet bertambah menjadi 400 kilobyte.
Bundel CSS, yang seharusnya berisi aturan gaya, kini didominasi oleh data gambar. Tim mengukur waktu pemuatan dan menemukan bahwa halaman lebih lambat dibandingkan sebelum inlining, bukan lebih cepat. Masalahnya menjadi jelas: stylesheet 400-kilobyte diunduh pada setiap pemuatan halaman dan di-cache per halaman, sedangkan jika ikon adalah file terpisah, satu file ikon akan di-cache dan dibagikan ke setiap halaman.
Data apa: URI sebaris dan mengapa itu Base64 — sintaksis, jenis media, dan penalti ukuran
Menambahkan lebih banyak halaman ke situs membuat masalah menjadi lebih buruk, karena setiap halaman mendownload lagi stylesheet yang sama dengan semua gambar yang disisipkan. Postingan ini menjelaskan apa itu data: URI, mengapa itu Base64, bagaimana inlining memengaruhi caching dan kinerja, dan aturan praktis untuk memutuskan kapan trade-off layak dilakukan. Data: URL adalah cara untuk menyematkan sumber daya secara langsung dalam file HTML atau CSS alih-alih menautkan ke file eksternal. Sintaksnya adalah data:mediaType;base64,encoded_bytes.
mediaType menyatakan jenis sumber daya berikut, seperti image/svg+xml untuk SVG, image/png untuk PNG, atau teks/plain untuk teks. Bendera ;base64 menunjukkan bahwa payload adalah teks yang dikodekan Base64, bukan teks yang dikodekan persen. encoded_bytes adalah data aktual. Saat browser menemukan data: URL di properti href, src, atau background-image, browser akan mendekode Base64 dan merender sumber daya sebaris. Tidak ada permintaan HTTP yang terjadi karena sumber daya sudah ada, tertanam dalam dokumen induk. Ini menyimpan satu atau beberapa permintaan HTTP, yang penting dalam dunia HTTP/1.1 di mana setiap permintaan memiliki overhead.
Caching dan jalur kritis — mengapa byte sebaris diunduh lagi dengan setiap halaman yang menyertakan stylesheet
Di dunia HTTP/2 atau HTTP/3 di mana banyak permintaan dapat digandakan melalui satu koneksi, penghematannya lebih kecil. Hukuman ukuran pengkodean Base64 bersifat langsung dan signifikan. Ikon SVG berukuran 3 kilobyte saat disimpan sebagai file XML menjadi 4 kilobyte saat dikodekan Base64 dan disematkan sebagai data: URI. Peningkatan ukuran 33% dari pengkodean harus ditambahkan ke setiap halaman yang menyertakan stylesheet. Jika ikon digunakan pada sepuluh halaman, stylesheet diunduh sepuluh kali, setiap kali menyertakan gambar berkode 4-kilobyte yang sama.
Jika ikon adalah file terpisah, file asli berukuran 3-kilobyte akan diunduh satu kali dan di-cache, kemudian digunakan dari cache di sepuluh halaman. Pilihan ekonomisnya jelas untuk sebagian besar ikon: file terpisah secara keseluruhan berukuran lebih kecil. Manfaat inlining hanya berlaku bila ikon digunakan tepat pada satu halaman atau sangat sedikit halaman, dan ikon tersebut benar-benar penting untuk halaman tersebut. Favicon yang muncul di setiap halaman adalah kandidat yang buruk untuk disisipkan; lebih baik sebagai file cache terpisah.
Biaya penguraian pada klien — seberapa besar string inline ditangani oleh parser CSS dan HTML, dijelaskan secara kualitatif
Ilustrasi satu kali yang hanya digunakan pada laman landas mungkin mendapat manfaat dari penyisipan untuk menyimpan permintaan. Caching mengalahkan sebagian besar manfaat penyebarisan data: URI dalam stylesheet. Stylesheet biasanya di-cache selama berhari-hari atau berminggu-minggu. Saat stylesheet diunduh, setiap sumber daya yang ada di dalamnya diunduh lagi, meskipun browser sudah menyimpan gambar tersebut dalam cache. Jika stylesheet diperbarui, semua data yang disisipkan harus divalidasi ulang atau diunduh ulang, meskipun hanya satu aturan CSS yang diubah.
Hal ini menyebabkan pembengkakan: perubahan warna atau spasi memicu pengunduhan ulang stylesheet secara penuh, termasuk kilobyte data gambar yang tidak berubah. File gambar terpisah dapat di-cache secara terpisah dengan header kedaluwarsanya sendiri, diperbarui secara terpisah, dan digunakan kembali di seluruh stylesheet dan halaman. Cache browser jauh lebih efisien ketika sumber daya berupa file terpisah dibandingkan ketika sumber daya tersebut tertanam dalam dokumen yang lebih besar. Biaya parsing dan rendering bertambah ketika string Base64 yang besar tertanam dalam stylesheet. Parser CSS harus membaca seluruh stylesheet sebelum menerapkan aturan.
Contoh praktis: memasukkan ikon SVG kecil sebagai teks — menempelkan markup ke dalam encoder dan menyusun data: URI dengan tangan
Stylesheet 400-kilobyte dengan Base64 sebaris adalah 400 kilobyte teks yang harus diuraikan sebelum aturan apa pun dapat diterapkan. Parser HTML yang merender halaman dengan data besar: URI dalam atribut gaya atau properti gambar latar harus mendekode Base64 dan membuat gambar sebelum elemen dapat dirender. Untuk ikon SVG sederhana, ini sepele. Untuk gambar yang lebih kompleks atau ikon yang lebih besar, decoding dan rendering terjadi di thread utama, sehingga berpotensi memblokir interaktivitas. Biaya kualitatif memang nyata namun sulit diukur tanpa pembuatan profil.
Biasanya, jika gambar yang disisipkan berukuran lebih dari beberapa kilobyte, file terpisah akan lebih cepat. Contoh praktis menunjukkan trade-off yang sebenarnya. Ambil ikon panah SVG sederhana, 1.2 kilobyte dari XML. Dikodekan Base64 menjadi 1600 karakter, atau sekitar 1.6 kilobyte dengan awalan data: URL. Aturan CSS terpisah dengan background-image: url(/icons/arrow.svg) mungkin menambahkan 40 bytes ke stylesheet. File ikon diunduh satu kali, di-cache, dan digunakan kembali. Inlining menyimpan satu permintaan HTTP untuk satu ikon tersebut tetapi menambahkan 1.6 kilobyte ke setiap pemuatan stylesheet.
Aturan praktis yang berlaku — aset kecil, kritis, dan sekali pakai sejalan; segala sesuatu yang lain sebagai file
Jika stylesheet berukuran 50 kilobyte dan dibagikan ke 20 halaman, menyejajarkan ikon tersebut akan menambah total unduhan sebesar 32 kilobyte per kunjungan situs. Permintaan HTTP yang disimpannya paling banyak beberapa ratus byte overhead. Permintaan juga secara otomatis dimultipleks di HTTP/2, menghilangkan perbedaan overhead. Perdagangan inlining mengalami kerugian besar kecuali stylesheetnya kecil, ikonnya sangat besar, atau ikonnya muncul tepat di satu halaman dan tidak di tempat lain. Aturan praktis yang bertahan dalam pengawasan terbatas dan spesifik.
Aset yang kecil, penting, dan sekali pakai dapat dimasukkan ke dalamnya. Panah 200-byte SVG yang hanya muncul pada satu halaman yang tidak biasa mungkin disisipkan untuk menghemat overhead permintaan. Segala sesuatu yang lain harus terpisah. Logika jalur rendering yang penting penting: jika ikon harus segera terlihat dan setiap milidetik waktu muat memerlukan konversi, inlining mungkin menang. Untuk halaman biasa dengan ikon khas, file terpisah hampir selalu lebih baik. Uji kedua pendekatan dengan aset Anda yang sebenarnya dan ukur pemuatan halaman, tingkat cache hit, dan air terjun permintaan.
Yang tidak tercakup di sini — HTTP/2 dan HTTP/3 detail multiplexing dan kompresi format gambar
Jangan berasumsi inlining adalah optimasi tanpa pengukuran. Cara termudah untuk mendapatkan stylesheet yang membengkak adalah dengan membuat inline secara bertahap tanpa mengukur apakah setiap penambahan benar-benar lebih cepat. Encoder & decoder Base64 membantu Anda membuat keputusan ini sebelum melakukan inlining. Tempelkan markup SVG Anda atau sumber ikon lainnya ke dalam alat sebagai teks. Klik Encode dan atur opsi untuk menghasilkan data: URI. Alat ini menunjukkan panjang data yang tepat: URL. Bandingkan dengan ukuran aturan CSS terpisah dan file aset itu sendiri.
Hitung berapa banyak halaman yang perlu dibagikan stylesheet untuk mencapai titik impas pada file sebaris versus file terpisah. Kumpulkan data: URI dan uji di halaman HTML yang sebenarnya sebelum Anda memasukkannya ke stylesheet. Jika URI lebih panjang dari beberapa ratus karakter, biaya penyematan kemungkinan besar lebih besar daripada manfaat menyimpan permintaan. Gunakan alat ini untuk menguji ikon dan aset Anda yang sebenarnya, lalu ukur dampaknya pada metrik pemuatan halaman Anda yang sebenarnya sebelum dan sesudah penyisipan.
Kesimpulan: sebariskan secara hemat dan ukur — bagaimana encoder & decoder Base64 memungkinkan Anda mengkodekan markup SVG dan melihat ukuran persisnya sebelum Anda berkomitmen
Pendekatan performans adalah selektif dalam melakukan inlining. Ikon yang digunakan di setiap halaman atau di banyak halaman adalah file cache yang terpisah. Ikon yang digunakan tepat pada satu halaman atau sangat penting untuk pengecatan pertama dapat disisipkan. Ukur trade-off untuk aset dan halaman Anda yang sebenarnya, bukan mengikuti saran umum. Gunakan encoder & decoder Base64 untuk melihat ukuran pasti dari setiap aset sebaris sebelum Anda menambahkannya ke stylesheet. Penalti ukuran adalah nyata dan berlipat ganda di setiap tampilan halaman.
Caching dan permintaan multiplexing telah membuat manfaat awal dari inlining menjadi kurang penting. Untuk sebagian besar aplikasi modern, stylesheet yang lebih kecil dan efisiensi cache yang lebih baik dari file terpisah melebihi overhead permintaan. Sejajarkan dengan hemat, ukur hasil dan ukur kepercayaan di atas intuisi.