Gambar URI data sekecil mungkin untuk gambar transparan

125

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.

css css-sprites

— Jacob Rask
sumber

1

Bukankah lebih baik menggunakan gambar 1x1 yang sebenarnya, dengan penyiapan caching? Anda tidak memiliki lebih banyak permintaan http, dan total overhead data, url ke gambar bisa lebih kecil dari 78 byte data URI.

— Redzarf

1

@Redzarf: sebenarnya, tidak, itu mungkin tidak akan lebih baik. sumber daya yang kecil dan jarang berubah memengaruhi waktu muat halaman bukan karena ukuran file, tetapi karena permintaan HTTP bolak-balik. Kehalusan lainnya adalah bahwa sebagian besar browser jauh lebih agresif dalam melakukan cache CSS dibandingkan sumber daya lainnya, sehingga browser cenderung tidak bereksperimen dengan css yang menyegarkan (dan konten yang disematkan), sehingga menghemat lebih banyak perjalanan http.

— SingleNegationElimination

167

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.

— Layke
sumber

1

+1 terima kasih! Saya perhatikan ini berguna. Saya menggunakan data Anda untuk membuat plugin ini sehingga saya dapat menggunakan gambar tipe responsif secara native dengan sampul latar belakang atau berisi-

— Jason Sebring

1

Mengapa yang lebih pendek "tidak stabil"? Saya melihat bahwa itu kadang-kadang menyebabkan gambar hitam, saya hanya ingin tahu apakah ada yang tahu mengapa.

— jvenema

Setelah mengalami banyak kesulitan, saya benar-benar menemukan bahwa versi "lebih pendek" sebenarnya membuat browser mogok di beberapa (tidak semua) halaman di situs saya di browser Android lama (HTC One S, OS 4.1).

— WebSeed

Jawaban yang bagus tapi sejauh ini tidak sekecil mungkin .

— Josh Habdas

22

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

Panjang akhir tergantung pada apa yang di-gzip.

— Adria
sumber

3

Apakah ada argumen yang menentang penggunaan SVG? Adakah kasus di mana itu bukan ide yang bagus?

— gemetar

SVG baik-baik saja untuk banyak kasus, tetapi jika digabungkan dengan width: auto;, SVG akan mengambil lebar induknya. Gambar statis seperti GIF atau PNG, jika diberi tinggi dan lebar tetap otomatis, akan mempertahankan rasio aspeknya.

— snazzybouche

16

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 .

— KARASZI István
sumber

14

PNG Terkecil - 114 byte:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

— joshcarr
sumber

Perlu disebutkan bahwa ini mudah dibuat menggunakan GIMP. File yang dihasilkan akan memiliki ukuran 68 byte (sekecil mungkin, sejauh ini).

— Ismael Miguel

@AminahNuraini ini adalah PNG.

— joshcarr

2

@AminahNuraini: Bagaimana dengan jawaban yang mengatakan "SVG" kepada Anda?

— Balapan Ringan di Orbit

10

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 .

— mckamey
sumber

1

Per artikel tersebut, variasi 37 byte bergantung pada perilaku yang tidak terdefinisi, dan nyatanya penulis menyebutkan bahwa pengurai gambar wordpress tidak dapat menanganinya. Meskipun mungkin akan berfungsi di sebagian besar browser, saya akan menganggapnya sebagai pilihan yang berisiko. Saya akan tetap menggunakan variasi 43 byte dari artikel yang sama ,. Variannya sudah diposting di atas . Lihat juga diskusi di komentar pada jawaban atas

— Brian

9

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:

— kenorb
sumber

2

Mungkin juga akan dikodekan dan digunakan dalam favicon atau CSS contentproperti.

— Josh Habdas

6

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

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

— KarasQ
sumber

Ini menjadi hitam di IE11.

— tomasz86

4

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

— Jurgis
sumber

Firefox 44 dan Internet Explorer 11 menampilkan tag alt img. Anda juga harus menggunakan salah satu cara di atas atau menghapus tag alt

— PersyJack

Ini lebih efisien daripada permintaan / tanggapan untuk gambar?

— nu everest

Namun tidak akan memvalidasi

— Lucian Davidescu

0

Untuk gambar kosong:

data:null

(itu akan diterjemahkan ke src=(unknown))

— T.Todua
sumber

Saya suka ini pada prinsipnya, tetapi validator w3c tidak menyetujui dalam praktiknya: Kesalahan: Data nilai buruk: null untuk atribut src pada elemen img: Akhir prematur URI.

— brennanyoung