Saya sedang membangun sebuah situs web dan saya ingin membuat permintaan HTTP sesedikit mungkin untuk kecepatan dan seo situs web yang lebih baik. Halaman yang baru saja saya buat menunjukkan gambar pada gulir (gambar memiliki scr data atribut yang dikonversi ke src ketika pengguna gulir ke bawah di gambar masing-masing).

Karena semua gambar memiliki data-srcatribut alih-alih src, W3C menunjukkan kepada saya kesalahan.

Saat ini saya menemukan dua opsi, untuk mengatasi masalah ini:

1. Src awal semua gambar menjadi url dari gambar 1x1 kosong
2. Src awal semua gambar menjadi basis data 64 gambar kosong

Ketika saya menggunakan URL gambar 1x1 kosong, maka (diuji dengan tools.pingdom.com) itu menunjukkan 1 permintaan HTTP. Ketika saya menggunakan data base64 gambar kosong maka itu menunjukkan permintaan sebanyak jumlah gambar pada halaman.

Yang mana dari mereka adalah cara yang lebih efisien, untuk kecepatan situs web yang lebih cepat dan membuat lebih sedikit permintaan HTTP? (misalkan pengguna memuat laman web pada kecepatan internet 14,4 kbps - kecepatan internet pertama).

Tapi untuk SEO?

Apakah ada opsi lain?

Opsi gambar base64 harus digunakan di mana Anda hanya akan memiliki jumlah gambar yang sangat kecil dan Anda ingin menghilangkan overhead jaringan untuk mengambil gambar dari server. Namun dari apa yang Anda tunjukkan dalam pertanyaan saya menganggap ini bisa skala ke sejumlah besar gambar. Dalam hal ini saya akan menggunakan satu gambar transparan 1px x 1px tunggal dari server dengan masa cache yang panjang karena akan diambil dari server sekali kemudian di-cache di browser dan server proxy menengah.

Sebagai contoh gambar ini akan berukuran sekitar 95 byte ( https://commons.wikimedia.org/wiki/File:1x1.png ), untuk string gambar yang disandikan base64 Anda akan menemukan ukurannya akan setara dengan gambar ini ukuran file tetapi akan diulang untuk setiap gambar yang Anda tambahkan.

Untuk 2-5 gambar ukuran dan kecepatan akan diabaikan dan akan mengurangi lalu lintas server dengan menghilangkan satu pengambilan keseluruhan, tetapi untuk lebih dari itu ukuran halaman akan mulai menjadi terlalu besar yang akan mempengaruhi waktu pemuatan dan pada gilirannya peringkat SEO.

Jelas pergi dengan data URI, kecuali jika Anda memerlukan dukungan untuk IE <8. ( Dukungan browser .)

Menanamkan banyak gambar kecil langsung di HTML mungkin terlihat akan memakan lebih banyak bandwidth daripada menghubungkannya secara langsung, tetapi peningkatannya akan dikurangi dengan gzip ; satu-satunya perbedaan dalam ukuran halaman akan datang dari perbedaan panjang antara satu URI data dari gambar kosong dan satu URL gambar di server Anda. Sebuah GIF kosong bisa sekecil 43 byte. Base 64-encoded, itu 82 byte. Tidak ada cara yang akan melakukan lebih buruk dari permintaan HTTP> 500-byte , respons berukuran sama, dan kemudian saya bahkan tidak mempertimbangkan ukuran paket TCP dan overhead lainnya.

Berikut ini adalah gambar GIF 43-byte Basis yang disandikan:

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

Mengenai SEO, lihat kode sumber situs Google, misalnya Google News , dan cari data:image/gif,base64...

Saat ini saya menemukan dua opsi, untuk menyelesaikan masalah ini: Src awal semua gambar menjadi basis data 64 gambar kosong

Opsi ini tidak hanya membutuhkan peramban modern, tetapi juga bisa lebih lambat di sisi klien karena peramban harus meng-decode data gambar untuk menghasilkan gambar.

Src awal semua gambar menjadi url dari gambar 1x1 kosong

Ini adalah langkah OK asalkan URL gambar kosong untuk semua slot gambar persis URL yang sama dan memiliki masa pakai cache yang lama yang ditentukan dalam tajuk HTTP "kontrol-cache". Masalah dengan ini adalah bahwa ketika file gambar baru dimuat, kotak gambar akan melompat ke ukuran baru yang bisa membuat pengalaman pengguna tidak sebagus ini.

Ide yang hampir sempurna adalah ...

Saat halaman mulai, sajikan kotak dengan kotak ukuran tetap yang dapat mengakomodasi setiap gambar. Tidak apa-apa jika seluruh kotak tidak pas di layar. Kemudian buat javascript yang dijalankan setelah HTML dimuat, dan dalam javascript itu, buat elemen gambar baru dan lampirkan ke setiap sel kisi kemudian atur sumber gambar ke file gambar yang benar. Lakukan ini sampai layar pertama terisi. kemudian mendeteksi pengguliran dalam javascript dan kemudian ketika pengguliran terjadi, ulangi proses di atas untuk sel-sel baru.

Sekarang jika Anda menginginkan yang terbaik dari yang terbaik, dan kualitas bukan masalah besar, maka apa yang saya sarankan (yang saya juga terapkan di situs saya) adalah untuk membangun sebuah kisi dan mengaturnya sedemikian rupa sehingga gambar latar belakang kisi itu adalah lembar sprite dari semua gambar yang diformat sebagai kotak gambar. Metode ini fleksibel dan cepat untuk memuat karena satu permintaan diperlukan untuk semua gambar.

Berikut adalah HTML templat untuk digunakan jika Anda ingin pergi rute cepat. Hanya dua permintaan yang dibuat. Kode HTML, dan satu gambar. Dalam kode ini, saya menganggap setiap gambar dari lembar memiliki lebar 100 piksel dan tinggi 200 piksel dan bahwa setiap gambar dengan sempurna disejajarkan satu sama lain tanpa celah.

<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>

Dalam kode saya, saya menambahkan 3 titik. Itu berarti Anda dapat terus menambahkan gambar dengan menambah angka dan dengan menambah posisi sebanyak 100 setiap kali asalkan sprite sheet Anda hanya memiliki satu baris gambar. Juga, dengan beberapa peramban seperti Opera, Anda mungkin perlu menambahkan tanda negatif di depan nilai posisi latar belakang untuk membuatnya berfungsi.

Gambar, karena rawatan.

Dalam pengalaman saya itu bekerja lebih baik menggunakan gambar. Ini lebih jelas dalam kode aktual dan lebih mudah diingat. Saya ragu Anda akan mengingat string yang disandikan untuk gambar transparan, dan bahkan jika Anda melakukannya, penggantinya / kolega Anda.
Jika Anda kembali ke kode ini setelah beberapa minggu, Anda telah melupakan base64.

Akan jauh lebih mudah untuk mempertahankan kode jika Anda menggunakan gambar, pro minimal tidak membebani ini.

Bagaimana hanya ~ 3 byte tambahan, 0 permintaan http tambahan, dan 0 ekstra img src panjang (atau 0 tempat penampung data-gambar yang tidak di-cache). Bisakah Anda menggunakan src kosong untuk gambar?

<img src data-src="banannanannas.jpg" />

Dan jika mereka memiliki alttag, Anda dapat menyembunyikannya dari kesalahan / kegagalan gambar:

<img src data-src="banannanannas.jpg" onerror="this.alt=''" alt="some desc" />

Menampilkan: tidak ada. Meretas tag alt memiliki sedikit penundaan FOUC dari batas placeholder gambar. Mungkin itu bisa dibersihkan juga.