Imej besar ialah sebab nombor satu halaman dimuatkan perlahan. Pembetulannya hampir selalu dua langkah: jadikan imej dimensi yang betul, kemudian mampatkan apa yang tinggal. Buat kedua-duanya dan foto 4 MB menjadi foto 150 KB yang nampak serupa di skrin.
Mari letakkan nombor sebenar padanya.
Saiz sasaran untuk dituju
Anda tak perlu meneka. Inilah bajet berat praktikal yang mengekalkan halaman pantas:
- Hero / sepanduk selebar penuh: di bawah 200 KB, sebaiknya ~100–150 KB.
- Foto dalam artikel: 80–150 KB setiap satu.
- Lakaran kecil / avatar: 10–30 KB.
- Logo atau ikon (PNG/SVG): di bawah 30 KB; selalunya jauh kurang.
Dan dimensi:
- Hero selebar penuh: 1600–2000 px lebar sudah memadai untuk kebanyakan susun atur (gandakannya hanya kalau anda menyasarkan Retina dan mampu menanggung bait).
- Foto dalam lajur: padankan dengan lebar kandungan anda — selalunya 800–1200 px.
- Lakaran kecil: saiz yang ia sebenarnya paparkan, cth. 300–400 px.
Kalau mana-mana imej tunggal pada halaman melebihi ~300 KB, ia biasanya kesilapan yang berbaloi dibaiki.
Langkah 1: Ubah saiz kepada lebar paparan sebenar
Inilah langkah yang orang langkau, dan ia tuas terbesar. Foto terus dari telefon selalunya lebar 4000+ piksel. Kalau ia dipaparkan dalam lajur 800 piksel, anda menghantar 25 kali ganda lebih banyak piksel daripada yang skrin tunjukkan — dan kiraan piksel memacu saiz fail lebih daripada apa-apa.
Gunakan Pengubah Saiz Imej untuk mengecilkan imej kepada lebar yang ia sebenarnya muncul. Ubah saiz mengikut piksel atau peratusan, kekalkan nisbah aspek terkunci, dan biarkan pengecil berkualiti tinggi mengekalkan tepi bersih.
Menyaiz betul semata-mata selalunya memotong saiz fail sebanyak 80–90% sebelum anda memampat satu bait pun.
Langkah 2: Mampatkan apa yang tinggal
Sekarang kecilkan data di dalam dimensi betul itu.
- Foto (JPG/WebP): tetapkan gelangsar kualiti kepada 75–85. Itu lossless secara visual untuk kebanyakan imej sambil memotong saiz dengan kuat.
- PNG (tangkapan skrin, grafik): Pemampat Imej mengurangkannya kepada palet 256 warna, lazimnya menjimatkan 60–80% tanpa perubahan yang nyata dan mengekalkan ketelusan.
Pemampat juga menghadkan keluaran pada saiz asal — ia tak pernah menyerahkan kembali sesuatu yang lebih besar — dan ia ada had lebar pilihan, jadi anda sebenarnya boleh buat kedua-dua langkah dalam satu laluan: tetapkan had kepada lebar sasaran anda dan mampatkan sekali gus. Kelompokkan seluruh folder dan muat turun sebagai ZIP.
Pilih format yang betul sambil anda melakukannya
Kalau imej anda akan disajikan kepada pelayar moden, menukar foto ke WebP lazimnya mengatasi JPEG dengan 25–35% lagi pada kualiti sama. Grafik rata kekal sebagai PNG (atau WebP). Jangan simpan foto sebagai PNG — itu kesilapan kembung klasik, mudah penalti 5–10×.
Aliran kerja realistik
Untuk catatan blog dengan lima foto:
- Ubah saiz setiap satu kepada lebar lajur anda (katakan 1200 px).
- Mampatkan pada kualiti 80, atau tukar ke WebP.
- Sahkan setiap satu mendarat di bawah ~150 KB.
- Semak pangkasan 100% bagi satu imej untuk memastikan kualiti bertahan.
Lima foto yang bermula pada 20 MB keseluruhan akan mendarat sekitar 600 KB — halaman yang dimuatkan dalam sekelip mata bukannya tersekat.
Peribadi dan luar talian
Segala di atas berjalan sepenuhnya dalam pelayar anda menggunakan Canvas dan WebAssembly. Tiada imej dimuat naik ke pelayan, dan selepas lawatan pertama anda alat dicache dan berfungsi luar talian. Anda boleh mengoptimumkan sepenuh catatan imej tanpa sambungan dan tanpa apa-apa meninggalkan mesin anda.