Imej biasanya perkara paling berat pada satu halaman, yang menjadikannya tuas kelajuan terbesar yang anda kawal. Dapatkan dimensi dan berat failnya betul dan halaman terasa serta-merta. Salah tetapkan ia dan anda gagal Core Web Vitals tidak kira sebersih mana kod anda. Ini sasaran dan aliran kerja untuk mencapainya.
Sasaran dimensi
Padankan saiz piksel imej dengan tempat ia sebenarnya muncul. Panduan kasar:
- Hero lebar penuh: 1600–2000 px lebar meliputi kebanyakan susun atur desktop. Melebar lagi jarang membantu dan berkos banyak bait.
- Foto dalam kandungan: lebar lajur kandungan anda, biasanya 800–1200 px.
- Imej lakaran kecil / kad: 300–500 px.
- Avatar / ikon: 48–200 px pada saiz ia dipaparkan.
Menyajikan imej 4000px ke dalam slot 800px bermakna pelayar memuat turun dan menyahkod 25× piksel yang ia akan pernah tunjukkan. Itu pembaziran tulen — dan menyahkod imej besar juga menyentak benang utama.
Sasaran berat
Dimensi menetapkan siling; pemampatan menetapkan berat sebenar. Sasarkan:
- Imej hero: di bawah 200 KB (idealnya 100–150 KB).
- Foto dalam kandungan: 80–150 KB.
- Lakaran kecil: 10–30 KB.
- Jumlah imej per halaman: cuba kekal di bawah ~1 MB untuk seluruh halaman.
Jika satu imej melebihi ~300 KB, anggap ia sebagai pepijat untuk disiasat.
Mengapa ini memacu Core Web Vitals
Largest Contentful Paint (LCP) Google mengukur berapa lama sehingga elemen terbesar pada skrin dipaparkan — dan pada kebanyakan halaman, elemen terbesar itu ialah imej (biasanya hero). Hero yang berat dan terlebih saiz secara langsung menaikkan LCP. LCP yang baik ialah di bawah 2.5 saat; hero yang kembung boleh melepasinya pada sambungan mudah alih dengan sendirinya sahaja.
Dua lagi kemenangan berkaitan imej:
- Tetapkan atribut lebar dan tinggi supaya pelayar menempah ruang — itu melindungi skor Cumulative Layout Shift (CLS) anda.
- Utamakan hero (jangan muat-malas imej LCP) dan muat-malas segala yang di bawah lipatan.
Aliran kerja dua langkah
Langkah 1 — ubah saiz kepada lebar paparan sebenar. Guna Pengubah Saiz Imej untuk menurunkan setiap imej kepada saiz ia muncul. Kunci aspek hidup, penurunan skala berkualiti tinggi. Ini sahaja selalunya memotong berat 80–90%.
Langkah 2 — mampat. Suapkan fail yang telah diubah saiz kepada Pemampat Imej: kualiti 75–85 untuk foto (kehilangan tidak kelihatan secara visual), pengkuantuman 256-warna untuk PNG. Ia tidak pernah mengeluarkan fail lebih besar daripada asal, mengendalikan kelompok, dan mempunyai had lebar pilihan supaya anda boleh melakukan kedua-dua langkah sekali gus dengan berkesan. Untuk pelayar moden, menukar foto kepada WebP memerah 25–35% lagi.
Ukur ia, jangan meneka
Sebaik sahaja imej anda dioptimumkan, sahkan halaman benar-benar menjadi lebih pantas. Page QA IMG.DIY mengaudit URL langsung melalui Google PageSpeed Insights dan melaporkan berat imej halaman supaya anda boleh mengesan mana-mana fail yang masih terlalu berat. Satu amaran: Page QA memerlukan sambungan internet — tidak seperti alat imej, ia memanggil API PageSpeed Google, jadi ia tidak boleh berjalan luar talian. Guna ia selepas anda menyebar untuk menyemak LCP sebenar dan bajet imej anda.
Peribadi secara lalai
Alat ubah saiz, mampat, dan tukar berjalan sepenuhnya dalam pelayar anda dengan Canvas dan WebAssembly — tiada yang dimuat naik, dan selepas lawatan pertama anda ia dicache dan berfungsi luar talian. Anda boleh menyediakan imej seluruh laman web tanpa sambungan, kemudian jalankan Page QA dalam talian sebaik halaman langsung.
Imbasan pantas: saizkan dimensi dengan betul, mampat kepada sasaran berat, utamakan hero untuk LCP, dan sahkan dengan Page QA.