Gambar besar terkompresi masih pilihan besar
Slot kecil tidak mengecilkan berkas unduhan. Jika semua pengunjung menerima foto penuh yang sama, ponsel masih dapat mengambil piksel yang tidak terpakai. Kompresi dan pemilihan responsif mengatasi bagian masalah yang berbeda.
Alur situs web menjelaskan persiapan, dan panduan pengiriman gambar menghubungkannya dengan diagnostik kinerja. Kami mengikuti foto sampai pemilihan nyata, bukan menganggap skor sebagai hasilnya.
Siapkan kandidat, lalu amati peramban
Salinan proporsional dibuat di penyunting gambar luar sebelum kompresi; Bitinz tidak mengubah dimensinya. Pada 2026-10-29 tiap salinan diproses di level Seimbang dalam mesin lokal. Dimensi, byte, dan checksum mengenali kandidat eksperimen.
Halaman lokal menawarkan kandidat lewat srcset dengan aturan sizes yang sesuai. Pengamatan mencatat lebar area pandang, kepadatan piksel, dan sumber terpilih. Ini mengukur muatan gambar, bukan seluruh pemuatan halaman atau simulasi jaringan seluler. Kebijakan editorial menjelaskan buktinya.
Berkas yang disiapkan untuk pemilihan
Bandingkan ukuran kandidat, lalu periksa catatan pemilihan pada sumber. Peramban hanya dapat memilih berkas yang ditawarkan halaman.
| Gambar | Piksel | Keluaran | Level | Sebelum | Sesudah | Dihemat |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Seimbang | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Seimbang | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Seimbang | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Seimbang | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB setara dengan 1000 bita.
Yang benar-benar diunduh peramban
| Lebar area pandang (CSS px) | Kepadatan piksel | Lebar tampilan (CSS px) | Lebar terpilih (px) | Muatan gambar |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Setiap baris memakai konteks peramban baru dengan cache dinonaktifkan. Kasus terlebar dengan kepadatan tinggi memilih kandidat terbesar karena celah besar dalam kumpulan yang ditawarkan. Kandidat antara layak diuji; peramban hanya dapat memilih berkas yang ada di daftar.
Periksa gambar pada skala berguna
Detail foto sumber
Detail foto terkompresi
Lihat pada layar kecil dan layar padat. Kandidat terkecil bukan yang terbaik jika tampak kabur. Kandidat besar juga tidak layak hanya karena ukuran terkompresinya tampak mengesankan.
Catatan pemilihan adalah pengamatan pada lingkungan tertentu. Cache dan keputusan peramban dapat memengaruhi kunjungan berikutnya. Untuk mengulang, gunakan konteks peramban baru dan periksa gambar yang diminta, bukan menebaknya dari dimensi terlihat.
Hubungkan persiapan dengan pengiriman
Gunakan pengompres gambar untuk salinan yang telah disiapkan, lalu biarkan situs atau sistem konten menawarkan varian. Jika markah selalu menunjuk berkas besar yang sama, kompresi saja tidak mengubah pilihan.
Selaraskan sizes dengan tata letak CSS. Peramban menggabungkan petunjuk itu, kandidat dan kepadatan layar; nama berkas tidak menjelaskan niat penulis. Periksa sumber terpilih setelah mengubah tata letak.
Untuk alur penerbitan berulang, API pengembang dapat mengompresi berkas yang sudah disiapkan sebagai bagian dari proses penerbitan. Pengecilan dimensi tetap merupakan langkah persiapan terpisah. Panduan kualitas kami menjelaskan cara membandingkan detail sebelum mengganti gambar.
Periksa slot gambar halaman
- Ukur slot dan pilih lebar proporsional yang dibutuhkan desain.
- Siapkan dan kompres salinan sambil menyimpan sumber yang dapat disunting.
- Tawarkan kandidat dengan aturan
sizessesuai tata letak. - Periksa sumber terpilih dan foto terlihat pada layar berbeda.
Tanya jawab
- Apakah lebar tampilan mengecilkan berkas unduhan?
- Lebar CSS mengubah tata letak, bukan byte satu berkas. Tawarkan kandidat sesuai dan periksa sumber yang dipilih peramban.
- Mengapa ponsel padat memilih gambar lebih lebar?
- Layar padat dapat memakai lebih banyak piksel gambar dalam slot terlihat yang sama. Dimensi kandidat dan petunjuk ukuran halaman memengaruhi pilihan.
- Apakah eksperimen ini mengukur kecepatan halaman?
- Ini mencatat hasil kompresi dan pemilihan sumber gambar. Pengalaman pemuatan seluruh halaman juga bergantung pada sumber lain, jaringan, dan perenderan.