Mampatan Imej Secara Kelompok untuk Pembangun Web | Bulk Image Compressor

Published December 18, 2025

Imej adalah aset paling berat di kebanyakan laman web. Pada halaman biasa, ia menyumbang 40 hingga 60% daripada jumlah berat. Jika anda seorang pembangun web dan tidak memampatkan imej, anda menghantar halaman yang bengkak tidak kira betapa bersihnya kod anda.

Persoalannya bukan sama ada untuk memampatkan. Tetapi di mana dalam aliran kerja anda mampatan harus berlaku dan alat mana yang sesuai untuk setiap situasi.

Di mana mampatan imej sesuai dalam aliran kerja pembangun

Terdapat tiga titik utama di mana anda boleh memampatkan imej semasa pembangunan:

Sebelum komit. Anda mengoptimumkan imej secara tempatan sebelum ia masuk ke dalam kawalan versi. Ini memastikan repositori anda ringan dan bermakna setiap persekitaran (pementasan, pengeluaran, mesin pembangun lain) mendapat versi yang dioptimumkan secara automatik.

Semasa binaan. Alat binaan seperti Vite atau webpack mengendalikan mampatan sebagai sebahagian daripada saluran paip aset. Imej sumber kekal pada kualiti penuh dalam repositori, dan proses binaan menjana versi yang dioptimumkan untuk penggunaan.

Di lapisan CDN. Perkhidmatan seperti Cloudflare, Imgix, atau Cloudinary mengubah dan memampatkan imej dengan cepat berdasarkan peranti dan pelayar yang meminta.

Setiap pendekatan mempunyai pertukaran, dan anda boleh menggabungkannya.

Alat dalam talian vs plugin binaan

Untuk tugas sekali sahaja yang cepat, seperti memampatkan sekumpulan tangkapan skrin untuk pos blog atau mengoptimumkan set ikon, alat dalam talian adalah pilihan terpantas. Buka Pemampat Imej Pukal, masukkan fail anda, laraskan kualiti, dan muat turun. Selesai dalam masa kurang seminit.

Plugin binaan mengendalikan pengoptimuman berterusan secara automatik. Inilah rupanya dalam amalan.

Vite

Pengguna Vite boleh menggunakan vite-plugin-imagemin atau plugin serupa:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

Ini memampatkan imej semasa vite build. Fail sumber kekal tidak tersentuh. Direktori output mendapat versi yang dioptimumkan.

webpack

Dengan webpack, image-minimizer-webpack-plugin melakukan kerja yang sama:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

Bila menggunakan yang mana

Gunakan alat dalam talian apabila:

Anda menambah beberapa imej ke projek dan mahu ia dioptimumkan sekarang
Anda bekerja dengan kandungan dari klien atau pereka yang menghantar fail tidak dioptimumkan
Projek anda tidak mempunyai langkah binaan (HTML statik, laman ringkas)
Anda ingin menyemak hasil mampatan secara visual sebelum melakukan komit

Gunakan plugin binaan apabila:

Projek anda sudah mempunyai saluran paip binaan
Berbilang pembangun menyumbang imej dan anda mahu pengoptimuman yang konsisten
Anda memerlukan penukaran format (contohnya, menjana versi WebP secara automatik)
Anda mahu imej sumber pada kualiti penuh dalam repositori untuk pemprosesan semula masa hadapan yang berpotensi

Pengoptimuman imej CI/CD

Plugin binaan berjalan semasa binaan tempatan, tetapi anda juga boleh menambah pengoptimuman imej ke saluran paip CI/CD anda. Ini menangkap imej tidak dioptimumkan yang terlepas, tanpa mengira siapa yang melakukan komit.

Pendekatan mudah adalah menjalankan skrip dalam saluran paip CI anda yang memeriksa saiz fail imej:

# Gagalkan binaan jika mana-mana imej lebih besar daripada 500KB
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "Imej bersaiz besar dijumpai. Mampatkan sebelum menggunakan."
  exit 1
fi

Untuk mampatan automatik dalam CI, alat seperti sharp-cli atau imagemin-cli boleh memproses imej sebagai langkah binaan. Ini menjamin bahawa tiada apa yang pergi ke pengeluaran tanpa dimampatkan.

Pemuatan malas dan imej responsif

Mampatan sahaja tidak mencukupi. Cara anda memuatkan imej sama pentingnya.

Pemuatan malas menangguhkan imej di luar skrin sehingga pengguna menatal kepadanya. Tambah loading="lazy" pada setiap imej di bawah lipatan. Jangan muatkan malas imej hero anda atau mana-mana kandungan yang kelihatan pada muatan halaman awal, kerana itu akan menjejaskan skor Largest Contentful Paint anda.

Imej responsif menyajikan saiz berbeza berdasarkan lebar skrin. Telefon tidak memerlukan imej 2400px yang dimaksudkan untuk monitor desktop. Gunakan atribut srcset dan sizes untuk membolehkan pelayar memilih versi yang betul:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="Foto produk"
  width="1600"
  height="1067"
  loading="lazy"
>

Jana varian saiz ini sebagai sebahagian daripada proses binaan anda atau dengan alat kelompok sebelum memuat naik.

Penghantaran CDN

CDN (Rangkaian Penghantaran Kandungan) menyajikan imej dari pelayan yang dekat secara geografi dengan pelawat anda. Ini mengurangkan kependaman, tetapi sesetengah CDN pergi lebih jauh dengan pengoptimuman imej semasa dalam perjalanan.

Cloudflare Image Resizing boleh mengubah saiz dan menukar imej kepada WebP atau AVIF secara automatik berdasarkan pelayar pelawat. Anda tidak perlu menjana varian sendiri.

Imgix dan Cloudinary adalah CDN imej khusus. Anda memuat naik satu sumber berkualiti tinggi, dan mereka menjana apa jua saiz, format, dan kualiti yang anda minta melalui parameter URL. Ini berkuasa tetapi menambah kos per-imej.

Untuk kebanyakan projek, memampatkan imej sebelum muat naik dan menyajikannya melalui CDN standard (Cloudflare, Fastly, AWS CloudFront) sudah memadai. CDN imej khusus masuk akal apabila anda mempunyai ribuan imej muat naik pengguna dan memerlukan pengubahan saiz dinamik. Untuk latar belakang mengapa mampatan penting untuk web sama sekali, panduan kami tentang mengapa imej laman web perlu mampatan merangkumi asas-asasnya.

Kesilapan biasa yang dilakukan oleh pembangun

Melakukan komit imej tidak dioptimumkan. JPEG 5MB dalam repositori anda kekal dalam sejarah git selamanya, walaupun anda menggantikannya kemudian. Mampatkan sebelum melakukan komit.

Menggunakan PNG untuk gambar. PNG ditujukan untuk grafik, tangkapan skrin, dan imej dengan ketelusan. Gambar yang disimpan sebagai PNG biasanya 3 hingga 5 kali lebih besar daripada imej yang sama sebagai JPEG atau WebP. Gunakan format yang betul untuk jenis kandungan. Semak panduan perbandingan format kami untuk spesifik.

Melangkau atribut lebar dan tinggi. Tanpa dimensi yang jelas, pelayar tidak tahu berapa banyak ruang yang perlu dikhaskan untuk imej sehingga ia dimuatkan. Ini menyebabkan peralihan susun atur, yang menjejaskan skor CLS anda dan mengganggu pengguna.

Terlebih mampat. Menolak kualiti ke 30 atau 40% untuk mendapatkan fail kecil menghasilkan artifak yang kelihatan. Untuk imej web, kualiti 75 hingga 82% mencapai keseimbangan yang tepat antara saiz dan penampilan.

Mengabaikan dimensi imej. Memampatkan foto 4000px pada kualiti 80% adalah baik, tetapi jika ia dipaparkan selebar 600px pada halaman anda, anda masih menghantar lebih banyak piksel daripada yang diperlukan. Ubah saiz ke dimensi paparan anda terlebih dahulu, kemudian mampatkan.

Tidak menggunakan WebP. Sokongan pelayar untuk WebP kini universal. Jika anda masih menyajikan JPEG dan PNG secara eksklusif, anda meninggalkan penjimatan saiz fail 25 hingga 35% di atas meja.

Pendekatan praktikal

Untuk kebanyakan projek web, inilah yang berfungsi dengan baik:

Ubah saiz dan mampatkan imej sebelum melakukan komit, menggunakan alat dalam talian seperti Pemampat Imej Pukal atau skrip tempatan.
Tambah plugin binaan sebagai jaring keselamatan untuk menangkap apa-apa yang terlepas.
Gunakan pemuatan malas dan imej responsif dalam HTML anda.
Sajikan melalui CDN.

Anda tidak perlu melakukan keempat-empat pada hari pertama. Mulakan dengan langkah pertama. Itu sahaja akan membuat perbezaan yang ketara dalam masa muat 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