Gambar URI data sekecil mungkin untuk gambar transparan

Saya menggunakan gambar 1x1 transparan dengan gambar latar belakang, untuk dapat menggunakan sprite dan tetap memberikan teks alternatif untuk beberapa ikon.

Saya ingin menggunakan URI data untuk gambar guna mengurangi jumlah permintaan HTTP, tetapi apa string sekecil mungkin untuk menghasilkan gambar transparan ?

Saya menyadari bahwa saya dapat menggunakan data URI: s untuk gambar sebenarnya daripada sprite, tetapi lebih mudah untuk mempertahankannya ketika semuanya disimpan di CSS daripada tersebar di sekitar.

Setelah bermain-main dengan GIF transparan yang berbeda, beberapa di antaranya tidak stabil dan menyebabkan gangguan CSS. Misalnya, jika Anda memiliki <img>dan Anda menggunakan GIF transparan sekecil mungkin, itu berfungsi dengan baik, namun, jika Anda ingin GIF transparan Anda memiliki background-image, maka ini tidak mungkin. Untuk beberapa alasan, beberapa GIF seperti berikut mencegah latar belakang CSS (di beberapa browser).

Lebih pendek (tapi tidak stabil - 74 byte)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Saya akan menyarankan untuk menggunakan versi yang sedikit lebih lama dan lebih stabil sebagai berikut:

⇊ Stabil ⇊ (tapi sedikit lebih panjang - 78 byte)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Sebagai tip lainnya, jangan abaikan image/gifseperti yang disarankan satu komentar. Ini akan rusak di beberapa browser.

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

Panjang akhir tergantung pada apa yang di-gzip.

Saya pikir itu harus berupa file GIF 1x1 transparan terkompresi (82 byte):

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

Dibuat dengan data dopiaza.org: generator URI .

PNG Terkecil - 114 byte:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Orang ini memecahkan masalah melalui spesifikasi GIF. Solusinya untuk itu transparent.gifakan menjadi 37 byte:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Dia bahkan lebih kecil lagi dengan menghapus transparansi, lalu tabel warna ...

Spesifikasi GIF89a

• Header (6 byte)

  Terdiri dari byte "GIF" dan nomor versi, yang biasanya 89a.

• Deskriptor Layar Logis (7 byte)

  Tanpa membahas terlalu banyak detail, bagian file ini menunjukkan yang berikut:

  • File berukuran 1x1 piksel.
  • Ada tabel warna global.
  • Ada 2 warna dalam tabel warna global, yang kedua harus digunakan sebagai warna latar belakang.

• Tabel Warna Global (6 byte)

  Terdiri dari 3 byte per warna, satu byte untuk merah, hijau, dan biru, masing-masing. Dalam file kami, warna pertama adalah putih dan warna kedua adalah hitam.

• Ekstensi Kontrol Grafis (8 byte)

  Digunakan untuk menunjukkan bahwa warna kedua dalam tabel warna harus diperlakukan transparan (juga dapat digunakan untuk parameter animasi, tetapi tidak ada dalam file ini).

• Deskriptor Gambar (10 byte)

  File GIF sebenarnya dapat berisi beberapa "gambar" di dalamnya, sehingga Anda tidak perlu menentukan data gambar untuk bagian gambar yang memiliki warna yang sama dengan warna latar belakang. Setiap blok gambar memiliki posisi dan ukuran dalam ukuran gambar keseluruhan. Pada file di atas, posisinya 0,0 dan ukurannya 1x1.

• Data Gambar (5 byte)

  Satu blok data gambar berkode LZW . Dibutuhkan 5 byte untuk mewakili satu piksel yang dimiliki gambar di dalamnya. Algoritma kompresi tidak dirancang untuk mengompresi satu byte dengan sangat baik.

• Trailer GIF (1 byte)

  Satu byte dengan nilai hex 3B( ;dalam ASCII) menunjukkan akhir dari GIF.

Berdasarkan struktur yang diperlukan untuk GIF transparan, ternyata 43 byte cukup mendekati sekecil yang Anda bisa dapatkan.

Tapi, saya berhasil menemukan satu trik untuk membuatnya sedikit lebih kecil. Disebutkan dalam standar bahwa memiliki tabel warna global adalah opsional. Tentu saja, tidak ditentukan apa yang terjadi jika Anda membuat GIF tanpa tabel warna sama sekali.

Ketika Anda memiliki indeks tabel warna yang didefinisikan sebagai transparan, bagaimanapun, decoder GIF tampaknya tidak peduli bahwa sebenarnya tidak ada tabel warna.

Jadi saya mengubah deskriptor layar logis untuk menunjukkan tidak ada tabel warna global dan menghapus tabel itu sendiri, menghemat total enam byte, sehingga ukuran file turun menjadi hanya 37 byte.

Yang cukup menarik, Wordpress memberi saya daftar pesan kesalahan yang bagus dari GD yang mengeluh bahwa ini bukan file GIF yang valid, terlepas dari kenyataan bahwa Firefox dan GIMP sama-sama terbuka dan menampilkan (apakah "ditampilkan" saat transparan?) File baik baik saja.

Untuk membuatnya lebih kecil, saya melihat ke blok "opsional" terbesar yang tersisa pada gambar, ekstensi kontrol grafis. Jika Anda tidak membutuhkan transparansi, blok ini tidak lagi diperlukan, dan itu 8 byte lagi yang dapat Anda hapus.

Sumber: GIF Terkecil Yang Pernah Ada .

Anda dapat mencoba data SVG berikut (60 byte):

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

File svg yang berdiri sendiri akan terlihat seperti (62 byte):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

Lihat juga:

• Mengoptimalkan SVG di URI data
• Encoder url untuk SVG ( GitHub ) / SVG CSS URI - Pengganti yang dioptimalkan

Ini adalah yang terkecil yang saya temukan (26 byte):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

Saya menggunakan data uri berikut untuk mendapatkan gambar kosong: //:0

Untuk gambar kosong:

data:null

(itu akan diterjemahkan ke src=(unknown))