Imej besar termampat masih pilihan yang besar
Ruang imej kecil tidak mengecilkan fail yang dimuat turun. Jika setiap pelawat menerima foto saiz penuh yang sama, telefon masih boleh memuat turun piksel yang tidak digunakan oleh susun atur. Pemampatan dan pemilihan responsif menyelesaikan bahagian masalah yang berbeza.
Aliran kerja laman web menerangkan persediaan, manakala panduan penyampaian imej mengaitkannya dengan diagnostik prestasi. Eksperimen ini mengikuti satu foto daripada fail sedia kepada pilihan sebenar pelayar, tanpa menganggap skor sebagai hasil.
Sediakan calon, kemudian perhatikan pelayar
Kami membuat salinan berkadar dalam penyunting imej luaran sebelum pemampatan; Bitinz tidak mengubah saiznya. Pada 2026-10-29 setiap salinan diproses pada Seimbang dalam enjin setempat. Dimensi, bait dan jumlah semak mengenal pasti calon yang digunakan dalam eksperimen pelayar.
Halaman setempat menawarkan calon melalui srcset dengan peraturan sizes yang sepadan. Pemerhatian pelayar merekodkan lebar ruang pandang, ketumpatan piksel dan sumber dipilih. Ia mengukur data imej, bukan keseluruhan pemuatan halaman atau rangkaian mudah alih simulasi. Dasar editorial menerangkan buktinya.
Fail yang disediakan untuk pemilihan
Bandingkan saiz calon di sini, kemudian semak rekod pemilihan pelayar yang dipautkan dalam sumber. Pelayar hanya boleh memilih fail yang benar-benar ditawarkan halaman.
| Imej | Piksel | Keluaran | Tahap | Sebelum | Selepas | Dijimatkan |
|---|---|---|---|---|---|---|
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 bersamaan 1000 bait.
Fail yang benar-benar dimuat turun oleh pelayar
| Ruang pandang (CSS px) | Ketumpatan piksel | Lebar paparan (CSS px) | Lebar dipilih (px) | Data imej |
|---|---|---|---|---|
| 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 menggunakan konteks pelayar baharu dengan cache dimatikan. Kes paling lebar pada ketumpatan tinggi memilih calon terbesar kerana jurang besar dalam senarai calon. Calon bersaiz pertengahan wajar diuji; pelayar hanya boleh memilih fail yang ada dalam senarai.
Periksa imej dipilih pada skala berguna
Butiran foto sumber
Butiran foto termampat
Periksa foto pada skrin kecil dan paparan berketumpatan tinggi. Calon terkecil tidak semestinya terbaik jika imej kelihatan kabur. Begitu juga, calon besar tidak wajar dipilih hanya kerana saiz termampatnya kelihatan mengagumkan.
Rekod pemilihan pelayar ialah gambaran pada persekitaran yang dinyatakan. Cache dan keputusan pelayar boleh mempengaruhi lawatan berikutnya. Untuk mengulang pemerhatian, gunakan konteks pelayar baharu dan periksa imej yang diminta, bukan menekanya daripada dimensi paparan.
Hubungkan persediaan dengan penyampaian
Gunakan pemampat imej pada salinan yang disediakan, kemudian biarkan laman atau sistem pengurusan kandungan menawarkan varian sesuai. Jika penandaannya mengarahkan semua skrin kepada satu fail besar, pemampatan sahaja tidak mengubah pilihan itu.
Selaraskan sizes dengan susun atur CSS. Pelayar menggunakan petunjuk itu bersama calon dan ketumpatan paparan; ia tidak boleh memahami niat pengarang daripada nama fail. Periksa sumber dipilih selepas menukar susun atur.
Untuk aliran penerbitan berulang, API pembangun boleh memampatkan fail yang telah disediakan sebagai sebahagian daripada proses penerbitan. Mengecilkan dimensi kekal sebagai langkah persediaan berasingan. Panduan kualiti kami menerangkan cara membandingkan butiran sebelum menggantikan imej.
Periksa ruang imej pada halaman anda
- Ukur ruang imej dan tentukan lebar berkadar yang diperlukan reka bentuk.
- Sediakan dan mampatkan salinan sambil menyimpan asal yang boleh disunting.
- Tawarkan calon dengan peraturan
sizesyang sepadan dengan susun atur. - Periksa sumber dipilih dan rupa foto pada paparan berlainan.
Soalan lazim
- Adakah menetapkan lebar paparan mengecilkan fail muat turun?
- Lebar CSS mengubah susun atur, bukan bait satu fail imej. Tawarkan calon imej sesuai dan periksa sumber yang dipilih pelayar.
- Mengapa telefon berketumpatan tinggi boleh memilih imej lebih lebar?
- Paparan berketumpatan tinggi boleh menggunakan lebih banyak piksel imej dalam ruang yang kelihatan sama. Dimensi calon dan petunjuk saiz halaman mempengaruhi pilihan pelayar.
- Adakah eksperimen ini mengukur kelajuan halaman?
- Ia merekodkan hasil pemampatan dan pemilihan sumber imej. Pengalaman pemuatan seluruh halaman turut bergantung pada sumber lain, rangkaian dan kerja pemaparan.