Ukuran Featured Image WordPress: 1200×630 + Cara Mengeceknya

Jawaban singkat: kalau belum tahu ukuran tema Anda, pakai 1200 x 630 piksel (sekitar 1.91:1). Itu ukuran preview link yang direkomendasikan Facebook, dan plugin SEO biasanya memakai featured image sebagai gambar untuk dibagikan.

Di postingan itu sendiri, yang menentukan adalah ukuran yang ditampilkan tema Anda. WordPress menyimpan setiap unggahan dalam beberapa ukuran, dan tema yang memilih mana yang tampil. Tema klasik mengaturnya dengan set_post_thumbnail_size() atau add_image_size(); tema blok mengaturnya di blok Gambar Unggulan. Jika tema memotong ke 16:9 atau persegi, gambar 1200 x 630 bisa kehilangan sebagian tepi kiri dan kanannya. Cari ukuran tema Anda (ada empat cara di bawah), lalu unggah gambar yang minimal sebesar itu, atau sekitar dua kali lebarnya agar tajam di layar berkepadatan tinggi.

Untuk melihat semua ukuran yang akan dibuat WordPress dari gambar tertentu, masukkan gambarnya ke alat ukuran gambar WordPress.

Ukuran yang dipakai, berdasarkan tempat gambar tampil

Tempat gambar tampil	Ukuran yang diunggah	Catatan
Postingan Anda, ukuran tema belum diketahui	1200 x 630, atau 2400 x 1260 agar lebih tajam	Juga cocok untuk preview link selama Anda mencari ukuran tema
Postingan Anda, ukuran tema sudah diketahui	Sekitar dua kali lebar featured image tema Anda, dengan rasio aspek yang sama	WordPress membuat salinan yang lebih kecil dari unggahan, tidak pernah yang lebih besar
Preview link Facebook	Minimal 1200 x 630 (sekitar 1.91:1); bentuk 1200 x 628 hampir sama	Dari panduan berbagi Facebook
Google Discover	Lebar minimal 1200 px, 16:9 (misalnya 1200 x 675)	Dari panduan Discover Google

Ukuran gambar WordPress secara singkat

Setiap gambar yang Anda unggah mendapat salinan yang diubah ukurannya untuk tiap ukuran terdaftar. Berikut ukuran yang didaftarkan core WordPress, dengan nilai bawaan dari Theme Handbook dan referensi fungsi core:

Nama ukuran	Dimensi bawaan	Bisa diubah di Pengaturan > Media?	Catatan
thumbnail	150 x 150, di-crop	Ya	Punya kotak centang “crop ke dimensi persis”
medium	300 x 300 maks	Ya	Diperkecil secara proporsional
medium_large	Lebar 768, tanpa batas tinggi	Tidak	Terutama dipakai di srcset
large	1024 x 1024 maks	Ya	Diperkecil secara proporsional
1536x1536	1536 x 1536 maks	Tidak	Ditambahkan di WordPress 5.3 untuk layar berkepadatan tinggi
2048x2048	2048 x 2048 maks	Tidak	Ditambahkan di WordPress 5.3 untuk layar berkepadatan tinggi
post-thumbnail	Diatur oleh tema	Tidak	Hanya ada jika tema memanggil set_post_thumbnail_size()
full	File asli yang Anda unggah	Tidak	Unggahan yang sangat besar diperkecil dulu (lihat di bawah)

“Maks” berarti WordPress memasukkan gambar ke dalam kotak itu dan menjaga proporsinya. Foto 2000 x 1000 menjadi 1024 x 512 untuk large, bukan 1024 x 1024.

Tema dan plugin sering menambah ukuran lain dengan add_image_size(). WooCommerce, misalnya, menambahkan ukuran produknya sendiri, yang dibahas di panduan ukuran gambar produk WooCommerce kami.

Ada satu aturan lagi untuk unggahan besar. Sejak WordPress 5.3, jika gambar lebih lebar atau lebih tinggi dari 2560 piksel, WordPress memperkecilnya dan memakai salinan itu sebagai ukuran terbesar yang tersedia. Batas itu berasal dari filter big_image_size_threshold, yang nilai bawaannya 2560. Jika Anda melihat -scaled di nama file dan ingin tahu apakah perlu mematikannya, baca cara menonaktifkan gambar scaled di WordPress.

Dari mana ukuran featured image sebenarnya berasal

Featured image adalah gambar apa pun yang Anda pasang di panel Gambar Unggulan pada editor postingan. Apa yang dilihat pengunjung bergantung pada cara tema menampilkannya.

Tema klasik

Tema klasik mengaktifkan featured image dan mendaftarkan ukurannya di functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() mendaftarkan ukuran bernama post-thumbnail. Argumen ketiga mengatur crop. Dengan false (nilai bawaan), WordPress memperkecil gambar agar muat di dalam 1200 x 675. Dengan true, WordPress memotong gambar tepat 1200 x 675 dari tengah, jadi bagian di luar kotak 16:9 hilang. Anda juga bisa memberi array seperti array( 'center', 'top' ) untuk memilih bagian mana yang dipertahankan.

Banyak tema mendaftarkan ukuran bernama tambahan untuk template yang berbeda:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Lalu template memilih salah satunya berdasarkan nama:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Jika dipanggil tanpa nama, the_post_thumbnail() memakai post-thumbnail. Jadi ukuran featured image yang sebenarnya di tema klasik adalah ukuran yang disebut di template, dan arsip blog bisa memakai ukuran yang berbeda dari tampilan satu postingan.

Tema blok

Tema blok, termasuk tema gratis di situs ini, menampilkan featured image dengan blok Gambar Unggulan. Referensi blok core mencantumkan pengaturannya, termasuk sizeSlug (ukuran terdaftar mana yang dimuat), aspectRatio, width, height dan scale.

Itu mengubah tempat Anda mencari. Buka Tampilan > Editor, edit template Postingan Tunggal, lalu pilih blok Gambar Unggulan. Sidebar menunjukkan ukuran gambar yang dimuat dan apakah rasio aspek diatur. Rasio aspek diterapkan di browser dengan CSS, jadi filenya tetap sama dan yang berubah adalah bingkai yang terlihat. Jika blok meminta bingkai 16:9 dan gambar Anda persegi, sebagian gambar akan tersembunyi. Template arsip dan beranda bisa memakai pengaturan yang berbeda dari template postingan tunggal, jadi periksa satu per satu.

Cara mencari ukuran featured image tema Anda

Coba langkah ini secara berurutan. Yang pertama memberi jawaban sudah cukup.

1. Cek dokumentasi tema. Tema yang bagus menyebutkan ukuran featured image yang disarankan. Kalau ada, pakai itu.

2. Tampilkan ukuran terdaftar dengan WP-CLI. Jika punya akses command line, wp media image-size menampilkan setiap ukuran terdaftar beserta lebar, tinggi, pengaturan crop dan rasionya:

   wp media image-size

3. Cari di file tema. Di tema klasik, cari set_post_thumbnail_size dan add_image_size di functions.php (dan file yang di-include-nya), lalu cari nama yang diberikan ke the_post_thumbnail() di single.php atau template part. Di tema blok, periksa blok Gambar Unggulan di Editor Situs seperti dijelaskan di atas.

4. Periksa postingan yang sudah tayang. Klik kanan featured image, pilih Inspect, lalu baca nama file di src. WordPress menambahkan dimensi ke salinan yang diubah ukurannya, jadi my-photo-1200x675.jpg berarti tema memuat salinan 1200 x 675. Lihat juga srcset, karena browser bisa memilih salinan yang lebih kecil di layar sempit. Jika tidak ada dimensi di nama file, berarti file ukuran penuh yang dipakai.

Setelah tahu targetnya, coba satu gambar contoh di alat ukuran gambar untuk melihat hasil tiap salinan sebelum Anda mengunggah banyak gambar.

Memilih ukuran unggahan

Setelah ukuran tema diketahui, empat pilihan menentukan apakah hasilnya terlihat benar.

• Lebar. Unggah minimal selebar yang ditampilkan tema. Agar tajam di layar ponsel dan laptop berkepadatan tinggi, targetkan sekitar dua kali lebar itu. Untuk slot selebar 1200px, artinya 2400px. WordPress membuat salinan yang lebih kecil dari unggahan Anda dan tidak pernah membuat yang lebih besar, jadi file asli yang terlalu kecil adalah penyebab paling umum gambar buram setelah diunggah.
• Rasio aspek. Samakan dengan rasio crop tema. Jika tema memotong ke 16:9, berikan gambar 16:9 dan letakkan objek utama dekat bagian tengah agar crop paksa tidak memotong kepala atau teks.
• Ukuran file. Foto 2400px yang disimpan sebagai JPEG dengan kualitas wajar biasanya hanya beberapa ratus kilobyte. Mengunggah file kamera 6000px hanya menambah pekerjaan: WordPress tetap memperkecil semua yang di atas 2560px, dan piksel tambahan itu tidak pernah sampai ke pengunjung.
• Format file. WordPress menerima unggahan WebP sejak versi 5.8 dan AVIF sejak 6.5, selama library gambar di server Anda mendukungnya. Keduanya biasanya menghasilkan file yang lebih kecil daripada JPEG dengan kualitas serupa.

Gambar untuk berbagi di media sosial adalah urusan lain

Saat seseorang membagikan postingan Anda di Facebook, LinkedIn atau jaringan lain, preview-nya diambil dari tag og:image, yang biasanya diisi plugin SEO dari featured image. Dokumentasi berbagi Facebook menyarankan gambar minimal 1200 x 630 piksel, sedekat mungkin dengan rasio 1.91:1.

Anda juga akan menemukan rekomendasi 1200 x 628. Ukuran itu hampir persis 1.91:1, sedangkan 1200 x 630 sekitar 1.90:1. Selisih tingginya hanya 2 piksel, jadi keduanya sama-sama bisa dipakai.

Jika ukuran tampilan tema Anda juga mendekati 1.91:1, satu unggahan 1200 x 630 (atau 2400 x 1260) cukup untuk keduanya. Jika tema memotong ke 16:9 atau persegi, jauhkan konten penting dari tepi kiri dan kanan, atau pasang gambar sosial terpisah di plugin SEO Anda.

Google Discover punya saran gambar sendiri. Panduan Discover Google menyarankan gambar dengan lebar minimal 1200 px, total lebih dari 300.000 piksel, dengan rasio 16:9 seperti 1200 x 675. Gambar besar juga memerlukan pengaturan robots max-image-preview:large, yang ditambahkan WordPress secara bawaan sejak versi 5.7, kecuali situs diatur untuk meminta mesin pencari tidak mengindeksnya.

Cara mengubah ukuran featured image

Tempat Anda mengubahnya tergantung pada ukuran dan tema Anda.

Ukuran core (thumbnail, medium, large). Buka Pengaturan > Media lalu ubah lebar dan tingginya. Dokumentasi layar Pengaturan Media menjelaskan kolom-kolomnya, termasuk kotak centang crop untuk thumbnail.

Ukuran tema di tema klasik. Jangan edit tema induk, karena pembaruan tema akan menimpa perubahan Anda. Tambahkan nilai baru di functions.php milik child theme. Mendaftarkan ulang ukuran dengan nama yang sama akan menggantinya, dan setup child theme harus berjalan setelah setup tema induk:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

Prioritas 11 membuat kode ini berjalan setelah tema induk yang di-hook pada prioritas bawaan 10. Periksa kode tema induk dan sesuaikan jika tema induk memakai prioritas yang lebih besar.

Tema blok. Ubah ukuran gambar dan rasio aspek blok Gambar Unggulan di template Editor Situs. Tidak perlu kode, dan perubahannya berlaku untuk semua postingan yang memakai template itu.

Satu gambar, tanpa kode. Untuk memilih bagian yang dipertahankan crop pada satu gambar, buka gambar itu dari Media > Pustaka lalu klik Sunting Gambar. Crop ke rasio tema Anda (alat crop menerima rasio aspek seperti 16:9) atau ubah skalanya, lalu simpan. WordPress menerapkan perubahan ke semua ukuran gambar itu dan tetap menyimpan file aslinya, jadi Anda bisa membatalkannya nanti dengan opsi untuk mengembalikan gambar asli.

Regenerate thumbnail yang sudah ada

Ukuran yang diubah hanya berlaku untuk unggahan baru. Gambar yang sudah ada di pustaka media tetap memakai salinan lamanya sampai Anda membuatnya ulang. Perintah wp media regenerate melakukan hal itu:

wp media regenerate --yes

Opsi yang berguna dari dokumentasi WP-CLI:

• --image_size=hero-wide hanya membuat ulang ukuran itu. Ulangi flag-nya untuk beberapa ukuran.
• --only-missing membuat ukuran yang belum ada dan membiarkan file yang sudah ada, sehingga lebih cepat setelah menambah ukuran baru.
• --skip-delete mempertahankan file thumbnail lama. Pakai ini jika situs lain, newsletter atau feed menautkan langsung ke file tersebut.

Tanpa akses command line, plugin Regenerate Thumbnails dari direktori plugin WordPress.org melakukan hal yang sama dari dashboard. Buat backup dulu untuk pustaka yang besar, karena regenerasi menulis ulang banyak file.

Kesalahan yang sering terjadi

• Berhenti di 1200 x 630. Ukuran ini titik awal yang baik dan cocok untuk preview link, tetapi jika tema Anda memotong ke 16:9 atau persegi, sebagian gambar akan terpotong. Cek ukuran tema Anda sebelum mengunggah banyak gambar sekaligus.
• Mematikan ukuran yang dibuat otomatis untuk “mempertahankan file asli”. Jika tema tidak punya salinan yang lebih kecil, tema bisa memuat file penuh di setiap layar, yang memperlambat halaman di ponsel. Salinan yang diubah ukurannya ada justru untuk mencegah itu.
• Mengedit kode ukuran gambar tetapi melewatkan regenerasi. Kodenya bekerja, tetapi hanya untuk unggahan baru. Inilah sebabnya banyak orang mengira perubahan ukuran “tidak berpengaruh”.
• Mengubah ukuran di tema induk. Pembaruan tema berikutnya akan menghapusnya. Pakai child theme atau Editor Situs.

Jika gambar masih terlihat salah setelah ukuran dan rasionya cocok dan sudah di-regenerate, bandingkan nama file yang dimuat browser dengan ukuran yang menurut alat ukuran gambar seharusnya dibuat WordPress. Jika berbeda, sering kali ada plugin optimasi atau pengubah ukuran gambar dari CDN di antara WordPress dan pengunjung yang menyajikan versinya sendiri.