Satu imej hero yang tidak dioptimumkan boleh lebih berat daripada keseluruhan HTML, CSS, dan JavaScript halaman web digabungkan. Imej menyumbang kira-kira 50% daripada jumlah bait pada halaman web purata, menjadikannya tuil tunggal terbesar untuk meningkatkan prestasi. Namun pengoptimuman imej kekal sebagai salah satu aspek yang paling disalahfahami dalam pembangunan web dan penciptaan kandungan.
Impaknya jauh melebihi kelajuan pemuatan. Saiz imej mempengaruhi kedudukan carian anda, bil hosting anda, pelan data pengguna anda, dan malah kadar penukaran anda.
Sambungan prestasi: Core Web Vitals dan LCP
Core Web Vitals Google adalah set metrik yang secara langsung mempengaruhi kedudukan carian. Di antaranya, Largest Contentful Paint (LCP) mengukur berapa lama elemen terbesar yang kelihatan mengambil masa untuk dipapar pada skrin. Dalam kebanyakan kes, elemen itu adalah imej.
Google menganggap LCP di bawah 2.5 saat sebagai "baik." Antara 2.5 dan 4 saat "perlu penambahbaikan." Melebihi 4 saat "buruk."
Akibatnya ketara:
- Penurunan kedudukan SEO — Core Web Vitals adalah isyarat kedudukan; halaman perlahan hilang kedudukan
- Kadar lantunan lebih tinggi — 53% pelawat mudah alih pergi jika halaman mengambil lebih 3 saat
- Penukaran lebih rendah — setiap saat tambahan masa muat mengurangkan penukaran kira-kira 7%
Peraturan am 100 KB Untuk imej kandungan pada halaman web, sasarkan bawah 100 KB setiap imej. Untuk imej hero lebar penuh, kekal bawah 200 KB. Sasaran ini boleh dicapai dengan format moden dan pemampatan yang betul tanpa kehilangan kualiti yang kelihatan.
Lossy vs. lossless: memahami pertukaran
Semua pemampatan imej jatuh ke dalam dua kategori. Pemampatan lossless mengurangkan saiz fail dengan mengekalkan setiap piksel. Pengurangan sederhana — biasanya 10-30%. PNG menggunakan pemampatan lossless.
Pemampatan lossy membuang maklumat yang mata manusia tidak mungkin perasan. Pengurangan dramatik — biasanya 70-90%. JPEG dan WebP (mod lossy) menggunakan pendekatan ini.
Pandangan kritikal ialah pemampatan lossy pada kualiti 80-85% secara visual tidak boleh dibezakan daripada yang asal untuk gambar. Perbezaan perseptual pada dasarnya sifar, tetapi perbezaan saiz fail adalah besar.
| Pendekatan | Pengurangan saiz | Kehilangan kualiti | Terbaik untuk |
|---|---|---|---|
| Lossless (PNG) | 10-30% | Tiada | Logo, tangkapan skrin, grafik banyak teks |
| Lossy pada 85% (JPEG/WebP) | 70-85% | Tidak dapat dilihat | Foto, ilustrasi, latar belakang |
| Lossy pada 60% (JPEG/WebP) | 85-95% | Ketara pada pemeriksaan rapat | Lakaran kecil, imej hiasan |
Format penting: imej yang sama, saiz berbeza jauh
Pilihan format imej mempunyai impak yang sama besar. Gambar disimpan sebagai PNG boleh 5 hingga 10 kali lebih besar daripada imej yang sama sebagai JPEG pada kualiti 85%.
JPEG kekal standard sejagat untuk gambar. WebP menawarkan fail 25-35% lebih kecil daripada JPEG. AVIF lebih baru, menawarkan pemampatan lebih baik daripada WebP. PNG pilihan tepat hanya untuk imej yang memerlukan pengeluaran semula piksel tepat.
Lebar jalur dan storan: kos tersembunyi
Halaman dengan 2 MB imej, dilihat 10,000 kali sebulan, memindahkan 20 GB data imej bulanan. Optimumkan ke jumlah 400 KB, dan anda memindahkan 4 GB — pengurangan 80%.
Imej responsif dan lazy loading
Imej lebar 1920 piksel dipapar pada skrin telefon 375 piksel membazirkan lebih 96% pikselnya. Penyelesaiannya ialah imej responsif dan lazy loading — menangguhkan muat turun imej di bawah lipatan sehingga pengguna menatal menghampirinya.
Ketahui lebih lanjut
Pengoptimuman imej adalah topik di mana penambahbaikan kecil bertambah menjadi hasil yang ketara. toolk.io menawarkan Pemampat Imej yang memproses semuanya dalam pelayar anda. Tutorial untuk memampatkan imej dan menukar antara format juga tersedia di laman ini.