Pengoptimuman imej laman web

Pengoptimuman imej adalah salah satu aspek prestasi WordPress yang paling menguntungkan: dengan struktur halaman dan tema yang sama, hanya mendapatkan saiz fail imej, dimensi, format dan kaedah penghantaran yang tepat sering kali boleh menghasilkan peningkatan segera dalam kelajuan pemuatan.

Walau bagaimanapun, pengoptimuman imej juga merupakan bidang di mana paling mudah untuk akhirnya mengacaukan perkara; sebabnya bukan kerana teknologinya terlalu sukar, tetapi kerana maklumatnya terlalu terpecah-pecah:
Anda telah membaca beberapa artikel dan mempelajari tentang “mampatan”, “WebP/AVIF” dan “muat malas”, tetapi apabila anda melihat keterangan plugin, ia menyatakan “100 kredit percuma setiap bulan”, “20MB percuma” dan “1 kredit setiap imej”—dan semakin banyak anda membaca, semakin keliru anda. Adakah kuota percuma itu sebenarnya mencukupi? Bagaimana caj dikurangkan? Adakah anda salah faham tentang “perkara yang sama”? Dan yang paling penting:Adakah ia benar-benar berfungsi setelah anda selesai?

Artikel ini hanya melakukan tiga perkara:

1. Berikut adalah petua praktikal.Peta jalan(Apa yang perlu dilakukan dahulu, apa yang perlu dilakukan seterusnya)
2. Sila terangkan pilihan yang anda pertimbangkan secara terperinci (apa sebenarnya yang membezakan versi percuma dan berbayar, dan siapa yang paling sesuai untuk setiap satu)
3. Berikut adalah perangkap yang paling biasa, disenaraikan terlebih dahulu (supaya anda tidak perlu membuang masa mencarinya dan menyelesaikannya selepas anda selesai)

1. Asas: Apa yang disertakan dengan WordPress, dan apa yang tidak

Jika anda tidak terlebih dahulu memahami apa yang telah dilakukan oleh teras WordPress, dua situasi mungkin timbul:

• Daripada menggunakan “keupayaan percuma” yang tersedia untuk kita, kita telah membazirkan masa dan wang untuk mencipta semula roda.
• Saya sangka WordPress akan “secara automatik menukar semua imej lama kepada WebP/AVIF”, tetapi rupanya ia tidak.

Termasuk dalam teras WordPress sudah terdapat ciri-ciri utama ini:

• Imej responsif (srcset/sizes): Mulai WordPress 4.4 ke atas, teras akan memaparkan imej srcset 与 sizes... dan menggunakan imej pelbagai saiz yang dijana semasa pemunggahan untuk membolehkan pelayar memilih dan memuatkan sumber yang paling sesuai berdasarkan keadaan skrin.
• Pemuatan malas asliMulai WordPress 5.5, pemuatan malas asli diaktifkan secara lalai untuk imej, selaras dengan piawaian HTML. loading Pelaksanaan harta
• Mendukung muat naik WebPMulai WordPress 5.8, anda boleh memuat naik dan menggunakan fail WebP dengan cara yang sama seperti JPEG dan PNG (dengan syarat persekitaran hosting anda menyokong WebP).
• Mendukung muat naik AVIFMulai WordPress 6.5, fail AVIF boleh dimuat naik dan digunakan dengan cara yang sama seperti fail JPEG dan PNG (bergantung pada sokongan persekitaran hos).

Sila ambil perhatian, bagaimanapun:
“Sokongan untuk memuat naik/menggunakan” ≠ “penukaran automatik/penghantaran automatik”
Dengan kata lain: walaupun anda sudah menggunakan WP 6.5, fail JPG/PNG dalam pustaka media anda tidak akan secara automatik ditukar kepada WebP/AVIF; anda juga tidak akan secara automatik memperoleh fungsi penuh “menghasilkan AVIF/WebP berdasarkan keupayaan pelayar dan kembali kepada imej asal untuk pelayar yang tidak disokong”—ini biasanya memerlukan pemalam atau perkhidmatan untuk mengisi kekosongan.

2. Peta Jalan: Panduan 5 langkah untuk pengoptimuman imej

Apa yang perlu dilakukan, mengapa, apa yang dianggap lulus, dan apakah perangkap biasa.

2.1 Dapatkan “dimensi” dengan betul terlebih dahulu (perkara paling mudah diabaikan, tetapi yang memberikan manfaat paling besar)

Banyak laman web perlahan bukan kerana ia belum dioptimumkan, tetapi keranaMemuat turun imej yang jauh lebih besar daripada kawasan paparan：
Sebagai contoh, jika sesebuah halaman sebenarnya hanya lebar 900px tetapi anda menyuruh pelawat memuat turun imej asal beresolusi 3000px, pelayar akan memuat turunnya dan kemudian mengecilkannya untuk dipaparkan. Ini membazir jalur lebar, meningkatkan masa penyahkodan dan melambatkan masa muat pertama skrin.

Untuk WordPress 4.4 dan ke atasMekanisme imej responsif（srcset/sizes) telah direka khusus untuk menangani isu ini.

Apa yang dianggap sebagai lulus:

• Apabila halaman dilihat pada peranti mudah alih, imej yang dimuat turun seharusnya kelihatan lebih kecil berbanding pada desktop.
• Saiz fail imej yang sama berbeza-beza bergantung pada peranti (bukannya sentiasa memuat turun imej asal)

Kekeliruan yang paling biasa:

• Sesetengah tema atau pembina menganggap imej sebagai imej latar belakang CSS atau memaparkan imej tersebut dengan cara tersuai, yang mungkin memintas srcset, mengakibatkan imej besar terus dimuat
• Jika anda menggunakan perkhidmatan hosting imej luaran atau blok imej pihak ketiga, anda mungkin dapat memintas sistem pelbagai saiz yang dijana oleh perpustakaan media.

---

2.2 Pemampatan (mengurangkan saiz fail tanpa menjejaskan kualiti)

Intipati pemampatan bukan bahawa “yang lebih kecil itu lebih baik”, tetapi bahawa “perbezaannya hampir tidak dapat dilihat dengan mata kasar, namun saiz fail dikurangkan dengan ketara”.

Peraturannya adalah seperti berikut:

• Fotografi/Gambar sebenar (potret, produk, lanskap): Keutamakan pemampatan lossy (manfaat maksimum)
• Tangkapan skrin/imej yang mengandungi banyak teks: Terapkan pemampatan yang lebih konservatif untuk mengelakkan teks daripada kelihatan kabur
• Logo/Ikon: Keutamakan SVG atau gunakan pemampatan tanpa kehilangan data dengan berhati-hati (pemampatan berpenyusutan mudah menyebabkan tepi kabur)

Apa yang dianggap sebagai lulus:

• Saiz fail kebanyakan imej halaman telah dikurangkan dengan ketara.
• Tiada bunyi yang ketara, tepi kabur, jalur warna atau teks kabur

---

2.3 WebP / AVIF (Dasar format: saiz fail lebih kecil untuk tahap kejelasan yang sama)

WordPress kini menyokong muat naik fail. WebP (5.8) dan AVIF (6.5)。
Walau bagaimanapun, untuk menggunakan “format generasi seterusnya” secara praktikal, dua isu biasanya perlu diselesaikan:

1. Bagaimana untuk menukar secara pukal perpustakaan media bersejarah(Jika tidak, anda hanya akan mengoptimumkan “imej baru yang dimuat naik pada masa hadapan”)
2. Patutkah saya membuat salinan atau menggantikan imej asal?(Ini adalah titik kritikal; kita akan menumpukan perhatian kemudian pada ciri “gantikan dan padamkan imej asal” Plus WebP.)

Pendekatan yang disyorkan:

• WebP: Secara amnya pilihan lalai (menawarkan keserasian yang lebih boleh dipercayai)
• AVIF: Format pemampatan yang lebih maju, sesuai untuk imej bersaiz besar, imej bersaiz besar pada skrin pertama, dan imej galeri (tetapi lebihbergantung pada sokongan persekitaran）

---

2.4 Gunakan pemuatan malas dengan betul (jangan gunakan pendekatan satu-saiz-untuk-semua)

Mulai WordPress 5.5 ke atasPemuatan malas lalaiImej.
Ia mengurangkan penggunaan jalur lebar semasa pemaparan awal:

• Pemuatan malas sesuai untuk “sumber di luar skrin”
• Imej besar di bahagian atas halaman (yang sering kali merupakan imej paling penting pada skrin pertama) umumnya tidak sesuai untuk pemuatan tertunda.

---

2.5 Lapisan penghantaran: CDN / Imej CDN

Pemampatan, saiz fail dan format semuanya bertujuan untuk menjadikan fail lebih kecil dan lebih sesuai.
Walau bagaimanapun, jika imej sentiasa dimuat daripada pelayan asal pada jarak jauh, kelewatan rangkaian masih akan memberi kesan ketara terhadap pengalaman pengguna. Dalam kes sedemikian, penyelesaian “lapisan penghantaran” diperlukan (CDN/image CDN).

Dua pendekatan tipikal:

• Cloudflare Poland：Dokumentasi CloudflareBahagian ini memperkenalkan kaedah pemampatan yang tersedia dalam Polish (tanpa kehilangan, dengan kehilangan dan WebP), dan menyebut penggunaan format=auto Format WebP dan AVIF dibenarkan.
• Pecut Perisian Tapak Jetpack：Dokumentasi JetpackIni bermakna ia akan mengoptimumkan imej dan menyebarkannya melalui rangkaiannya bersama sumber statik.

Pengoptimuman imej memastikan bahawa imej dikurangkan saiznya dan diubah saiznya dengan sewajarnya,CDN: Penghantaran yang lebih dekat dan lebih boleh dipercayai

3. Pilihan laluan: Ikuti hanya dua laluan utama

Kesilapan paling biasa dalam pengoptimuman imej bukanlah “tidak memasang pemalam”, tetapi memasang terlalu banyak pemalam, yang menyebabkan pemprosesan berganda:
A sedang memampatkan, B juga sedang memampatkan; A menukar kepada WebP/AVIF, B melakukan perkara yang sama; A menukar URL, B melakukan penulisan semula URL—pada akhirnya, kamu pun tidak dapat membezakan apa sebenarnya yang sedang berlaku di laman web itu.

Peraturan:

Pegang pada satu pendekatan: sama ada storan tempatan yang sepenuhnya percuma, atau salah satu daripada tiga pilihan pemampatan awan.

• Rute A (panggilan tempatan sepenuhnya percuma):Selain itu, WebP atau AVIF + EWWW Image Optimizer(atau pilih hanya satu daripadanya)
• Pilihan B (Pilih salah satu daripada tiga kaedah pemampatan awan):ShortPixel / Imagify / TinyPNG

---

3.1 Pilihan A: Hosting tempatan sepenuhnya percuma (Plus WebP atau AVIF atau EWWW)

Ciri-ciri utama laluan ini adalah:

• Anda tidak bergantung pada perkhidmatan pemampatan pihak ketiga yang mengenakan bayaran berdasarkan kuota bulanan atau setiap fail (walaupun beberapa ciri mungkin tersedia sebagai perkhidmatan pilihan)
• Komprominya ialah pemprosesan secara pukal mungkin membebankan pelayan dengan lebih berat dari segi CPU/IO, yang memerlukan anda memberi perhatian lebih kepada “strategi dan risiko”.”

3.1.1 Ditambah WebP atau AVIFKonsep teras ialah “generasi/penggantian”; ia bukan “alat pemampatan” dalam erti kata tradisional.”

• Apabila menjana keseluruhan set imej:ID fail imej asal akan ditimpa oleh fail WebP/AVIF, fail asal akan dipadam, dan sebarang URL dalam kandungan juga akan digantikan.。
• Plugin ini menyediakan arahan WP-CLI dan menasihatkan bahawa WP-CLI lebih boleh dipercayai apabila berurusan dengan sejumlah besar fail.

Ini bermakna: ia tidak semata-mata “dengan senyap menjana fail WebP untuk anda”, tetapi ia mungkin merupakanPemindahan aset(terutamanya jika anda telah mengaktifkan pilihan “Gantikan dan padamkan asal”)

Perbezaan antara kedua-dua mod

Pilihan 1: Simpan imej asal + hasilkan salinan WebP/AVIF (lebih boleh dipercayai)

• Kelebihan: Lebih mudah untuk memulihkan kepada versi sebelumnya jika timbul masalah keserasian.
• Kelemahan: Penggunaan cakera akan meningkat (imej asal + format baru + pelbagai saiz miniatur)

Kaedah 2: Gantikan dan padamkan imej asal (lebih radikal)

• Kelebihan: Cakera tidak akan cepat penuh; pautan dalaman secara automatik ditukar ke format baru.
• Risiko: Jika anda mengubah suai kedua-dua aset dan rujukannya, penyelesaian masalah keserasian akan menjadi lebih mahal (terutamanya apabila sistem luaran atau logik tema bergantung pada nama fail, laluan atau format asal).

Kekangan biasa dengan WebP atau AVIF

1. Selepas melakukan penggantian perpustakaan sepenuhnya, imej pada beberapa halaman dipaparkan dengan tidak betul.
   Penyebabnya biasanya bukan kerana “imej rosak”, tetapi kerana sesuatu telah berlaku di suatu tempat dalam rantaian—seperti perubahan URL, penimbalan, atau dasar miniatur.
2. Semakin banyak lakon ringkas, semakin besar skop perubahan.
   Memuat naik imej ke WordPress menghasilkan pelbagai saiz; tema dan pemalam mungkin menambah lebih banyak lagi. Penggantian sepenuhnya bermakna anda mungkin akan mengubah suai satu set fail yang sangat besar.
3. Melakukan penukaran format sahaja tidak semestinya menghasilkan saiz fail terkecil.
   Fail WebP dan AVIF umumnya lebih kecil, tetapi “strategi dimensi” dan “strategi pemampatan” kekal penting. Jangan anggap Plus WebP sebagai “penyelesaian satu klik” untuk masa pemuatan yang lebih pantas.

---

3.1.2 EWWW Image Optimizer: Penyedia terkemuka pemampatan tempatan percuma

Halaman pemalam EWWW mempunyai tujuan yang sangat jelas:

• Ia boleh mengoptimumkan imej pada pelayan anda menggunakan pelbagai alat (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, dan lain-lain).
• Jika anda memerlukan pemampatan yang lebih tinggi atau ingin menjimatkan CPU, anda juga boleh memindahkan pemprosesan yang menggunakan CPU ke pelayan anda (pilihan).

Apakah peranan yang harus dimainkan oleh EWWW dalam Laluan A?

Jika anda menggunakan Plus WebP untuk strategi migrasi/penggantian format, maka EWWW lebih sesuai untuk mengendalikan:

• Pengoptimuman Mampatan dan Isipadu(terutamanya pengoptimuman aset mentah seperti fail JPG dan PNG)
• Pengoptimuman kelompok perpustakaan media bersejarah(Menuju kepada “pengurangan isi kandung” dan bukannya “penggantian URL”)

Perangkap tipikal EWWW

1. Beban pelayan meningkat semasa pengoptimuman pukal
   Ini kerana pemampatan tempatan menggunakan CPU/IO. Penyelesaiannya bukan untuk “berhenti menggunakannya”, tetapi sebaliknya “memproses secara pukal, semasa waktu bukan puncak, dan memilih pemunggahan atau penyelesaian awan apabila perlu”.
2. “WebP telah dijana” tidak semestinya bermakna bahawa bahagian hadapan sebenarnya sedang menyajikan WebP.
   Banyak pemalam beranggapan salah bahawa penjanaan adalah satu perkara, manakala strategi penghantaran (seperti penulisan semula, tag `picture` dan tamat masa cache) adalah perkara yang berbeza sama sekali.
3. Meniru fungsi pemalam lain
   Jika anda memilih Pilihan A, cuba elakkan menggunakan perkhidmatan pemampatan awan tambahan seperti ShortPixel, Imagify atau TinyPNG; jika anda memilih Pilihan B, jangan aktifkan logik penggantian dalam Plus WebP. Prinsip asasnya ialah:Teruskan dengan satu tindakan sahaja.

---

3.2 Pilihan B: Pilih salah satu daripada tiga perkhidmatan pemampatan awan (ShortPixel / Imagify / TinyPNG)

Pelan ini sesuai untuk mereka yang ingin menjimatkan sumber pelayan, lebih suka pendekatan tanpa kerumitan untuk pemprosesan secara pukal, dan selesa dengan pengebilan berdasarkan penggunaan atau bayar ikut guna.
Walau bagaimanapun, salah tanggapan paling biasa mengenai pemampatan awan ialah:Hadiah percuma bukanlah sekadar soal “lembaran percuma”.Jumlah saiz miniatur, sama ada format WebP/AVIF dijana, dan sama ada imej dimampatkan berulang kali akan memberi kesan ketara terhadap penggunaan sumber.

Di bawah, kami akan menerangkan: perbezaan antara pilihan percuma dan berbayar, bagaimana kredit ditolak, perangkap paling biasa yang perlu dielakkan, dan jenis laman web yang paling sesuai untuk perkhidmatan ini.

---

3.2.1 ShortPixel100 kredit percuma setiap bulan, tetapi kredit akan digunakan untuk miniatur dan pembesaran WebP/AVIF.

Apa ceritanya dengan pilihan percuma dan berbayar?

Keterangan plugin ShortPixel dengan jelas menyatakan:

• 100 kredit percuma setiap bulan
• Terdapat juga “kredit bulanan tambahan tanpa had” (butiran harga disediakan di halaman pemalam)
• Kami juga menawarkan “pakej kredit sekali sahaja yang tidak pernah tamat tempoh” (bersama maklumat mengenai harga permulaan)

Nota:

• Percuma: Sebanyak kredit tertentu disediakan setiap bulan untuk digunakan pada laman web ringan atau untuk ujian
• Pakej sekali sahaja: Sesuai untuk tapak dengan perpustakaan media besar yang ingin membersihkan inventori mereka sekaligus (dibeli sekali dan sah sehingga habis digunakan; biasanya tiada tarikh luput)
• Bulanan/Tanpa had: Sesuai untuk laman web yang memerlukan kemas kini imej secara berkala dan pengoptimuman jangka panjang yang stabil.

Pangkalan pengetahuan rasmi ShortPixel juga menyediakan panduan mengenai “pakej sekali bayar berbanding langganan bulanan tanpa had”.Penjelasan yang jelasPelan Bulanan Tanpa Had ditagih setiap bulan (atau setiap tahun), menawarkan kredit tanpa had dan kuota CDN yang tetap; kredit sekali bayar tidak tamat tempoh, memberi anda kawalan yang lebih besar ke atas penggunaan bila diperlukan.

Yang paling penting: Bagaimana kredit ShortPixel dikira?

Dokumentasi Rasmi ShortPixel KB menyatakannya dengan sangat terus terang:

• Apabila anda memuat naik imej ke WordPress, ia akan menjana beberapa miniatur;
• Mengoptimumkan setiap miniatur dikira sebagai satu kredit.；
• Jika anda memilih untuk menjana WebP atau AVIF,Setiap versi WebP/AVIF bagi imej asal dan lakbunya akan dikira sebagai kredit tambahan.；
• Anda boleh mengecualikan beberapa miniatur daripada pengoptimuman untuk mengurangkan penggunaan kredit.

kredit contoh：

Andaikan anda memuat naik satu imej, dan tema atau pemalam menjana lapan miniatur:

• Optimumkan hanya imej asal dan miniatur: 1 (imej asal) + 8 (miniatur) = 9 kredit
• Jika anda juga ingin menjana WebP/AVIF: tambahkan versi generasi akan datang kepada setiap satu daripada 9 di atas → ditambah 9 kredit
  Dengan kata lain, anda mungkin menyangka ia “satu imej”, tetapi sebenarnya ia boleh menelan kos hampir “sepuluh kredit”.

Oleh itu:“100 kredit percuma” tidak bermakna “100 imej percuma”.

Kekangan paling biasa dengan ShortPixel

1. 100 kredit percuma akan habis tidak lama lagi
   Sebab: Bilangan besar miniatur + masa pemprosesan tambahan diperlukan untuk menjana fail WebP/AVIF.
   Cadangan：

• Pertama, nilai bilangan lakaran kecil tapak.
• Hapuskan saiz gambar kecil yang tidak perlu (optimumkan hanya saiz yang sebenarnya akan digunakan)
• Tentukan strategi pemampatan terlebih dahulu, kemudian jalankan proses ini secara berklompok untuk mengelakkan pembaziran masa pada cuba dan silap.

2. Gunakan bersama pemalam penukaran format lain
   Jika anda mengaktifkan penggantian Plus WebP dan juga membiarkan ShortPixel menjana serta menyisipkan tag generasi akan datang, logiknya akan bertindih, menjadikan penyelesaian masalah lebih sukar. Dengan Pilihan B, ShortPixel mengendalikan tugas ini sendiri.
3. Saya menganggap bahawa sebaik sahaja ia dipasang, frontend akan secara automatik menjana fail WebP/AVIF.“
   Halaman pemalam ShortPixelPerlu diambil perhatian bahawa ia boleh menukar fail WebP dan AVIF serta menyepadukan imej generasi akan datang ke dalam halaman hadapan (contohnya, melalui tag).
   Walau bagaimanapun, anda masih perlu memeriksa keputusan setelah anda selesai.

---

3.2.2 Imagify: Percuma 20MB/bulan; kuota akan ditolak berdasarkan “saiz imej asal + bilangan miniatur”; pemampatan semula akan mengakibatkan potongan berganda

Bebas elaun dan lokasi

Halaman Harga Rasmi ImagifyIa dinyatakan dengan cukup jelas:Akaun percuma mempunyai kuota bulanan sebanyak 20MB。
Halaman pemalamnya juga menyatakan bahawa ia boleh memampatkan, menukar saiz dan menukar kepada WebP/AVIF.

Bagaimana kuota ditolak?

Dokumentasi Rasmi Imagify “Bagaimana Penggunaan Kuota Dikira?” menerangkan mekanisme pengebilan dengan sangat jelas:

• Jumlah miniatur mempengaruhi penggunaan sumberSebagai contoh, jika anda mempunyai 10 saiz gambar kecil, mengoptimumkan satu imej secara berkesan bermakna mengoptimumkan 11 imej (imej asal ditambah 10 gambar kecil), kesemuanya dikira ke dalam kuota anda.
• Kurangkan kuota berdasarkan saiz fail asalSebagai contoh, jika anda memuat naik imej 100KB ke Imagify, 100KB akan ditolak daripada kuota anda.
• Menukar tahap pemampatan dan mengoptimumkan semula akan menggunakan kuota sekali lagi.。
• Satu kunci API boleh digunakan di pelbagai laman, tetapi kuotanya dikongsi di antara mereka.

Ini adalah “pendekatan teras” Imagify:
Ia lebih seperti pakej data: semakin banyak anda memuat naik, semakin banyak data yang digunakan; semakin banyak anda membuat miniatur, semakin banyak data yang digunakan; dan jika anda memampatkan semula fail berulang kali, ia akan menggunakan data berulang kali.

Contoh kuota Imagify yang mudah difahami

Andaikan anda memuat naik imej asal bersaiz 800 KB, dan laman web itu menjana 8 lakaran kecil.

• Apabila mengoptimumkan dengan Imagify, kedua-dua “imej asal dan 8 miniatur” disertakan (jika anda memilih “Optimumkan semuanya”), yang bermaksud operasi ini akan menggunakan kuota yang hampir bersamaan dengan 'saiz keseluruhan semua fail ini'.
  Inilah sebabnya mengapa sesetengah laman web mendapati kuota “20MB” mereka cepat habis: bukan kerana Imagify tidak cukup berkuasa, tetapi kerana imej yang anda muat naik terlalu besar, anda menghasilkan terlalu banyak miniatur, dan anda mungkin juga sedang bereksperimen dengan pelbagai tahap pemampatan berulang kali.

Kekangan paling biasa dengan Imagify

1. 20MB percuma tidak mencukupi untuk melakukan “pembersihan sejarah tapak sepenuhnya”.”
   20MB secara amnya lebih sesuai untuk ujian dan kemas kini kecil; jika perpustakaan media anda sudah besar, mengosongkannya sekaligus mungkin memerlukan peningkatan.
2. Mengatur semula tahap pemampatan berulang kali menyebabkan kuota habis berulang kali.
   Imagify: Penjelasan yang jelasPengoptimuman semula akan menggunakan kuota sekali lagi.
   Kami mengesyorkan agar anda menyatakan “strategi” dengan jelas di halaman ini:

• Mulakan dengan menggunakan beberapa imej untuk menentukan tahap pemampatan dan kualiti visual.
• Setelah strategi dimuktamadkan, jalankan ia secara bersiri.
  Elakkan cuba-cuba dan ralat merentasi seluruh pangkalan data.

3. Membagi satu kunci API merentasi pelbagai laman menyebabkan kuota “mengurang dengan misteri”.”
   Jika anda menggunakan kunci API yang sama di pelbagai laman, kuota akan dikongsi.
   Oleh itu, dalam senario berpasukan atau berbilang tapak, adalah lebih baik untuk menjelaskan tapak mana yang berkongsi sumber dan tapak mana yang beroperasi secara bebas, bagi mengelakkan lebihan belanjawan.

---

3.2.3 TinyPNG(Tiny Compress Images): 500 kredit percuma setiap bulan; menukar kepada WebP/AVIF dikenakan caj tambahan 1 kredit bagi setiap saiz“

Bantuan kewangan percuma dan cara pengiraannya

Halaman pemalam TinyPNG untuk WordPress ditulis dengan sangat jelas:

• 500 kredit percuma setiap bulan
• Dalam “pemasangan WordPress standard”, anda mungkin boleh memampatkan Kira-kira 100 imej setiap bulan
• Walau bagaimanapun, jika penukaran AVIF atau WebP diaktifkan:Setiap saiz imej akan menelan kos satu kredit tambahan., jadi saya rasa satu-satunya pilihan ialah memampatkan dan menukarnya Kira-kira 50 imej setiap bulan(Bergantung pada berapa banyak saiz miniatur yang anda ada.)

Sementara itu, Tinify (pembangun TinyPNG dan TinyJPG) juga telah Halaman Harga APISila ambil perhatian: Daftar untuk menerima 500 pemampatan percuma setiap bulan; setelah had ini melebihi, anda akan dikenakan bayaran berdasarkan bilangan pemampatan yang berjaya, tanpa langganan wajib.

Untuk meringkaskan bagaimana TinyPNG berfungsi dalam satu ayat:
Ia dikira dalam kredit; semakin banyak saiz miniatur yang anda gunakan dan semakin banyak anda mengaktifkan WebP/AVIF, semakin cepat kredit anda akan habis.

Contoh mudah untuk difahami mengenai kredit TinyPNG

Anggapkan laman anda menghasilkan lapan saiz miniatur untuk setiap imej:

• Pemampatan sahaja: Imej asal + 8 miniatur → 9 kredit diperlukan
• Jika penukaran WebP/AVIF diaktifkan: kredit tambahan akan ditolak untuk setiap saiz → ini mungkin hampir menggandakan jumlah
  Ini selari dengan keterangan di halaman pemalam: sebaik sahaja penukaran diaktifkan, kuota percuma berubah daripada kira-kira “100 sebulan” kepada “50 sebulan”.

Kekangan paling biasa dengan TinyPNG

1. Saya fikir 500 kredit bermaksud 500 imej.
   Tidak. Ia dikenakan bayaran bagi setiap “saiz/varian imej”. Halaman pemalam dengan jelas menyatakan bahawa “penukaran akan menelan kos tambahan 1 kredit bagi setiap saiz imej”.
2. Plugin tema/e-dagang menjana terlalu banyak saiz imej, dan kuota percuma telah berkurangan dengan ketara.
   Semakin banyak dimensi, semakin mudah kredit habis.
3. Selepas mengaktifkan penukaran, saya mendapati had kredit saya tiba-tiba habis.
   Ini bukan pepijat; inilah cara sistem pengebilan berfungsi.
   Cadangan strategi:

• Jika fasa percuma terutamanya bertujuan untuk pemampatan dan pengurangan saiz, anda boleh bermula dengan hanya menerapkan pemampatan. Setelah anda mengesahkan bahawa struktur tapak adalah stabil dan anda benar-benar memerlukan generasi seterusnya, anda boleh memulakan penukaran.

4. Cadangan mengikut senario: Cara memilih untuk jenis laman web yang berbeza

Walaupun semuanya menggunakan WordPress, “isu berkaitan imej” berbeza antara laman kandungan, laman e-dagang, portfolio dan laman keahlian.

4.1 Laman/blog kandungan (menyajikan pelbagai imej dan artikel, dengan kekerapan kemas kini sederhana)

Cadangan keutamaan:

1. Strategi Penentuan Saiz (Langkah 1)
2. Pemampatan (Langkah 2)
3. WebP (Langkah 3)

Rute yang lebih sesuai:

• Jika anda mahukan pilihan tanpa kerumitan: pilih salah satu daripada tiga dalam Pilihan B (ShortPixel / Imagify / TinyPNG)
• Jika anda mahukan pilihan percuma: Laluan A (Plus WebP + EWWW), tetapi kami mengesyorkan memulakan dengan “Mod Konservatif (jangan padamkan imej asal)” untuk menilai risiko terlebih dahulu.

Perangkap biasa:

• Imej tajuk di halaman artikel sangat besar, dan strategi pemuatan malas dilaksanakan dengan buruk.Ia akan melambatkan skrin pertama.

4.2 Laman web e-dagang/produk (menampilkan banyak miniatur dan variasi imej; kestabilan adalah keutamaan)

Masalah paling biasa dalam e-dagang bukan “kualiti pemampatan yang teruk”, tetapi “sesetengah dimensi tidak betul selepas pengoptimuman, imej kecil hilang, atau komponen front-end tidak dapat memuat imej”.

Cadangan keutamaan:

1. Mulakan dengan berhati-hati: terapkan strategi pemampatan yang konservatif; jangan gantikan keseluruhan pangkalan data terus-menerus.
2. Menilai saiz gambar kecil: Tema e-dagang biasanya menghasilkan lebih banyak saiz, yang boleh meningkatkan penggunaan data dengan ketara (ini amat ketara dengan ShortPixel dan TinyPNG).
3. Lakukan ujian skala kecil terlebih dahulu, kemudian lancarkan kepada khalayak yang lebih luas (ini amat penting)

Rute yang lebih sesuai:

• Pilihan B biasanya pilihan tanpa kerumitan: ShortPixel, Imagify dan TinyPNG semuanya menyokong pemprosesan secara pukal; kuncinya ialah memahami sistem kuota dan menilai kos terlebih dahulu.
• Pilihan A juga boleh diterima, tetapi anda perlu berhati-hati lebih terhadap tingkah laku Plus WebP yang “menimpa ID, memadam imej asal dan menggantikan URL”: kerana ini merupakan pemindahan aset, tidak digalakkan untuk melakukan penggantian sepenuhnya dengan segera.

4.3 Portfolio/Laman web fotografi (di mana kualiti imej adalah kritikal, fail bersaiz besar, dan daya tarikan visual adalah yang terpenting)

Cadangan keutamaan:

1. Strategi Pemilihan Saiz (Kawalan Kawasan Paparan)
2. Strategi pemampatan (lebih baik mempunyai fail yang sedikit lebih besar daripada kehilangan butiran)
3. WebP/AVIF (manfaatnya jelas untuk imej bersaiz besar, tetapi kualiti visual perlu disahkan)

Rute yang lebih sesuai:

• Imagify: Oleh kerana kuota dipotong berdasarkan “saiz imej asal”, jenis tapak ini memudahkan anda mengawal kos (anda lebih kurang tahu berapa kos setiap imej bersaiz besar), tetapi anda harus mengelakkan memampatkan semula imej tersebut berulang kali.
• ShortPixelJika tidak terlalu banyak saiz gambar kecil, penggunaan kredit agak mudah; namun, jika anda menjana banyak saiz serta versi generasi seterusnya, penggunaan kredit akan meningkat dengan ketara, jadi anda perlu merancang lebih awal.

5. Kuota vs. Pengebilan: Tinjauan menyeluruh sama ada had percuma mencukupi

Yang mana satu menawarkan nilai wang yang lebih baik, dan berapa lama percubaan percuma akan berlangsung?

5.1 Tiga model pengebilan

• ShortPixel(kredit)Kredit dikira berdasarkan “imej asal ditambah bilangan miniatur”; penjanaan fail WebP/AVIF akan dikenakan caj kredit tambahan untuk setiap versi yang sepadan.
• Imagify(kuota MB)Kuota akan ditolak berdasarkan saiz fail asal; semakin banyak miniatur, semakin banyak kuota digunakan; pemampatan semula akan mengakibatkan pengurangan kuota yang lebih lanjut.
• TinyPNG(kredit): 500 kredit setiap bulan; pengaktifan penukaran WebP/AVIF akan dikenakan caj tambahan bagi setiap saiz imej.

5.2 Kaedah anggaran pantas

Anda boleh menganggarnya seperti berikut:

1. Pilih mana-mana “imej asal yang sering anda muat naik” dan semak saiz anggaran (contohnya 300KB / 1MB / 3MB)
2. Ia bergantung pada berapa banyak saiz miniatur yang biasanya dihasilkan oleh laman anda (contohnya 5, 10 atau 20)
3. Tentukan sama ada anda mahu menjana WebP/AVIF (Ya/Tidak)

Kemudian gunakan “aritmetik mental” di bawah untuk memahami penggunaan:

• ShortPixelSetiap imej ≈ (1 + bilangan miniatur) kredit; jika WebP/AVIF dijana, ≈ dua kali ganda jumlah itu (kerana versi generasi akan datang juga memerlukan kredit)
• ImagifyKuota untuk setiap imej adalah kira-kira (saiz imej asal + jumlah saiz semua miniatur); menukar tahap pemampatan dan memampatkan semula imej akan mengakibatkan pengurangan kuota yang lebih lanjut.
• TinyPNG: 500 kredit percuma; jika laman anda menjana banyak saiz imej bagi setiap imej dan penukaran imej diaktifkan, bilangan imej percuma akan berkurangan dengan ketara (halaman pemalam memberikan anggaran kasar “sekitar 100 sebulan” dan “sekitar 50 sebulan”)

6. Pendedahan Risiko

Risiko 1: Elakkan mempunyai pelbagai pemalam yang melakukan tugas yang sama

Ini adalah “sumber bencana” yang paling biasa.”

• Rute A:Selain itu, WebP atau AVIF + EWWW(Bahagikan tugas antara kedua-duanya; jangan jalankan penukaran dan penghantaran pada masa yang sama, atau pasang hanya salah satunya)
• Pilihan B: ShortPixel / Imagify / TinyPNG Pilih satu daripada tiga(Pilih satu untuk mengendalikan pemampatan dan generasi seterusnya)

Risiko 2: Selain itu, fungsi “Tulis Ke Atas ID / Padam Imej Asal / Gantikan URL” WebP merupakan pemindahan aset.

Untuk menegaskan semula:Plus WebP Keterangan itu dengan jelas menyatakan bahawa semasa satu generasi penuh, ID imej asal akan ditimpa, fail asal akan dipadamkan, dan URL kandungan akan digantikan.
Ini bermakna ia bukan “penyesuaian kecil yang boleh dipulihkan pada bila-bila masa”, tetapi perubahan pada peringkat aset.

Strategi yang disyorkan adalah:

• Mulakan dengan ujian skala kecil (beberapa puluh hingga beberapa ratus)
• Pastikan paparan bahagian hadapan, miniatur dan kemas kini cache semuanya berfungsi dengan betul.
• Pertimbangkan untuk memproses keseluruhan pangkalan data.

Risiko 3: Penggunaan sebenar “kuota percuma” untuk pemampatan awan bergantung pada bilangan miniatur dan pilihan pilihan generasi seterusnya

• ShortPixelThumbnails dan ciri generasi seterusnya akan memberi kesan ketara kepada kredit.
• TinyPNG: Mengaktifkan WebP/AVIF akan mengakibatkan pengurangan kredit tambahan bagi setiap saiz imej
• Imagify: Caj berdasarkan saiz imej asal; semakin banyak miniatur, semakin tinggi caj; muat turun berulang akan dikenakan caj tambahan

Risiko 4: “WebP/AVIF telah dijana” tidak bermakna “bahagian hadapan sedang menyajikan WebP/AVIF”

Banyak orang merasakan bahawa laman web mereka tidak menjadi lebih pantas selepas penukaran; punca utamanya ialah bahagian hadapan masih menyajikan fail JPG/PNG (disebabkan ketidakpadanan dalam mana-mana yang berikut: pengeksesan, penulisan semula, tag, atau rundingan pelayar).

7. Bagaimana saya boleh memeriksa sama ada ia telah berkesan setelah saya selesai?

4 checkpoint yang sangat mudah:

1. Apabila menyegarkan halaman yang sama buat kali kedua, adakah proses pemuatan lebih stabil dan lebih pantas?(Sejauh manakah kesan pengeksanan dan pengoptimuman dapat dilihat?)
2. Adakah terdapat perbezaan ketara dalam saiz imej yang dimuatkan pada peranti mudah alih dan komputer desktop?(Responsif srcset/sizes (sama ada ia berfungsi)
3. Semak secara rawak beberapa imej: adakah terdapat sebarang fail/sumber WebP atau AVIF?(Adakah laman ini sebenarnya menggunakan generasi seterusnya）
4. Lihat beberapa imej: zum masuk untuk melihat sama ada ia kabur dengan ketara atau jika teks kelihatan kabur.(Adakah mampatan terlalu kuat?)

Jika keempat-empat ini terpakai, ia bermakna laluan yang anda pilih sudah beroperasi. Seterusnya, beralih ke CDN “Lapisan Penghantaran”...ia akan menjadi lebih stabil secara keseluruhan.

8. Cadangan untuk tindakan

1. Pertama, pilih laluan:

• Saya ingin menjadikannya sepercuma mungkin.: Plus WebP atau AVIF + EWWW (atau pasang hanya salah satu daripadanya)
• Mahu menjimatkan sumber pelayan? Membayar mengikut penggunaan lebih mudah dan bebas kerumitan.: Pilih salah satu daripada ShortPixel, Imagify atau TinyPNG

2. Mulakan dengan ujian skala kecil (beberapa lusin)
3. Semak bahawa semuanya teratur sebelum memproses secara pukal.
4. Kebolehpercayaan penghantaran perlu dipertingkatkan lagi:Membaca CDN Pecutan

Soalan Lazim

1. Berapa banyak pemalam yang perlu saya pasang? Bolehkah saya memasang semuanya?

Cuba untuk berpegang pada satu laluan sahaja.

• Pilihan A: Plus WebP atau AVIF + EWWW Image Optimizer (atau pasang hanya salah satu daripadanya)
• Pilihan B: Pilih salah satu daripada ShortPixel, Imagify atau TinyPNG
  Menggunakan beberapa pemalam pada laman yang sama untuk melakukan “pemampatan, penukaran ke WebP atau AVIF, pengubahsuaian URL dan penulisan semula penghantaran” serentak adalah cara paling pasti untuk menimbulkan kekacauan dan paling sukar untuk diselesaikan.

2. Bukankah WordPress sudah menyokong WebP/AVIF? Adakah saya masih memerlukan pemalam?

Adalah penting untuk membezakan antara:
“Sokongan untuk memuat naik/menggunakan” ≠ “penukaran automatik/penghantaran automatik”
WordPress 6.5 tidak akan secara automatik menukar fail JPG/PNG sedia ada kepada WebP/AVIF secara pukal, malah ia juga tidak akan secara automatik mengendalikan keseluruhan proses “menyediakan AVIF/WebP berdasarkan keupayaan pelayar dan kembali kepada format lalai”. Untuk memastikan perpustakaan media sedia ada anda turut dikemas kini, anda biasanya perlu menggunakan pemalam atau perkhidmatan untuk mengisi kekosongan.

3. Apabila berkaitan dengan pengoptimuman imej, langkah manakah yang sebenarnya menawarkan pulangan pelaburan tertinggi?

Biasanya Dapatkan dimensi yang betul terlebih dahulu (srcset/sizes)。
Banyak laman web perlahan bukan kerana ia belum dipadatkan, tetapi kerana ia memaparkan halaman yang hanya lebar 900px sambil memaksa pengguna memuat turun imej asal 3000px. Pemampatan boleh menjimatkan beberapa kilobait, tetapi “dimensi yang salah” akan menyebabkan anda memuat turun beberapa kali ganda data tanpa sebab yang munasabah.

4. Bagaimana saya boleh memastikan bahawa “versi lebih kecil” sedang dimuat, dan bukannya imej asal setiap kali?

Pertimbangkan dua fenomena:

• Apabila dilihat pada peranti mudah alih, imej yang dimuat turun kelihatan lebih kecil berbanding pada desktop.
• Saiz fail imej yang sama berbeza-beza bergantung pada peranti yang memuatkannya.
  Jika imej sentiasa dimuat turun pada saiz asal, ini sering kali kerana tema atau pembina halaman menganggap imej tersebut sebagai imej latar belakang CSS atau keluaran tersuai, sekali gus memintas sokongan perpustakaan media untuk pelbagai dimensi dan atribut `srcset`.

5. Adakah “WebP/AVIF dijana” semestinya bermakna bahawa bahagian hadapan menghasilkan WebP/AVIF?

tidak sama dengan
Penghasilan hanya lengkap pada “tingkat fail”; sama ada WebP/AVIF benar-benar dihantar ke hujung hadapan bergantung pada faktor seperti penulisan semula, dasar tag `picture`, kenalan cache, dan sama ada rundingan pelayar berkesan. Setelah selesai, pastikan untuk memeriksa secara rawak jenis sumber beberapa imej.

6. Apakah risiko sebenar yang berkaitan dengan WebP atau AVIF? Bolehkah saya menjalankan imbasan satu klik merentasi seluruh pangkalan data?

Risiko terletak bukan pada “pemampatan”, tetapi padaPerubahan kepada tahap pemindahan aset：

• Apabila menjana set penuh, ID fail imej asal mungkin ditimpa, fail asal mungkin dipadam, dan URL dalam kandungan mungkin digantikan.
  JadiKami tidak mengesyorkan menggantikan keseluruhan pangkalan data dengan segera.Mulakan dengan ujian skala kecil (beberapa puluh hingga beberapa ratus rekod) dan pastikan anda mempunyai sandaran yang berfungsi sebelum meneruskan dengan keseluruhan pangkalan data.

7. Bagaimana anda memilih antara dua mod dalam Plus WebP: mengekalkan imej asal atau menggantikan dan memadam imej asal?

Dalam istilah mudah:

• Pilihan 1: Simpan imej asal + hasilkan salinan WebP/AVIF (lebih boleh dipercayai)Mudah untuk dipulihkan, tetapi ia mengambil lebih banyak ruang cakera (imej asal + format baru + pelbagai saiz miniatur).
• Kaedah 2: Gantikan dan padamkan imej asal (lebih radikal)Cakera tidak cenderung mengembang, tetapi jika anda mengubah aset dan rujukan, penyelesaian masalah keserasian menjadi lebih mahal.
  Semakin kompleks laman web (e-dagang, pelbagai pemalam, pelbagai saiz), semakin kami mengesyorkan memulakan dengan pendekatan yang lebih stabil.

8. Adakah pemampatan tempatan percuma yang ditawarkan oleh EWWW Image Optimizer mencukupi? Adakah ia akan membebankan pelayan?

EWWW lebih seperti “alat pemampatan tempatan”: ia menggunakan CPU/IO.
Adalah biasa bagi beban meningkat semasa pengoptimuman secara pukal; ini tidak bermakna sistem “gagal”, sebaliknya pendekatan perlu tepat: jalankan kerja secara pukal, pada waktu bukan puncak, dan pilih pemunggahan atau penyelesaian awan apabila perlu.
Jika anda mencari penyelesaian tanpa kerumitan, atau jika sumber pelayan anda terhad, Pilihan B lebih mesra pelayan.

9. ShortPixel menawarkan 100 kredit percuma setiap bulan, jadi mengapa saya rasa ia sudah habis hanya selepas beberapa imej?

kerana “Credits” tidak merujuk kepada 'bilangan imej', akan diperbesarkan dengan lakon pendek dan generasi seterusnya:

• Imej asal + kredit untuk setiap miniatur
• Jika fail WebP/AVIF dijana, setiap versi yang sepadan akan dikenakan kos kredit tambahan.
  Jadi apa yang anda fikir “satu imej” sebenarnya boleh menggunakan hampir “kredit dua digit”. ShortPixel

10. Mengapa kuota percuma 201 TP234T per bulan daripada Imagify cepat habis?

Imagify lebih seperti “bungkusan data”:

• Seperti yang anda nyatakanSaiz fail asaltolak daripada kuota
• Semakin banyak lakon jari, semakin tinggi penggunaan sumber.
• Menukar tahap pemampatan dan mengoptimumkan semula akan menggunakan kuota sekali lagi.
• Satu kunci API boleh digunakan di pelbagai laman, dengan kuota dikongsi.
  Jadi mesej “20MB akan habis tidak lama lagi” sering disebabkan oleh imej yang terlalu besar, terlalu banyak miniatur, atau percubaan dan ralat berulang.

11. TinyPNG menawarkan 500 kredit percuma setiap bulan, jadi mengapa pemalam itu mengatakan hanya ada kira-kira 100 imej setiap bulan, dan mengapa jumlah ini berkurang kepada 50 imej setiap bulan selepas mengaktifkan WebP/AVIF?

Ini kerana kredit TinyPNG juga diperbesarkan di bawah “Dimensi/Varian”:

• Pemasangan WordPress standard biasanya memampatkan sekitar 100 imej setiap bulan.
• Aktifkan penukaran AVIF atau WebP:Setiap saiz imej akan menelan kos satu kredit tambahan., jadi saya mungkin hanya dapat memampatkan dan menukar sekitar 50 imej setiap bulan (bergantung pada bilangan saiz miniatur).
  Jadi 500 kredit ≠ 500 imej.

12. Berapa banyak lakon jari yang terdapat di laman kami? Mengapa ia mempunyai kesan yang begitu ketara?

Memuat naik imej ke WordPress menghasilkan pelbagai saiz; tema dan pemalam (terutamanya yang untuk e-dagang) mungkin menghasilkan lebih banyak lagi.
Dengan pemampatan awan, kredit atau kuota biasanya dikira berdasarkan “imej asal ditambah miniatur gabungan”, jadi semakin banyak miniatur yang anda ada, semakin cepat anda akan menggunakan had percuma anda.

13. Adakah pemuatan malas sentiasa mempercepatkan sesuatu? Mengapa sesetengah orang mengatakan bahawa pemuatan malas sebenarnya melambatkan sesuatu?

Pemuatan malas sesuai untuk sumber yang tidak kelihatan pada skrin.
Jika imej besar yang paling penting pada skrin pertama turut tertangguh, ia boleh melambatkan pengalaman pemuatan awal. Walaupun pemuatan malas lalai dalam WordPress 5.5 dan versi kemudian adalah baik, anda tidak seharusnya menerapkan pendekatan “satu saiz untuk semua”.

14. Bilakah saya memerlukan CDN / Imej CDN jika saya mengambil Laluan A atau B?

Pemampatan, saiz fail dan format menangani isu menjadikan fail lebih kecil dan lebih sesuai;
CDN memastikan penghantaran yang lebih pantas dan lebih boleh dipercayai.。
Apabila terdapat latensi yang ketara kerana imej dimuat daripada pelayan asal yang jauh, menambah CDN pada setiap imej (contohnya Cloudflare Polish / Jetpack Site Accelerator) umumnya menghasilkan pengalaman yang lebih stabil, menjadikan kandungan lebih mudah dibaca. Pecutan WordPress CDN。

15. Setelah saya selesai, apakah cara paling mudah untuk memeriksa bahawa ia benar-benar berfungsi?

Cara terpantas untuk mengesahkan:

• Apabila menyegarkan halaman yang sama buat kali kedua, adakah proses pemuatan lebih stabil dan lebih pantas?
• Adakah terdapat perbezaan ketara dalam saiz imej antara versi mudah alih dan desktop (adakah srcset/sizes berfungsi seperti yang dimaksudkan)?
• Semak secara rawak beberapa imej: adakah terdapat sebarang fail/sumber WebP atau AVIF?
• Lihat beberapa imej: zum masuk untuk melihat sama ada ia kabur dengan ketara atau jika teks kelihatan kabur.