Blok media WordPress adalah “senjata utama” saat Anda ingin membuat halaman dengan konten visual. Konten ini bisa berupa menampilkan foto portofolio sampai menyematkan video demo tanpa membuat layout berantakan. Di WordPress Block Editor, semua elemen seperti gambar, galeri, dan embed video pada dasarnya diperlakukan sebagai blok yang bisa Anda atur satu per satu.
Pada kesempatan kali ini, kami akan membahas cara memakai blok media dengan rapi sekaligus menjaga performa website, karena file media sering jadi penyebab halaman terasa berat. Anda akan mendapatkan panduan praktis untuk Image, Gallery, Cover, serta cara embed video di block editor, plus workflow dan checklist sebelum publish.
Cara Penggunaan Blok Media WordPress
Blok media di WordPress umumnya dipakai untuk tiga tujuan: memperjelas pesan konten, mempercantik layout, dan membantu pembaca untuk cepat menangkap konteks lewat visual. Karena media tersimpan di Media Library, yang harus diperhatikan adalah konsistensi penamaan, alt text, dan ukuran file karena akan sangat memengaruhi kerapian.
Sebelum masuk ke tiap blok, biasakan memilih pendekatan “konten dulu, styling belakangan” agar struktur tetap stabil meski tema berubah. Lalu, pastikan setiap media yang ditambahkan memang punya fungsi (bukan sekadar dekorasi) supaya halaman tidak “ramai” tanpa arah.
Langkah-langkah Menambahkan Media dari Media Library
- Buka halaman/post di Block Editor, lalu klik tombol tambah blok (+) dan pilih blok media yang dibutuhkan (misalnya Image atau Gallery).
- Pada blok tersebut, pilih opsi Media Library untuk memakai file yang sudah pernah Anda unggah.
- Cari file yang diinginkan, klik Select, lalu pastikan preview tampil sesuai posisi yang Anda mau.
- Klik media tersebut untuk membuka pengaturan blok di sidebar, lalu isi Alt Text (khusus gambar) dan atur ukuran/align bila perlu.
- Simpan draft dan Preview untuk memastikan tampilan front-end sesuai tema (karena hasil akhir bisa dipengaruhi CSS tema).
Image (Alt Text, Size, Style)
Jika fokus Anda adalah pada bagaimana cara pakai image block, maka pastikan penggunan alt text pada media sudah tepat. Fungsi alt Text biasanya adalah untuk aksesibilitas dan juga membantu konteks gambar (termasuk untuk kebutuhan SEO on-page).
Untuk ukuran, hindari upload gambar yang besar jika tampilnya hanya selebar kolom konten. Ini hanya menambah beban halaman tanpa manfaat visual.
WordPress juga biasanya membuat beberapa ukuran turunan (thumbnail/medium/large) dan pengaturannya bisa dipengaruhi setelan Media di dashboard. Pastikan juga optimasi gambar Anda sudah benar.
Untuk style, gunakan pengaturan blok (alignment, width, dan style yang tersedia) secukupnya, lalu biarkan tema mengurus konsistensi global. Jika Anda perlu “style khusus per halaman”, lakukan seperlunya karena terlalu banyak variasi akan membuat maintenance desain jadi berat.
Tips Praktis Agar Image Block Tetap Rapi
- Gunakan nama file yang relevan sebelum upload agar Media Library tidak jadi “gudang acak”.
- Isi caption hanya jika memang membantu pembaca, bukan sekadar mengulang judul.
- Uji di mobile melalui Preview, karena alignment yang terlihat aman di desktop bisa bergeser di layar kecil.
Gallery
Gallery block paling cocok saat Anda ingin menampilkan beberapa foto sekaligus dengan ritme visual yang konsisten (misalnya dokumentasi proyek, before-after, atau step-by-step). Dibanding menumpuk banyak image block satu per satu, gallery block biasanya lebih cepat ditata karena grid-nya sudah disiapkan oleh blok.
Agar galeri tidak terasa “berat”, prioritaskan kualitas yang relevan dengan ukuran tampilnya, bukan kualitas maksimal untuk semua gambar. Selain itu, pastikan urutan foto mendukung alur konten. Misalnya dari overview ke detail, supaya galeri terasa seperti narasi, bukan sekadar album.
Catatan: jika Anda menghapus file dari Media Library, media itu bisa ikut hilang dari konten yang masih memakainya, jadi lakukan “bersih-bersih” media dengan hati-hati. Jika ingin aman, lakukan audit pemakaian file terlebih dahulu sebelum menghapus media lama.
Cover untuk Hero Section
Cover block sering dipakai untuk membuat hero section sederhana: satu area besar dengan background image dan teks overlay. Kalau Anda butuh “cover block” untuk header landing page, pastikan kontras teks terbaca (pakai overlay yang biasanya tersedia di pengaturan blok).
Pilih gambar yang punya ruang kosong agar teks tidak menabrak objek utama, dan Anda tidak perlu cropping. Untuk performa, jangan jadikan cover sebagai alasan mengunggah gambar beresolusi terlalu tinggi. Ukur sesuai kebutuhan layout yang benar-benar akan ditampilkan.
Karena cover sering jadi elemen pertama yang terlihat, lakukan preview di beberapa ukuran layar agar teks tidak terpotong dan fokus visual tetap jelas. Jika Anda memiliki sedikit pengetahuan tentang CSS, Anda bisa memastikan container padding dengan menambahkan beberapa baris kode agar menyesuaikan dengan tinggi cover.
Embed Video & Audio
Untuk “embed video di block editor”, pendekatan yang paling praktis biasanya: tempel URL video (misalnya YouTube/Vimeo) dan WordPress akan menyematkannya secara otomatis (oEmbed) tanpa perlu upload file video ke server. Cara ini membantu menghemat bandwidth dan storage server, karena video streaming ditangani platform video.
Jika Anda memang perlu audio, prinsipnya mirip: pertimbangkan embed dari layanan yang sesuai daripada meng-host file besar sendiri, kecuali Anda siap dengan konsekuensi performa dan bandwidth. Setelah video/audio tampil, cek lagi spacing dan lebar konten karena beberapa tema mengubah rasio atau padding elemen embed.
Apabila Anda ingin menggunakan CDN sebagai hosting penyimpanan media, kami menyarankan untuk menggunakan Bunny CDN. Alasannya adalah karena memiliki harga yang relatif murah dibandingkan platform lainnya dengan kualitas yang bagus. Bahkan PrestoPlayer, plugin untuk menampilkan video, juga memiliki integrasi built-in dengan Bunny CDN.
Optimasi Ukuran/Format Media
Optimasi gambar WordPress sebaiknya dimulai sebelum upload: kompres, resize, dan pilih format yang sesuai (misalnya JPEG untuk foto, PNG untuk grafis tertentu, atau WebP jika workflow Anda sudah mendukung). Jika Anda menaruh banyak media, pertimbangkan juga lazy load karena WordPress bisa menerapkan lazy loading pada gambar sehingga beban awal halaman lebih ringan.
Untuk video, rekomendasi umumnya adalah embed (bukan upload langsung) agar situs tidak terbebani file besar dan proses streaming. Untuk PDF atau file lain, kompres bila memungkinkan dan pikirkan apakah file tersebut perlu ditaruh di dalam konten atau cukup sebagai link. Anda bisa menggunakan plugin seperti EWWW Image Optimizer yang mendukung kompresi file PDF.
Pelajari langsung tentang blok media WordPress langsung di artikel resmi WordPress. Di sana Anda dapat membaca semua fitur-fitur yang disediakan oleh WordPress dan bisa dengan bebas mengembangkannya sesuai kebutuhan.
Workflow End-to-End
Workflow berikut membantu Anda bekerja cepat saat mendesain halaman yang banyak gambar dan video dengan tetap memastikan performa website tetap terjaga. Urutannya dibuat agar Anda tidak bolak-balik edit media setelah layout jadi.
- Siapkan aset: rapikan nama file, resize secukupnya, dan tentukan mana yang harus jadi hero/cover vs konten biasa.
- Bangun struktur konten: heading, paragraf, dan urutan section.
- Tambahkan media per section: image block untuk single visual, gallery block untuk kumpulan foto, cover block untuk hero, lalu embed video di block editor untuk demo.
- Isi detail: alt text, caption (jika perlu), dan cek pengaturan ukuran/align di sidebar.
- Preview: cek desktop dan mobile, lalu revisi yang mengganggu keterbacaan atau membuat layout “meloncat”.
- Finalisasi performa: pastikan tidak ada media yang terlalu besar dan hindari upload video langsung ke hosting jika tidak wajib.
Checklist Optimasi Media WordPress
- Pastikan setiap gambar punya Alt Text yang deskriptif (bukan sekadar mengulang keyword).
- Hindari upload gambar terlalu besar. Sesuaikan dimensi dengan ukuran yang akan ditampilkan.
- Gunakan format yang tepat (foto atau grafis), dan kompres sebelum upload.
- Untuk galeri, cek apakah loading terasa berat dan pertimbangkan dampak jumlah gambar.
- Untuk video, prioritaskan embed daripada upload file video ke server.
- Preview di mobile untuk memastikan align/spacing aman dan teks di cover tetap terbaca.
- Jangan menghapus media dari Media Library sebelum yakin tidak dipakai di halaman lain.
- Setelah update media besar-besaran, cek ulang halaman penting (home/landing) untuk memastikan tidak ada elemen yang pecah.
Kesalahan Umum dalam Penggunaan Media
Kesalahan yang paling sering terjadi adalah mengunggah gambar terlalu besar “karena takut pecah”, padahal yang tampil di halaman sebenarnya kecil. Ini membuat halaman lebih berat dan memperlambat pengalaman baca, terutama pada koneksi seluler.
Kesalahan berikutnya adalah mengosongkan alt text atau mengisinya dengan teks yang tidak relevan, sehingga gambar kehilangan konteks dan tidak membantu aksesibilitas. Ada juga kebiasaan mengupload video langsung ke hosting, padahal embed dari platform video biasanya lebih efisien untuk resource situs.
Terakhir, banyak halaman jadi berantakan karena media ditambahkan sebelum struktur konten matang, sehingga Anda “mengejar layout” dengan banyak tweak kecil yang akhirnya sulit dirawat. Biasakan mengunci struktur konten dulu, baru menempelkan media secara bertahap.
Solusi untuk Penggunaan Media yang Baik
Mulailah dari standar internal sederhana: ukuran maksimal gambar untuk konten, format file yang disarankan, dan aturan penamaan file. Dengan standar ini, Media Library lebih mudah dikelola dan Anda tidak perlu menebak-nebak aset mana yang pantas dipakai ulang.
Untuk kualitas tampilan, gunakan pengaturan blok dan fitur milik tema “seperlunya”, lalu gunakan preview untuk validasi. Jika Anda butuh konsistensi desain lintas halaman, lebih baik membuat pattern/section yang seragam, daripada mengatur gaya media secara manual di setiap halaman.
Untuk performa, tempatkan video sebagai embed dan lakukan optimasi gambar, bukan sekadar pelengkap konten. Setelah halaman rapi, lakukan cek ulang media yang paling besar ukurannya karena biasanya itu penyebab utama halaman terasa lambat.
Contoh Kasus dan Cara Mengatasinya
Jika gambar terlihat blur, penyebab umumnya adalah Anda menampilkan ukuran kecil (misalnya thumbnail/medium) pada area yang butuh ukuran lebih besar, atau optimasi gambar di-resize terlalu kecil sebelum upload. Solusinya: ganti dengan versi yang dimensi tampilnya sesuai, lalu cek pengaturan ukuran pada image block dan preview di front-end.
Jika video tidak tampil, biasanya URL embed tidak dikenali, koneksi ke platform video terhambat, atau tema memengaruhi lebar kontainer sehingga embed “kolaps”. Coba tempel ulang URL di blok embed, pastikan URL publik, lalu uji di preview dan cek apakah ada konflik tampilan dari tema/plugin tertentu.
Jika layout berantakan (jarak antar elemen tidak konsisten atau media mendorong konten lain), penyebabnya sering karena kombinasi alignment, width, dan style blok yang “tumpang tindih”. Reset pengaturan blok ke default, rapikan struktur section, lalu atur ulang alignment satu per satu sambil preview agar tahu perubahan mana yang paling berpengaruh.
Lanjutkan membaca artikel lain di blog kami untuk memperdalam optimasi performa dan pengelolaan konten, khususnya di Blocks Editor atau Gutenberg.
Kesimpulan
Blok media yang dipakai dengan benar membuat halaman lebih komunikatif, lebih menarik, dan lebih nyaman dibaca tanpa harus mengorbankan performa. Kuncinya ada pada tiga hal: pilih blok yang tepat (Image/Gallery/Cover/Embed), rapikan detail seperti alt text dan ukuran, lalu validasi lewat preview.
Langkah berikutnya, terapkan workflow dan checklist di atas pada 1 halaman dulu (misalnya landing page atau artikel pilar), lalu jadikan itu standar untuk halaman-halaman berikutnya. Jika ada yang perlu didiskusikan, silakan tuliskan komentar Anda di bawah ini. Anda juga bisa langsung menghubungi kami di halaman kontak.