Mengapa Imej Laman Web Anda Perlu Dimampatkan | Bulk Image Compressor
Jika laman web anda mengambil masa lebih daripada beberapa saat untuk dimuatkan, orang akan pergi. Itu bukan pendapat. Penyelidikan Google sendiri menunjukkan bahawa kadar lantunan meningkat sebanyak 32% apabila muatan halaman pergi dari satu saat ke tiga saat. Dan imej hampir selalu menjadi sebab terbesar halaman dimuatkan perlahan.
Kebanyakan laman web menyajikan imej yang jauh lebih besar daripada yang diperlukan. Satu imej hero terus dari kamera atau laman foto stok boleh dengan mudah menjadi 5MB atau lebih. Pada sambungan jalur lebar yang baik, fail itu sahaja mengambil masa beberapa saat untuk dimuatkan. Pada sambungan mudah alih 3G, anda melihat kira-kira 15 saat hanya untuk satu imej. Sekarang bayangkan halaman dengan lima atau enam imej seperti itu.
Seberapa besar imej anda, sebenarnya?
Berikut adalah pemeriksaan realiti pantas. Buka alat pembangun pelayar anda (F12), pergi ke tab Rangkaian, muat semula halaman anda, dan tapis mengikut “Img.” Lihat saiznya. Anda mungkin akan menemui sekurang-kurangnya beberapa imej melebihi 1MB.
Untuk rujukan, inilah rupa imej tidak mampat biasa:
- Foto DSLR yang digunakan sebagai sepanduk hero: 4 hingga 8MB
- Foto produk dari telefon pintar: 2 hingga 5MB
- Foto stok dimuat turun pada resolusi penuh: 3 hingga 10MB
- Infografik atau ilustrasi disimpan sebagai PNG: 1 hingga 4MB
Selepas mampatan yang betul, imej yang sama boleh menjadi 100KB hingga 300KB tanpa kehilangan kualiti yang kelihatan. Itu pengurangan 90% atau lebih dalam saiz fail.
Kelajuan halaman dan Core Web Vitals
Google menggunakan Core Web Vitals sebagai isyarat kedudukan, dan imej secara langsung mempengaruhi dua daripada tiga metrik.
Largest Contentful Paint (LCP) mengukur berapa lama masa yang diambil untuk elemen kelihatan terbesar dimuatkan. Pada kebanyakan halaman, elemen terbesar itu adalah imej. Jika imej hero anda adalah 5MB, LCP anda akan menjadi teruk. Google menganggap apa-apa melebihi 2.5 saat sebagai skor LCP yang buruk. Imej mampat secara rutin membawa LCP di bawah ambang itu.
Cumulative Layout Shift (CLS) mengukur kestabilan visual. Imej tanpa dimensi yang ditentukan menyebabkan peralihan susun atur semasa ia dimuatkan. Ini lebih mengenai atribut HTML daripada mampatan, tetapi imej bersaiz besar yang dimuatkan perlahan memburukkan masalah kerana halaman memaparkan kandungan di sekitar ruang tempat letak yang mungkin tidak sepadan dengan saiz imej akhir.
Anda boleh menyemak skor semasa anda dengan Google PageSpeed Insights. Jalankan halaman utama anda dan beberapa halaman dalaman. Jika skor prestasi anda di bawah 90, imej mungkin sebahagian besar masalahnya.
Hubungan SEO
Kelajuan halaman adalah faktor kedudukan Google yang disahkan. Ia telah menjadi sejak 2010 untuk desktop dan 2018 untuk mudah alih. Pengenalan Core Web Vitals pada 2021 menjadikannya lebih langsung.
Tetapi kesannya melampaui hanya isyarat kelajuan. Halaman perlahan dirayap kurang kerap oleh Googlebot. Google memperuntukkan “belanjawan rayap” kepada setiap laman, dan jika halaman anda perlahan, bot menghabiskan bajetnya menunggu respons dan bukannya mengindeks lebih banyak kandungan anda. Untuk laman yang lebih besar dengan beratus-ratus atau ribuan halaman, ini sangat penting.
Terdapat juga kesan tidak langsung melalui tingkah laku pengguna. Apabila orang melantun dari halaman perlahan, Google perasan. Kadar lantunan tinggi dan masa di halaman rendah menghantar isyarat penglibatan negatif yang boleh menjejaskan kedudukan anda dari semasa ke semasa.
Pengalaman pengguna dan kadar lantunan
Orang tidak sabar dalam talian. Kajian oleh Portent mendapati bahawa kadar penukaran menurun secara purata 4.42% untuk setiap saat tambahan masa muat. Jika laman e-dagang anda mengambil masa lima saat untuk dimuatkan dan bukannya dua, anda mungkin kehilangan peratusan jualan yang bermakna.
Pengguna mudah alih lebih tidak sabar. Lebih separuh daripada semua trafik web datang dari peranti mudah alih, dan sambungan mudah alih biasanya lebih perlahan daripada desktop. Imej anda perlu cukup kecil untuk dimuatkan dengan cepat pada telefon menggunakan rangkaian sel.
Terdapat juga faktor persepsi. Laman yang pantas terasa lebih profesional dan boleh dipercayai. Laman yang perlahan terasa rosak, walaupun semuanya akhirnya dimuatkan. Tanggapan pertama berlaku dalam milisaat.
Kos lebar jalur bertambah
Jika anda menggunakan pengehosan kongsi atau pelan asas, lebar jalur mungkin bukan sesuatu yang anda fikirkan. Tetapi untuk laman dengan trafik sebenar, lebar jalur memerlukan wang.
Mari buat matematik. Katakan halaman purata anda mempunyai 3MB imej dan anda mendapat 100,000 paparan halaman sebulan. Itu 300GB data imej dipindahkan setiap bulan. Selepas mampatan, halaman yang sama mungkin mempunyai 400KB imej, membawa pemindahan turun kepada 40GB. Itu adalah pengurangan ketara dalam kos pengehosan dan bil CDN.
Untuk laman trafik tinggi, syarikat media, atau kedai e-dagang dengan katalog produk besar, perbezaan ini boleh menjimatkan beratus-ratus atau ribuan dolar sebulan.
Cara memampatkan imej laman web secara kelompok
Anda boleh memampatkan imej satu per satu dalam Photoshop atau GIMP, tetapi jika anda mempunyai berpuluh-puluh atau beratus-ratus imej, itu tidak praktikal. Mampatan kelompok adalah cara untuk pergi.
Dengan Pemampat Imej Pukal, anda boleh menyeret masuk semua imej laman web anda sekaligus dan memampatkannya bersama-sama. Berikut adalah aliran kerja praktikal:
-
Eksport imej semasa anda. Jika ia sudah ada di laman anda, muat turunnya. Jika anda membina laman baru, kumpulkan semua imej yang anda bercadang untuk gunakan.
-
Pilih format anda. Untuk gambar, JPEG atau WebP berfungsi paling baik. Untuk grafik dengan ketelusan, gunakan PNG atau WebP. Jika anda tidak pasti format mana yang hendak dipilih, lihat panduan format imej untuk prestasi web kami.
-
Tetapkan tahap kualiti anda. Untuk kebanyakan imej laman web, tetapan kualiti 75 hingga 85% memberikan anda keseimbangan yang baik antara saiz fail dan kualiti visual. Anda boleh pergi lebih rendah untuk gambar kecil atau imej latar belakang. Untuk lebih terperinci mengenai pertukaran ini, lihat artikel kami tentang mengurangkan saiz fail tanpa kehilangan kualiti.
-
Mampatkan dan muat turun. Alat memproses semuanya dalam pelayar anda, jadi imej anda tidak pernah meninggalkan komputer anda. Gantikan yang asal pada pelayan anda dengan versi mampat.
-
Tetapkan dimensi juga. Jangan sajikan imej selebar 4000px dalam bekas yang hanya selebar 800px. Ubah saiz imej anda untuk dipadankan dengan saiz paparannya sebelum atau semasa mampatan. Ini sahaja boleh memotong saiz fail secara dramatik.
Contoh sebelum dan selepas yang cepat
Inilah rupa mampatan dalam amalan untuk laman web biasa:
| Imej | Sebelum | Selepas | Penjimatan |
|---|---|---|---|
| Sepanduk hero (JPEG) | 4.2MB | 210KB | 95% |
| Foto pasukan (JPEG) | 3.1MB | 185KB | 94% |
| Logo (PNG) | 890KB | 95KB | 89% |
| Gambar kecil blog (JPEG) | 1.8MB | 120KB | 93% |
| Jumlah | 10MB | 610KB | 94% |
Itulah perbezaan antara halaman yang dimuatkan dalam satu saat dan yang dimuatkan dalam lapan saat.
Jangan lupa tentang kandungan baru
Memampatkan imej sedia ada anda adalah pembetulan sekali, tetapi anda juga memerlukan proses untuk kandungan berterusan. Setiap kali anda atau pasukan anda menambah pos blog baru, halaman produk, atau halaman pendaratan, imej tersebut harus dimampatkan sebelum disiarkan.
Jadikan mampatan imej sebagai sebahagian daripada aliran kerja penerbitan kandungan anda. Ia mengambil masa beberapa minit dan kesannya terhadap kelajuan dan SEO laman anda adalah nyata dan boleh diukur.
Imej laman web anda mungkin merupakan peningkatan prestasi tunggal terbesar yang boleh anda lakukan. Alatnya percuma, prosesnya pantas, dan hasilnya muncul dengan serta-merta dalam skor kelajuan halaman anda.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor