Cara Mengubah Ukuran Gambar Unggulan di WordPress: Panduan Teknis Lengkap

Gambar unggulan — juga disebut post thumbnails — adalah jangkar visual utama dari setiap situs WordPress. Gambar ini muncul di daftar postingan, halaman arsip, pratinjau media sosial, dan RSS feed, sehingga dimensinya menjadi faktor langsung dalam konsistensi tata letak dan kualitas desain yang dirasakan. Mengubah ukuran gambar unggulan di WordPress berarti mendefinisikan ulang dimensi piksel yang didaftarkan WordPress saat waktu unggah, memperbarui cara tema Anda meminta dimensi tersebut saat waktu render, atau keduanya — dan gagal menangani kedua sisi ini adalah alasan paling umum mengapa gambar yang diubah ukurannya terlihat salah di bagian depan.

Panduan ini mencakup setiap metode yang tersedia, mulai dari pengaturan dasbor tanpa kode hingga kustomisasi PHP langsung, dengan konteks teknis yang tepat untuk setiap pendekatan.

Memahami Cara WordPress Menangani Ukuran Gambar

Sebelum menyentuh pengaturan apa pun, Anda perlu memahami alurnya. Saat Anda mengunggah gambar, WordPress tidak menyimpan satu file — ia menghasilkan beberapa file turunan berdasarkan definisi ukuran yang terdaftar. Definisi ini tersimpan di database dan didaftarkan oleh inti WordPress, tema aktif Anda, atau plugin yang terpasang.

Tiga ukuran yang didaftarkan WordPress secara default adalah:

• Thumbnail — biasanya 150x150 px, dipotong keras secara default
• Medium — hingga 300x300 px, diskalakan secara proporsional
• Large — hingga 1024x1024 px, diskalakan secara proporsional

Tema Anda mendaftarkan ukuran tambahan menggunakan add_image_size(). Ketika template memanggil the_post_thumbnail('large'), WordPress mencari file yang dihasilkan untuk ukuran terdaftar tersebut pada waktu unggah. Ini adalah poin arsitektur yang kritis: mengubah definisi ukuran tidak secara retroaktif mengubah ukuran gambar yang sudah diunggah. Anda harus meregenerasi thumbnail setelah perubahan ukuran apa pun.

Metode 1: Sesuaikan Ukuran Gambar Unggulan melalui Pengaturan Media WordPress

Ini adalah titik awal yang tepat untuk situs di mana tema menggunakan salah satu dari tiga ukuran inti untuk output gambar unggulannya.

Langkah 1: Perbarui Pengaturan Media

Navigasikan ke Settings > Media di dasbor WordPress Anda. Anda akan melihat tiga grup ukuran. Identifikasi ukuran mana yang digunakan tema Anda untuk gambar unggulan — periksa dokumentasi tema Anda atau periksa HTML yang dirender untuk mengonfirmasi kelas CSS (misalnya, wp-image-* bersama size-large).

Sesuaikan kolom lebar dan tinggi untuk ukuran yang relevan. Menetapkan salah satu dimensi ke 0 memberi tahu WordPress untuk menskalakan secara proporsional sepanjang sumbu lainnya daripada memotong.

Klik Save Changes.

Langkah 2: Regenerasi Thumbnail yang Ada

Unggahan baru akan langsung menggunakan dimensi yang diperbarui. Untuk gambar yang sudah ada di perpustakaan media Anda, Anda harus meregenerasi turunannya. Alat paling andal untuk ini adalah plugin Regenerate Thumbnails oleh Alex Mills.

Setelah menginstal dan mengaktifkannya, buka Tools > Regen. Thumbnails dan klik Regenerate All Thumbnails. Pada perpustakaan yang besar, ini adalah operasi yang intensif sumber daya — jalankan selama jam lalu lintas rendah, dan jika Anda menggunakan paket VPS Hosting, pertimbangkan untuk sementara meningkatkan max_execution_time dan memory_limit PHP di php.ini untuk mencegah timeout.

Kesalahan umum: Jika tema Anda mendaftarkan ukuran kustom sendiri dengan label yang sama seperti ukuran inti, panel Pengaturan Media tidak akan memengaruhinya. Panggilan add_image_size() tema mengambil prioritas.

Metode 2: Gunakan WordPress Customizer atau Panel Opsi Tema

Banyak tema komersial mengekspos kontrol ukuran gambar tanpa memerlukan perubahan kode.

Langkah 1: Periksa Customizer

Buka Appearance > Customize. Cari di bagian berlabel Theme Options, Blog Settings, Layout, atau Post Settings. Beberapa tema menampilkan bagian Featured Image khusus di sini.

Jika kontrol ada, sesuaikan lebar dan tinggi, lalu klik Publish. Tema akan memperbarui definisi ukuran terdaftarnya dan, dalam beberapa implementasi, secara otomatis meregenerasi gambar yang terpengaruh.

Langkah 2: Periksa Panel Opsi Tema Khusus

Tema premium yang dibangun di atas framework seperti Redux atau Kirki sering memiliki item menu Theme Options atau Theme Panel yang berdiri sendiri di bilah sisi dasbor. Cari subbagian bernama Image Settings, Post Thumbnails, atau Archive Layout.

Sesuaikan nilainya, simpan, lalu regenerasi thumbnail secara manual menggunakan metode plugin yang dijelaskan di atas, karena sebagian besar panel tema tidak memicu regenerasi secara otomatis.

Metode 3: Definisikan Ukuran Gambar Kustom di functions.php

Ini adalah metode yang secara teknis tepat untuk pengembang dan siapa pun yang membutuhkan kontrol presisi atas dimensi, perilaku pemotongan, dan penamaan ukuran. Ini juga satu-satunya metode yang memungkinkan Anda mendaftarkan ukuran yang tidak bertentangan dengan default inti.

Langkah 1: Daftarkan Ukuran Kustom

Edit file functions.php child theme Anda. Jangan pernah mengedit file tema induk secara langsung — pembaruan akan menimpa perubahan Anda. Jika Anda tidak memiliki child theme, buat satu sebelum melanjutkan.

Tambahkan kode berikut di dalam fungsi yang di-hook:

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

Rincian parameter untuk add_image_size():

• Argumen 1 — handle ukuran (string), digunakan saat memanggil gambar di template
• Argumen 2 — lebar dalam piksel
• Argumen 3 — tinggi dalam piksel
• Argumen 4 — mode pemotongan: true untuk pemotongan keras ke dimensi tepat; false untuk penskalaan proporsional; array seperti array( 'left', 'top' ) untuk pemotongan posisional

Kasus tepi: Melewatkan true sebagai argumen pemotongan akan default ke pemotongan tengah-tengah. Jika gambar unggulan Anda memiliki subjek yang secara konsisten tidak berada di tengah (misalnya, fotografi potret), gunakan array posisional — array( 'center', 'top' ) — untuk mencegah kepala terpotong.

Langkah 2: Panggil Ukuran Kustom di File Template

Temukan file template yang bertanggung jawab untuk merender gambar unggulan. Kandidat umum adalah single.php, archive.php, content.php, atau template-parts/content-single.php. Cari the_post_thumbnail untuk menemukan panggilan yang tepat.

Ganti argumen ukuran yang ada:

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Untuk kontrol lebih atas markup output, gunakan get_the_post_thumbnail() dengan atribut kustom:

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Langkah 3: Jadikan Ukuran Kustom Dapat Dipilih di Media Uploader (Opsional)

Secara default, ukuran kustom yang didaftarkan dengan add_image_size() tidak muncul di dropdown ukuran media uploader WordPress. Untuk mengeksposnya untuk penggunaan editorial, tambahkan filter ini:

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Langkah 4: Regenerasi Thumbnail

Jalankan plugin Regenerate Thumbnails seperti yang dijelaskan di Metode 1. Semua gambar yang sebelumnya diunggah akan memiliki file turunan baru yang dihasilkan dengan dimensi baru.

Metode 4: Sesuaikan Ukuran Gambar Unggulan di Page Builder

Page builder seperti Elementor, Divi, dan Bricks Builder mengabstraksi lapisan template, sehingga pengeditan file template mungkin tidak berlaku. Setiap builder memiliki kontrol ukuran gambarnya sendiri.

Elementor

1. Buka halaman atau postingan di Elementor.
2. Pilih widget Featured Image atau widget Posts yang menampilkan thumbnail.
3. Di panel kiri, temukan Image Size di bawah tab Content.
4. Pilih ukuran terdaftar dari dropdown atau pilih Custom untuk memasukkan dimensi piksel.
5. Klik Update.

Catatan teknis: Saat Anda memilih “Custom” di Elementor, itu tidak mendaftarkan ukuran gambar WordPress baru — ia menggunakan JavaScript untuk mengubah ukuran gambar di sisi klien atau meminta gambar berukuran penuh dan menskalanya melalui CSS. Ini meningkatkan bobot halaman. Selalu pilih ukuran WordPress yang terdaftar daripada dimensi Elementor kustom untuk halaman yang mengutamakan performa.

Divi

Di Blog Module atau Post Featured Image module Divi, opsi Image Size di bawah Advanced mengontrol ukuran WordPress terdaftar mana yang diminta. Divi juga memiliki pengaturan ukuran gambarnya sendiri di bawah Divi > Theme Options > General > Thumbnail Sizes, yang mendaftarkan turunan tambahan.

Metode 5: Gunakan Plugin untuk Ukuran Gambar Kustom Tanpa Kode

Jika mengedit PHP bukan pilihan, plugin-plugin ini mereplikasi fungsionalitas add_image_size() melalui UI:

Simple Image Sizes adalah pengganti paling langsung untuk add_image_size(). Setelah menginstalnya, navigasikan ke Settings > Media — plugin menambahkan bagian ukuran kustom di bawah default inti. Definisikan ukuran Anda, simpan, dan gunakan regenerasi bawaan plugin untuk menerapkannya.

Perbandingan: Semua Metode Sekilas

Pertimbangan Performa dan Optimasi Gambar

Mendaftarkan terlalu banyak ukuran gambar adalah masalah sisi server yang sering diabaikan. Setiap ukuran terdaftar menghasilkan file baru saat diunggah. Situs dengan 15 ukuran terdaftar dan 2.000 gambar di perpustakaan media berpotensi memiliki 30.000 file gambar di disk. Pada hosting bersama ini memenuhi kuota; pada server mana pun ini mengembungkan ukuran cadangan.

Audit ukuran terdaftar Anda secara berkala. Gunakan cuplikan ini di plugin sementara atau functions.php untuk mencantumkan semua ukuran terdaftar:

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Kunjungi https://yoursite.com/?show_image_sizes=1 saat masuk sebagai administrator untuk melihat daftar lengkapnya.

Praktik performa tambahan:

• Gunakan format WebP. WordPress 5.8+ mengonversi gambar yang diunggah ke WebP jika library GD atau Imagick server Anda mendukungnya. Verifikasi dukungan di bawah Tools > Site Health.
• Terapkan lazy loading. WordPress menambahkan loading="lazy" ke gambar di bawah lipatan secara default sejak versi 5.5. Pastikan panggilan the_post_thumbnail() kustom Anda mempertahankan atribut ini.
• Kompres sebelum mengunggah. Alat seperti ShortPixel atau Imagify terintegrasi langsung ke dalam pipeline media WordPress dan mengompres turunan secara otomatis. TinyPNG bekerja dengan baik untuk kompresi manual sebelum unggah.
• Gunakan CDN. Jika situs Anda melayani audiens global, memindahkan pengiriman gambar ke CDN mengurangi latensi terlepas dari jumlah ukuran terdaftar.

Untuk situs dengan beban kerja gambar yang berat — portofolio fotografi, situs berita, toko WooCommerce — VPS dengan cPanel memberi Anda kontrol tingkat server untuk menyetel batas memori PHP, mengonfigurasi Imagick secara langsung, dan mengelola kuota disk yang tidak dapat ditawarkan oleh lingkungan bersama.

Gambar Responsif dan Atribut srcset

WordPress secara otomatis menghasilkan atribut srcset dan sizes untuk gambar dalam konten, mengambil dari semua ukuran gambar terdaftar. Ini berarti setiap ukuran yang Anda daftarkan berkontribusi pada kemampuan browser untuk memilih resolusi yang paling tepat untuk viewport dan rasio piksel perangkat pengguna.

Saat Anda memanggil the_post_thumbnail(), WordPress menghasilkan markup yang mirip dengan:

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

Atribut sizes memberi tahu browser seberapa lebar gambar akan dirender pada berbagai lebar viewport. WordPress menghasilkan nilai sizes default, tetapi sering kali tidak akurat untuk tata letak yang kompleks. Timpa menggunakan filter wp_calculate_image_sizes atau dengan melewatkan atribut sizes kustom dalam array $attr dari get_the_post_thumbnail().

Konteks SSL, Domain, dan Hosting

Jika Anda memigrasikan situs WordPress ke domain baru atau beralih dari HTTP ke HTTPS setelah mendapatkan Sertifikat SSL, URL gambar yang tersimpan dalam post meta (referensi _thumbnail_id) relatif terhadap ID lampiran dan tidak terpengaruh oleh perubahan domain. Namun, URL gambar yang dikodekan keras dalam konten postingan atau opsi tema perlu diperbarui melalui operasi search-replace menggunakan WP-CLI:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Jika Anda menyiapkan instalasi WordPress baru dari awal, mendaftarkan domain Anda melalui Pendaftaran Domain dan memasangkannya dengan lingkungan hosting yang dikonfigurasi dengan benar memastikan jalur unggah media dan aturan penulisan ulang .htaccess Anda sudah benar sejak awal, menghindari pola URL gambar yang rusak yang membosankan untuk di-debug secara retroaktif.

Daftar Periksa Keputusan Teknis

Gunakan matriks ini untuk memilih pendekatan yang tepat untuk situasi Anda:

• Anda perlu mengubah ukuran inti (thumbnail/medium/large) dan tidak mengedit kode — gunakan Settings > Media, lalu regenerasi thumbnail.
• Tema premium Anda memiliki panel Theme Options — periksa di sana terlebih dahulu sebelum menyentuh file apa pun.
• Anda membutuhkan ukuran dengan dimensi piksel tepat dan pemotongan keras — gunakan add_image_size() di functions.php child theme.
• Materi subjek Anda memerlukan pemotongan non-tengah — lewatkan array posisional sebagai argumen keempat ke add_image_size().
• Anda menggunakan Elementor atau Divi — gunakan kontrol Image Size bawaan builder, tetapi pilih ukuran WordPress terdaftar daripada “Custom” untuk performa.
• Anda tidak dapat mengedit PHP dan membutuhkan ukuran kustom — instal Simple Image Sizes, definisikan ukurannya, regenerasi.
• Anda memiliki perpustakaan media yang besar — gunakan Regenerate Thumbnails Advanced, yang memungkinkan regenerasi selektif berdasarkan nama ukuran untuk menghindari pemrosesan yang berlebihan.
• Performa adalah prioritas — audit ukuran terdaftar, aktifkan WebP, terapkan CDN, dan pastikan lazy loading aktif.
• Anda menggunakan hosting bersama dan mengalami kesalahan memori atau timeout selama regenerasi — pertimbangkan untuk bermigrasi ke paket VPS Hosting di mana batas PHP dapat dikonfigurasi.

FAQ

Mengapa gambar unggulan saya masih menampilkan ukuran lama setelah saya mengubah Pengaturan Media?

WordPress menghasilkan turunan gambar pada waktu unggah. Mengubah definisi ukuran di Settings > Media hanya memengaruhi unggahan baru. Anda harus menjalankan alat regenerasi thumbnail — seperti plugin Regenerate Thumbnails — untuk mengubah ukuran file yang sudah ada di perpustakaan media Anda.

Apa perbedaan antara add_image_size() dengan true versus false sebagai parameter pemotongan?

Melewatkan true memaksa WordPress untuk memotong gambar ke lebar dan tinggi tepat yang Anda tentukan, dicentang secara default. Melewatkan false menskalakan gambar secara proporsional sehingga tidak ada dimensi yang melebihi nilai yang Anda tentukan, yang berarti dimensi output aktual mungkin lebih kecil dari yang ditentukan jika rasio aspek asli berbeda.

Apakah mendaftarkan banyak ukuran gambar kustom akan memperlambat situs saya?

Tidak pada waktu render — WordPress menyajikan file yang telah dihasilkan sebelumnya. Biaya performa terjadi pada waktu unggah, ketika Imagick atau GD harus menghasilkan satu turunan per ukuran terdaftar. Situs dengan banyak ukuran dan volume unggah tinggi dapat mengalami respons unggah yang lambat dan pertumbuhan penggunaan disk yang signifikan.

Bisakah saya menghapus ukuran gambar yang tidak lagi saya butuhkan?

Ya. Gunakan remove_image_size( 'size-name' ) di functions.php Anda untuk menghentikan pembuatan ukuran untuk unggahan baru. File yang ada untuk ukuran tersebut tetap ada di disk hingga dihapus secara manual. Perintah WP-CLI wp media regenerate --only-missing dapat membantu membersihkan dengan hanya menghasilkan ukuran yang hilang tanpa membuat ulang semua turunan.

Apakah mengubah ukuran gambar unggulan memengaruhi tampilan gambar saat dibagikan di media sosial?

Tidak secara langsung. Platform sosial seperti Facebook dan Twitter membaca tag meta Open Graph (og:image) untuk menentukan gambar mana yang akan ditampilkan. Tag ini biasanya ditetapkan oleh plugin SEO seperti Yoast SEO atau Rank Math, yang mendaftarkan ukuran gambarnya sendiri (umumnya 1200x630) khusus untuk berbagi sosial. Mengubah ukuran gambar unggulan tema Anda tidak mengubah gambar Open Graph kecuali plugin SEO Anda dikonfigurasi untuk menggunakan handle ukuran yang sama.