Mengoptimumkan gambar di WordPress: mengompres, memuatkan dengan lambat.

Gambar merupakan komponen penting dalam kandungan laman web, tetapi ia juga merupakan “pembunuh utama” yang memperlahankan kelajuan - sebuah gambar HD yang tidak dioptimalkan (seperti 5MB) mungkin mengakibatkan masa memuat halaman meningkat sebanyak 3-5 saat, yang secara langsung akan membuat pengguna kehilangan kesabaran. Untungnya, pengoptimuman gambar adalah mudah, dan dengan dua kaedah utama “mengurangkan saiz” dan “memuatkan gambar secara tangguh”, anda boleh mengurangkan masa memuat gambar lebih dari 501 kali. Bahagian ini akan menggunakan plugin untuk melakukan pengoptimuman secara automatik, dan pemula tidak memerlukan pengetahuan teknikal untuk melakukannya.

I. Mengapa gambar mesti dioptimalkan? 3 fakta yang mengejutkan.

• Gambar biasanya membentuk 60%-80% daripada jumlah keseluruhan saiz beban laman web (jauh lebih besar daripada teks, kod dan kandungan lain).
• Setiap kali masa memuat naik meningkat satu saat, kadar kehilangan pengguna akan meningkat sebanyak 20% (terutamanya bagi pengguna mudah alih yang lebih mementingkan kelajuan).
• Gambar yang tidak dioptimalkan akan secara langsung mengurangkan skor Google PageSpeed (yang mempengaruhi kedudukan SEO).

Matlamat utamaTanpa mengurangkan kualiti gambar, mengurangkan saiz gambar sebanyak 50%-80%, dan membuat gambar yang bukan berada di skrin utama dimuatkan “apabila diperlukan”.

II. Kaedah 1: Mengompres gambar (menggunakan plugin untuk mengurangkan saiz secara automatik)

Prinsip pemampatan gambar adalah untuk membuang data yang berlebihan (seperti maklumat peralatan pengambilan gambar, butiran piksel yang tidak dipaparkan), sambil mengekalkan kualiti gambar yang dapat dilihat oleh mata manusia secara amnya. Adalah disyorkan untuk menggunakan plugin “Smush” untuk pemampatan automatik sepenuhnya, yang menyokong pemprosesan berjumlah untuk gambar sedia ada dan pemampatan automatik untuk gambar yang baru dimuat naik.

Langkah 1: Pasang dan aktifkan plugin Smush.

1. Log masuk ke panel pentadbiran WordPress, dan pergi ke “Plugins → Install Plugins”.
2. Cari “Smush”, cari plugin yang ditandai “Dibangunkan oleh WPMU DEV”, dan klik “Pasang” → “Aktifkan”.

Langkah 2: Konfigurasikan pemampatan automatik (gambar-gambar baru tidak perlu diproses secara manual)

Selepas diaktifkan, plugin akan secara automatik beralih ke halaman tetapan, dan konfigurasi hendaklah dilakukan mengikut langkah-langkah berikut:

1. Mengaktifkan pemampatan automatik.Di halaman “Tetapan”, pastikan kotak “Mampatkan secara automatik imej yang baru dimuat naik” telah ditandai (dipilih secara lalai), jadi imej yang dimuat naik pada masa akan datang akan dimampatkan secara automatik tanpa perlu melakukannya secara manual.
2. Pilih mod pemampatan.：
   • Untuk pemula, saya cadangkan “Mampatan tanpa kehilangan” (pilihan lalai): Ia hanya membuang data yang berlebihan, tanpa menjejaskan kualiti gambar, dan kadar mampatan ialah kira-kira 30% - 50%.
   • Jika anda mencari kadar mampatan yang lebih tinggi (seperti jika saiz gambar masih terlalu besar), anda boleh memilih “Mampatan dengan kehilangan kualiti”: dengan sedikit kehilangan kualiti (hampir tidak dapat dilihat oleh mata manusia), kadar mampatan boleh mencapai 60%-80% (perlu mengklik “Tetapan lanjutan” untuk mengaktifkannya).
3. Simpan tetapananKlik “Simpan tetapan” di bahagian bawah halaman.

Langkah 3: Memampatkan gambar sedia ada secara pukal (satu tindakan, pengoptimuman untuk seluruh laman web)

Jika laman web tersebut mempunyai banyak gambar yang tidak termampat (seperti gambar-gambar artikel yang dimuat naik sebelum ini), gunakan fungsi “Pemampatan Pukal” untuk mengoptimumkannya dengan satu klik:

1. Di halaman plugin Smush, klik tab “Smush Pukulan” di sebelah kiri.
2. Klik “Mula Sekarang”, dan plugin akan secara automatik mengimbas semua gambar dalam pustaka media.
3. Selepas pengimbasan selesai, klik “Aplikasikan Smush kepada XX gambar”, sistem akan mengompresnya secara beramai-ramai (proses mungkin memakan masa beberapa minit, tidak perlu menunggu, boleh berjalan di latar belakang).
4. \nLihat kesan pemampatan.Selepas pemampatan selesai, “Jumlah ruang yang dijimatkan” akan dipaparkan (seperti “12MB telah dijimatkan”), dan perbandingan saiz sebelum dan selepas pemampatan untuk setiap gambar juga akan diberikan.

III. Kaedah 2: Memuatkan secara beransur-ansur (membiarkan gambar “dimuatkan mengikut keperluan”)

Prinsip Lazy Load ialah:Hanya apabila pengguna menatal ke lokasi gambar, gambar itu akan mula dimuatkan.Dengan cara ini, gambar pada skrin pertama (kawasan yang dilihat pertama kali apabila membuka halaman) akan dimuatkan terlebih dahulu, manakala gambar yang bukan berada pada skrin pertama (seperti gambar artikel di bawah dan gambar di bahagian bawah halaman) tidak akan dimuatkan buat sementara waktu, yang akan mengurangkan masa pemuatan awal secra mendadak.

Aktifkan pemuatan tangguh dengan satu klik menggunakan plugin Smush (tanpa memerlukan plugin tambahan).

Smush telah memasangkan fungsi pemuatan tertunda, tanpa perlu memasangkan plugin secara berasingan. Langkah-langkah penetapannya adalah seperti berikut:

1. Di halaman plugin Smush, klik tab “loading tertunda” di sebelah kiri.
2. Tandai “Aktifkan Loading Tertunda” dan ikuti konfigurasi yang disyorkan di bawah:
   • “Jenis gambar yang ditunda memuatkan”: Pilih semua (gambar, avatar, thumbnail, dll.).
   • “Pilih untuk tidak memaparkan gambar pada skrin pertama”: Disyorkan untuk mengaktifkan pilihan ini (gambar pada skrin pertama tidak akan ditunda, memastikan pengguna dapat melihat kandungan utama dengan cepat apabila mereka membuka halaman).
   • “Animasi memuatkan”: Kekalkan pilihan lalai (paparkan animasi ringan untuk memaklumkan kepada pengguna bahawa gambar sedang dimuatkan).
3. Klik “Simpan Tetapan”, dan pemuatan tangguh akan berkuat kuasa serta-merta.

Verifikasi sama ada pemuatan tertunda berfungsi.

1. Buka halaman mana-mana artikel di laman web (termasuk beberapa gambar), dan tekan F12 untuk membuka “Alat Pembangun” pelayar.
2. Klik pada tab “Internet”, segarkan halaman, dan perhatikan status pemuatan gambar:
   • Apabila dimuatkan buat pertama kali, hanya gambar-gambar pada skrin pertama akan dipaparkan dalam senarai “Rangkaian”.
   • Scroll ke bawah halaman, dan apabila gambar-gambar bukan pada skrin pertama muncul, rekod memuat turun gambar-gambar tersebut akan muncul dalam senarai “Internet”, yang menunjukkan bahawa muat turun berlambat telah berjaya.

4. Teknik tambahan untuk mengoptimalkan gambar yang mesti diketahui oleh pemula.

1. Pilih format gambar yang betul (lebih asas daripada mengompres)

Sebelum memuat naik gambar, pilih format yang sesuai untuk mengurangkan saiznya dari sumber:

• Foto / Gambar kompleksMenggunakan format WebP (saiz 30%-50% lebih kecil daripada JPG, dan kualiti gambar lebih baik), plugin Smush boleh menukar JPG/PNG ke WebP secara automatik (aktifkan “penukaran automatik ke WebP” dalam “Tetapan-tetapan lanjutan”).
• Grafik/ikon yang ringkas.Gunakan format PNG (menyokong latar belakang telus, saiz kecil), dan elakkan menggunakan JPG.
• Saya benar-benar tidak akan menggunakan format BMP dan TIFF.: Format-format ini sangat besar, dan tidak sesuai untuk digunakan dalam laman web.

2. Kawal saiz gambar (jangan guna “gambar besar yang dipaparkan dalam bentuk yang kecil”).

Banyak pemula akan memuat naik gambar HD yang diambil oleh kamera mereka (seperti 3000×2000 piksel) dan kemudian mengaturkannya untuk dipaparkan sebagai 300×200 piksel melalui WordPress — ini adalah kesilapan! Kerana pelayar masih akan memuatkan gambar besar yang asal, membazir lebar jalur dan masa.

Aksi yang betul：

• Sebelum memuat naik, gunakan alat gambar (seperti “Paint” yang disertakan dengan komputer, atau alat dalam talian seperti “Canva”) untuk memotong gambar ke saiz paparan sebenar (seperti spanduk skrin pertama yang lebarnya 1200 piksel).
• Jika anda tidak tahu cara menggunakan alat-alat gambar, anda boleh memasangkan plugin “Imsanity”, yang akan mengompres gambar-gambar besar yang diunggah ke saiz yang ditentukan (seperti lebar maksimum 1200 piksel).

3. Elakkan penyalahgunaan gambar (bukan semakin banyak, semakin baik).

• Untuk kandungan yang boleh dijelaskan dengan kata-kata, jangan guna gambar (seperti panduan langkah-langkah yang mudah).
• Beberapa gambar berturut-turut boleh digabungkan menjadi slaid gambar (seperti paparan produk), yang mengurangkan bilangan gambar yang dimuatkan secara serentak.

5. Penyelesaian Masalah yang Kerap Dihadapi

1. Kualiti gambar selepas mengkompresnya menjadi sangat buruk?

• Jika anda menggunakan “mampatan yang merosakkan”, anda boleh mengurangkan intensiti mampatan dalam tetapan Smush (“Tetapan-tetapan lanjutan” → “Intensiti mampatan” kepada 50%).
• Di syorkan untuk menggunakan “pengepresan tanpa kehilangan” + “format WebP” terlebih dahulu, untuk mengimbangi saiz dan kualiti gambar.

2. Adakah pemuatan lambat mengakibatkan gambar dipaparkan secara tidak normal (seperti kosong, tidak sejajar)?

• Periksa sama ada gambar skrin pertama telah dikecualikan (jika tidak, ini mungkin menyebabkan gambar skrin pertama dimuatkan dengan lambat, lalu menunjukkan skrin kosong untuk sementara waktu).
• Jika beberapa gambar perlu dimuatkan serta-merta, anda boleh memasukkan nama kelas CSS gambar tersebut dalam kotak “Pengecualian” dalam tetapan “Muat Turun Tertunda” Smush (memerlukan pengetahuan kod yang ringan; pemula boleh mematikan muat turun tertunda untuk halaman yang mengandungi gambar tersebut buat sementara waktu).

3. Adakah peningkatan kelajuan selepas pengoptimuman tidak ketara?

• Uji semula menggunakan GTmetrix (rujukan) Alat untuk menguji kelajuan laman web.(), lihat “Pie Chart” untuk mengesahkan jika masa memuat gambar telah berkurangan.
• Jika ia masih perlahan, mungkin disebabkan oleh faktor lain (seperti pelayan yang memberi respons perlahan, terlalu banyak plugin), dan perlu digabungkan dengan kaedah pengoptimuman berikutnya (seperti mengaktifkan cache).

Ringkasan

Optimumisasi gambar adalah langkah yang paling “berbaloi untuk usaha” dalam mengoptimumkan kelajuan laman web - dengan menggunakan plugin Smush, anda boleh mengurangkan masa memuat gambar lebih dari 50% dalam masa 10 minit. Langkah-langkah utama ialah: memasang Smush → mengaktifkan pemampatan automatik dan pemampatan berjadual → mengaktifkan pemuatan tangguh (kecuali gambar pada skrin pertama).

Ingat, prinsip pengoptimuman gambar adalah “cukup baik”: tidak perlu mengejar kadar mampatan yang ekstrem, dan tidak perlu memuat naik gambar yang sangat tajam. Mencari keseimbangan antara kualiti gambar dan kelajuan, membolehkan pengguna melihat kandungan dengan jelas dan memuatnya dengan cepat, adalah keadaan yang paling optimum.