Imagyc›Artikel

Mengapa gambar perlu dioptimalkan agar situs lebih cepat dan hemat kuota

Diterbitkan 12 Oktober 2026 · 7 menit baca

Foto terlihat bagus, produknya jelas, dan file terbuka dengan cepat di komputer Anda. Namun, gambar itu masih bisa terlalu besar untuk halaman tempat Anda memasangnya. Masalahnya baru terasa di sisi pengunjung: di ponsel orang yang ingin melihat penawaran, membaca artikel, atau mencari informasi.

Optimasi gambar berarti menyiapkan gambar sesuai kebutuhan pemakaiannya, mengurangi data yang tidak perlu sambil mempertahankan detail yang penting. Proses ini mencakup dimensi, kompresi, dan format. Untuk situs web, cara gambar dimuat juga perlu diperhatikan.

Setiap gambar memiliki tugas. Foto utama perlu muncul sejak awal. Thumbnail sebaiknya ringan. Foto produk harus cukup jelas untuk membantu pembeli mengambil keputusan. File yang tepat memenuhi tugas itu dengan beban pemuatan yang masuk akal.

Apa yang berubah ketika gambar dioptimalkan?

Pisahkan dua ukuran sejak awal: dimensi, misalnya 1.200 × 800 piksel, dan ukuran file, misalnya 180 KB. Dimensi menunjukkan jumlah piksel. Ukuran file menunjukkan banyaknya data yang harus dikirim.

Mengecilkan tampilan foto di editor situs belum tentu mengecilkan file yang diunduh. Pengunjung bisa tetap menerima gambar asli yang berukuran besar. Untuk menghindarinya, ubah file atau cara situs menyediakannya.

Penyesuaian ini saling melengkapi. Mengonversi foto yang terlalu besar dapat menghemat data, tetapi tidak membuat seluruh pikselnya menjadi diperlukan.

Kondisi internet pengunjung bisa berbeda dari kondisi Anda

Anda mungkin membuat halaman dengan koneksi fiber, Wi-Fi stabil, dan komputer yang kuat. Pengunjung bisa membuka situs di kendaraan, menggunakan jaringan bersama, atau menghadapi sinyal seluler yang berubah-ubah. Paket internet dengan kecepatan tinggi pun dapat melambat saat jaringan padat.

Perangkat juga berpengaruh. Setelah mengunduh gambar, browser perlu mendekode datanya agar dapat ditampilkan. Jumlah piksel yang berlebihan menambah pekerjaan, meskipun ukuran file terkompresi terlihat kecil.¹

Karena itu, periksa situs di ponsel sungguhan. Perhatikan kunjungan pertama, ketika file belum tersimpan di cache browser. Halaman yang sudah berkali-kali Anda buka dapat terasa lebih cepat daripada pengalaman pengunjung baru.

File lebih kecil berarti lebih sedikit data yang dikirim

Bayangkan halaman katalog dengan delapan foto. Dalam contoh hipotetis ini, setiap file asli berukuran 1,5 MB dan versi yang dioptimalkan berukuran 180 KB.

Volume data gambar berkurang 88%. Untuk 10.000 unduhan lengkap, jumlahnya sekitar 120 GB dibandingkan 14,4 GB, sebelum memperhitungkan cache. Perhitungan memakai satuan desimal dan tidak mencakup file lain pada halaman.

Penghematan ini membantu pengunjung dengan kuota terbatas dan mengurangi data yang perlu dikirim situs. Foto juga tidak terlalu banyak berebut kapasitas koneksi dengan skrip, font, dan sumber daya lain.

Pengaruhnya terhadap biaya hosting bergantung pada paket dan infrastruktur. Pengurangan data gambar sebesar 88% juga tidak berarti seluruh halaman menjadi 88% lebih cepat. Respons server, kode halaman, dan sumber daya lain tetap berperan.

Di toko online, kecepatan perlu berjalan bersama kualitas visual

Foto produk menjawab pertanyaan pembeli: seperti apa tekstur kainnya? Bagaimana detail jahitannya? Apakah warnanya sesuai? Bisakah bagian kecil diperiksa ketika diperbesar?

Foto yang lambat muncul mengganggu penilaian itu. Foto yang terlalu dikompresi juga bisa menghilangkan detail. Jika Anda membayar untuk mendatangkan pengunjung, klik sudah terjadi; halaman perlu membantu orang memahami penawaran.

Dalam pengujian A/B yang dipublikasikan di web.dev, Vodafone melaporkan perbaikan LCP sebesar 31% dan peningkatan penjualan 8% setelah sejumlah perubahan kinerja, termasuk pekerjaan pada gambar. Hasil itu berasal dari eksperimen tersebut, bukan janji peningkatan untuk setiap toko. Pengaruh kompresi gambar juga tidak dipisahkan dari perubahan lainnya.²

Untuk bisnis Anda, ukur hasilnya. Bandingkan kunjungan halaman, kemajuan dalam alur pembelian, dan transaksi dalam kondisi yang sebanding. Perubahan iklan, audiens, atau penawaran dapat memengaruhi angka pada waktu yang sama.

Apakah optimasi gambar membantu SEO?

Google menggunakan Core Web Vitals dalam sistem pemeringkatannya. Namun, nilai yang bagus tidak menjamin posisi teratas. Konten yang relevan dan bermanfaat tetap diperlukan.³

Gambar berkaitan terutama dengan LCP, yaitu waktu tampilnya konten terbesar yang memenuhi kriteria di area terlihat, dan CLS, yaitu pergeseran tata letak yang tidak diharapkan. Mengurangi unduhan dapat membantu LCP. Menyediakan ruang gambar sejak awal membantu CLS.^{4, 5}

Penilaian menggunakan persentil ke-75 dan memisahkan perangkat seluler dari desktop. INP mengukur respons terhadap interaksi; mengompresi foto saja tidak memperbaiki seluruh masalah interaksi.⁶

Konteks gambar juga penting: nama file, teks di sekitarnya, serta cara file dapat ditemukan Google. Baca cara memberi nama gambar untuk SEO untuk menata bagian ini.⁷

Format gambar apa yang sebaiknya digunakan?

Mulailah dari isi gambar. JPEG cocok untuk banyak foto tanpa transparansi. PNG berguna ketika piksel perlu dipertahankan secara tepat atau diperlukan area transparan. WebP dan AVIF layak dibandingkan untuk menghasilkan file lebih kecil. SVG biasanya sesuai untuk logo, ikon, dan gambar vektor.⁸

Bandingkan pada kualitas visual yang serupa. File terkecil kurang berguna jika tekstur produk hilang atau tulisan menjadi sulit dibaca.

Panduan format JPEG, PNG, WebP, AVIF, dan JXL membahas kemampuan dan kompatibilitasnya. Untuk logo, baca cara mengubah PNG menjadi SVG. Vektorisasi merupakan proses berbeda dan tidak otomatis membuat semua foto lebih efisien.

Cara optimasi gambar tanpa menghilangkan detail penting

1. Simpan file asli dan tentukan penggunaannya

Pertahankan salinan untuk penyuntingan berikutnya. Tentukan apakah gambar akan menjadi thumbnail, banner, foto produk, atau bahan cetak. Versi web tidak perlu menggantikan file kerja.

2. Sesuaikan dimensi dengan area tampilan

Perhatikan lebar gambar pada tata letak dan kepadatan layar. Gambar yang tampil selebar 400 piksel CSS dapat memanfaatkan sumber 800 piksel pada layar 2x. Situs dapat menyediakan beberapa pilihan melalui srcset dan sizes.⁹

Panduan resolusi gambar untuk desktop dan ponsel membantu menentukan ukuran tanpa menganggap satu rentang berlaku untuk semua halaman.

3. Bandingkan format dan kompresi

Kompresi lossless mempertahankan piksel yang dikodekan. Kompresi lossy membuang sebagian informasi untuk mengurangi ukuran file. Tampilan akhirnya bisa tetap memadai, tetapi harus diperiksa.¹⁰

Lihat wajah, tepi objek, gradasi, tulisan kecil, dan detail produk pada ukuran penggunaan serta tingkat zoom yang disediakan. Angka kualitas seperti “80” tidak memiliki arti yang sama pada semua format dan aplikasi.

Fotonyakotak menandai area yang diperbesar

AsliHEIC · 3024 × 4032 px · 2,95 MB

Setelah ImagycWebP · 1600 × 2133 px · 398 KB

4. Periksa privasi dan cara gambar dijelaskan

Tinjau data yang ikut dalam ekspor. Panduan metadata gambar dan privasi membedakan informasi file dari pelacakan kampanye. Pertahankan informasi pencipta dan lisensi jika diperlukan.¹¹

Gunakan teks alternatif sesuai fungsi gambar. Gambar informatif memerlukan penjelasan berguna; gambar yang sepenuhnya dekoratif dapat menggunakan alt="".¹²

5. Atur pengiriman gambar pada situs

Gambar utama yang menjadi LCP harus ditemukan browser sejak awal dan tidak menggunakan lazy loading. Petunjuk prioritas dapat membantu jika diterapkan pada sumber daya yang tepat.⁴ Gambar jauh di bawah halaman dapat dimuat kemudian agar tidak semuanya diunduh sejak awal.¹³

Cantumkan dimensi dengan rasio yang benar untuk menyediakan ruang. Langkah ini membantu mencegah foto mendorong teks ketika selesai dimuat.⁵

Cara memastikan optimasi berhasil

Bandingkan file sebelum dan sesudah, lalu uji halaman yang sudah dipublikasikan. Gunakan PageSpeed Insights untuk memeriksa seluler dan desktop. Data pengguna nyata, jika tersedia, mewakili jendela 28 hari dan berbeda dari satu pengujian laboratorium.¹⁴

Tanyakan: apakah detail tetap terlihat? Apakah data yang dikirim berkurang? Apakah konten utama tampil lebih baik dalam kondisi pengunjung?

Untuk pemeriksaan per file, lanjutkan ke cara menemukan gambar yang membuat situs lambat. Perubahan kecil pada skor keseluruhan tidak membatalkan penghematan data. Sebaliknya, skor tinggi tidak membuktikan peningkatan penjualan.

Pertanyaan yang sering diajukan

Apakah gambar WebP masih perlu dioptimalkan?

Periksa dimensi dan pengaturan ekspornya. File WebP masih bisa terlalu besar untuk penggunaannya. Jika sudah optimal, penghematan tambahan mungkin kecil.

Apakah ada ukuran file ideal untuk semua gambar?

Tidak. Thumbnail, banner, dan foto dengan zoom mempunyai kebutuhan berbeda. Tetapkan sasaran berdasarkan fungsi dan perhatikan total ukuran halaman.

Apakah kompresi sama dengan mengubah dimensi?

Tidak. Mengubah dimensi mengubah jumlah piksel. Kompresi mengubah cara informasi disimpan. Satu gambar bisa memerlukan keduanya.

Bisakah ukuran gambar dikurangi tanpa kehilangan kualitas?

Kompresi lossless dapat mempertahankan piksel, tetapi penghematannya berbeda-beda. Kompresi lossy mengubah informasi; periksa apakah detail yang diperlukan tetap memadai.

Pilih gambar yang benar-benar Anda gunakan dan coba optimasi di Imagyc. Bandingkan ukuran file, ketajaman, dan dimensi sebelum menerbitkannya. Pemrosesan berlangsung di browser tanpa mengunggah gambar ke server untuk tugas tersebut. Simpan file asli jika metadata perlu dipertahankan.