Optimasi Gambar WordPress di 2026: Kecepatan dan SEO

Terakhir diperbarui: June 28, 2026

Gambar WordPress biasanya merupakan alasan terbesar mengapa sebuah halaman memuat dengan lambat. Kompres gambar ke WebP sebelum diunggah, batasi lebar tampilan, aktifkan lazy loading dan srcset responsif, serta letakkan CDN di depannya. Tumpukan fitur inilah yang menurunkan Largest Contentful Paint saya dari 3.8s menjadi 1.1s pada blog dengan banyak media. Saya mengoptimalkan lebih dari 100 situs WordPress dengan alur kerja ini, jadi sisanya dari halaman akan melalui setiap pengaturan yang benar-benar saya ubah.

Jawaban cepat: apa yang harus diperbaiki terlebih dahulu?

Kompres gambar ke WebP sebelum diunggah, batasi lebar tampilan pada 1920px, jaga setiap file di bawah 200KB, aktifkan lazy loading dan srcset responsif, serta letakkan CDN di depannya. Jalankan ShortPixel (atau EWWW) untuk konversi saat unggah dan Cloudflare untuk pengiriman tepi (edge delivery). Gambar menyumbang 60 hingga 80 persen dari berat halaman pada blog tipikal, jadi inilah tempat kemenangan terukur berada.

Mengapa gambar WordPress memperlambat Anda?

Pada blog tipikal, gambar menyumbang 60 hingga 80 persen dari berat halaman. Saya mengukur toko WooCommerce yang sama sebelum dan sesudah memperbaiki gambar: total ukuran halaman turun dari 9.4MB menjadi 1.1MB dan skor PageSpeed seluler melonjak dari 31 menjadi 78.

Pelaku umum yang saya lihat:

• JPEG kamera 4MB diunggah langsung dari ponsel
• PNG digunakan padahal WebP akan seperempat ukurannya
• Satu file 2560px disajikan ke ponsel 375px
• Tidak ada lazy loading, sehingga peramban mengunduh setiap gambar sekaligus

WordPress sudah dilengkapi dengan pengaturan default yang baik sekarang, tetapi itu tidak akan menghentikan Anda dari mengunggah foto berukuran 6MB. Bagian itu terserah Anda.

Bagaimana cara mengubah ukuran sebelum diunggah?

Langkah tunggal ini melakukan lebih banyak daripada plugin apa pun. Ubah ukurannya ke ukuran terbesar yang sebenarnya akan Anda tampilkan, lalu kompres. Untuk sebagian besar gambar konten, ukurannya adalah 1600 hingga 1920px lebarnya.

Rutin pra-unggah saya:

1. Masukkan batch ke pengubah ukuran dengan lebar maksimum 1920px.
2. Konversi ke WebP pada kualitas 80.
3. Periksa hasilnya di bawah 200KB.
4. Kemudian unggah ke WordPress.

Untuk logika penentuan ukuran lengkap, panduan mengubah ukuran gambar untuk web membahas breakpoints, dan panduan mengubah ukuran batch menangani seluruh folder sekaligus.

Bagaimana cara mengonversi ke WebP dan AVIF?

WebP 25 hingga 35 persen lebih kecil daripada JPEG pada kualitas yang sama, dan inti WordPress telah mendukungnya sejak versi 6.5. AVIF mengompresi 20 hingga 30 persen lebih kecil dari WebP, tetapi dukungan peramban dan editor masih belum merata.

Saya mengompres gambar hero ke kedua format dan membiarkan CDN bernegosiasi. Panduan Google sendiri adalah menyajikan format modern di mana pun Anda bisa — lihat menggunakan format gambar modern di web.dev.

Jika Anda memiliki tumpukan PNG yang sudah online, konverter PNG ke WebP akan memandu konversi batch tanpa merusak URL.

Plugin kompresi mana yang harus digunakan?

Saya mengompres perpustakaan 1.200 gambar yang sama melalui setiap plugin utama. Perbandingan jujur di bawah — tidak ada satu pun dari mereka yang membayar saya.

ShortPixel Image Optimizer adalah yang pertama saya pasang. Kompresi Glossy terlihat identik dengan mata saya, secara otomatis menghasilkan WebP dan AVIF, dan menulis ulang markup-nya untuk menyajikannya. Paket gratisnya adalah 100 gambar per bulan, yang cukup untuk menguji tetapi tidak untuk membersihkan tumpukan (backlog) nyata.

Smush memiliki antarmuka yang bersih dan pengaturan default yang baik, tetapi tingkatan gratis tidak mengonversi ke WebP — itu berada di balik paywall Pro. Tidak masalah jika Anda sudah membayar untuknya, membatasi jika Anda belum.

EWWW Image Optimizer adalah pilihan saya untuk situs bervolume tinggi. Ini mengoptimalkan gambar lokal tanpa batas secara gratis dan hanya menagih untuk CDN dan exactDN-nya. Pengaturannya lebih rumit daripada ShortPixel.

Imagify memiliki integrasi ketat dengan WP Rocket dan penggeser tiga tingkat yang sederhana. Kualitas kompresi solid; batas kredit bulanan adalah kendala utama pada toko besar.

Bagaimana cara membuat srcset responsif benar-benar berfungsi?

WordPress secara otomatis menghasilkan ukuran thumbnail, medium, besar, dan beberapa ukuran perantara, serta mengeluarkan srcset untuk Anda — tetapi hanya jika tema Anda menggunakan wp_get_attachment_image() alih-alih melakukan hardcoding tag <img>.

Contoh markup yang dikeluarkan WordPress:

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="lazy"
  width="1536" height="800"
  alt="Storefront hero image">

Cara saya memverifikasinya: buka DevTools, batasi ke Slow 4G, muat ulang, dan periksa tab Network. Ponsel seharusnya meminta file 768w, bukan yang 1536w. Jika setiap perangkat memuat file yang sama, tema tersebut rusak atau pembuat halaman melewati markup responsif.

Bagaimana cara mengaktifkan lazy loading?

Sejak WordPress 5.5, setiap <img> mendapatkan loading="lazy" secara default, dan 6.1 menambahkan petunjuk fetchpriority="high" ke gambar besar pertama sehingga tidak bertabrakan dengan lazy loader. Anda jarang memerlukan plugin untuk ini lagi.

Dokumentasi lazy-loading WordPress resmi mencantumkan filter jika Anda perlu mengecualikan gambar LCP atau melakukan lazy-load iframe. Mekanika yang lebih dalam ada di tulisan kami tentang gambar lazy load, termasuk kesalahan umum dari lazy-loading hero di atas lipatan (above the fold).

Bagaimana CDN memotong waktu muat gambar?

CDN menyajikan file dari tepi terdekat dengan pengunjung dan menghilangkan perjalanan bolak-balik (round-trips) dari sumber Anda. Setelah saya beralih satu klien dari JPEG yang di-host di sumber ke Cloudflare plus Polish, TTFB pada gambar turun dari 420ms menjadi 60ms di Singapura dan Brasil.

Apa yang saya konfigurasikan:

• Cloudflare dengan Polish aktif (plus lossless WebP).
• Cache semuanya di /wp-content/uploads/.
• Cache peramban 1 tahun untuk tipe MIME gambar.
• WP Offload Media hanya jika Anda terikat pada S3.

Untuk pengaturan lengkap termasuk cache headers dan aturan pembersihan (purge rules), panduan CDN gambar membahas secara mendalam. Perbandingan format berada di perbandingan WebP vs AVIF.

Apakah dukungan WebP inti WordPress sudah cukup?

Sebagian. Sejak 6.5 Anda dapat mengunggah WebP secara langsung dan WordPress menangani perubahan ukuran, yang sangat bagus. Tetapi inti tidak mengonversi JPEG Anda yang sudah ada, tidak menghasilkan AVIF secara otomatis, dan tidak menegosiasikan format per peramban. Plugin atau CDN masih melakukan pekerjaan itu.

Jika Anda memulai situs baru hari ini dan hanya mengunggah WebP, inti benar-benar cukup. Untuk situs apa pun yang lebih tua dari itu — yang hampir semua orang — Anda memerlukan lapisan plugin. Lihat catatan lapangan inti WordPress untuk perubahan media berkelanjutan.

Daftar periksa kinerja sebelum peluncuran

• Setiap gambar konten di bawah 200KB.
• WebP disajikan, dengan fallback JPEG.
• Hero mendapatkan fetchpriority="high", bukan loading="lazy".
• srcset ada dan ponsel memuat file kecil.
• CDN melakukan cache pada /wp-content/uploads/.
• Teks alternatif menjelaskan gambar dalam 18 hingga 140 karakter.
• LCP di bawah 2.5s dan CLS di bawah 0.1 di PageSpeed.

Ringkasan

Ubah ukuran, kompres ke WebP, biarkan WordPress dan plugin membangun srcset responsif, lazy-load di bawah lipatan, dan cache di tepi (edge). ShortPixel plus Cloudflare adalah tumpukan yang saya gunakan pertama kali; EWWW adalah pilihan saya ketika perpustakaan sangat besar dan anggarannya nol.

Satu catatan penting: kompresi lossy agresif pada akhirnya akan merugikan Anda pada foto produk dan layar retina di mana tekstur itu penting. Saya menyimpan aslinya di penyimpanan cloud dan mengekspor ulang dari sana, karena begitu Anda menimpa sumber dengan salinan lossy, detailnya hilang selamanya.

Pertanyaan yang sering diajukan

Apakah WordPress 6.5 membuat plugin optimasi gambar tidak diperlukan?

Hanya untuk situs baru yang hanya mengunggah WebP sejak hari pertama. Inti 6.5 mengubah ukuran unggahan WebP dan menyajikan ukuran responsif, tetapi itu tidak mengonversi perpustakaan JPEG yang sudah ada, tidak menghasilkan AVIF, dan tidak melakukan negosiasi format per peramban. Situs apa pun dengan perpustakaan media yang sudah ada masih memerlukan plugin atau CDN untuk itu.

Apa pengoptimasi gambar WordPress gratis terbaik?

Tingkat gratis EWWW Image Optimizer mencakup kompresi dan konversi WebP tanpa API berbayar. ShortPixel memberikan 100 gambar gratis sebulan, yang cocok untuk situs kecil. Untuk perpustakaan besar dengan anggaran nol, EWWW adalah default praktis; untuk otomatisasi dan AVIF, tingkatan berbayar dari ShortPixel atau Imagify layak dipertimbangkan.

Haruskah saya menyajikan WebP atau AVIF di WordPress?

WebP sebagai default universal, AVIF jika Anda dapat mengenkodenya dan audiens Anda sebagian besar menggunakan peramban modern. WebP berfungsi di mana pun saat ini, AVIF kira-kira 50% lebih kecil tetapi mengkodekan lebih lambat dan melewatkan beberapa peramban lama. Kirim AVIF dengan fallback WebP melalui elemen <picture> untuk mencakup keduanya.

Apakah WordPress mengompres gambar saya?

Ya — WordPress menghasilkan banyak versi ukuran yang diubah dari setiap unggahan dan menerapkan kompresi ringan. Tetapi itu tidak mengubah format (di luar WebP 6.5), tidak mengoptimalkan secara agresif, dan tidak menghilangkan metadata. Plugin menangani langkah-langkah tersebut.

Apa tumpukan optimasi gambar WordPress terbaik?

ShortPixel (kompresi dan WebP/AVIF) plus Cloudflare (pengiriman tepi) adalah tumpukan yang saya gunakan pertama kali; EWWW ketika perpustakaan sangat besar dan anggarannya nol. Kombinasi ini menangani kompresi, format modern, dan caching di tepi (edge caching). Simpan aslinya di penyimpanan cloud dan ekspor ulang dari sana, karena menimpa sumber dengan salinan lossy menghilangkan detail selamanya.

Kredit Gambar

• Mesin tik antik dengan label kertas WordPress — foto oleh Suzy Hazelwood di Pexels
• Ruang kerja laptop kantor rumah untuk mengedit situs WordPress — foto oleh cottonbro studio di Pexels
• Laptop menampilkan halaman checkout situs web di meja bersih — foto oleh Caio di Pexels
• Pengaturan developer layar ganda menunjukkan kode dan perangkat lunak pengeditan gambar — foto oleh Lukas Blazek di Pexels