Gambar di WordPress: ukuran, format, dan pemuatan

Yang akan Anda capai

• mengunggah foto dengan ukuran yang tepat sejak awal;
• memahami apa yang dilakukan WordPress pada foto dan pengaturan apa saja yang tersedia;
• memakai WebP atau AVIF tanpa ada pengunjung yang melihat gambar hilang;
• menulis teks alternatif, yang berguna bagi Google maupun bagi orang yang tidak bisa melihat.

Yang dilakukan WordPress secara otomatis

• Salinan dalam beberapa ukuran. Untuk setiap foto yang diunggah, WordPress membuat beberapa salinan yang lebih kecil (thumbnail, sedang, besar), dan di halaman, browser memilih yang sesuai dengan layar.
• Memperkecil foto yang sangat besar. Foto yang lebar atau tingginya lebih dari 2560 piksel otomatis diperkecil menjadi 2560, dan file aslinya tetap tersimpan di server.
• Pemuatan tertunda. Gambar di bagian bawah halaman diberi loading="lazy": gambar baru diunduh saat pengunjung sampai di sana.
• WebP dan AVIF. Pustaka media menerima kedua format, jika library gambar PHP bisa memprosesnya. Jika muncul error saat mengunggah WebP atau AVIF, hubungi kami dengan menyebutkan versi PHP website Anda.

Langkah-langkah

A. Menyiapkan foto sebelum diunggah

1. Pilih lebar sesuai tempatnya di halaman. Untuk foto selebar layar, cukup 1920–2400 piksel; untuk foto di dalam teks, 1200; untuk thumbnail produk, 800–1000.
2. Simpan dalam bentuk terkompresi: JPEG dengan kualitas sekitar 80 atau, lebih baik lagi, WebP. Detail tentang format dan program ada di Gambar WebP dan AVIF: tampilan sama, kilobyte lebih sedikit.
3. Beri nama file yang jelas, dengan huruf kecil dan tanda hubung: cabinet-stomatologic-sala-tratament.webp, bukan IMG_4031.jpg. Nama ini muncul di alamat gambar.

B. Memeriksa pengaturan di Setelan » Media

4. Di WordPress, buka Setelan » Media (Settings » Media). Ada tiga ukuran: Thumbnail (Thumbnail), Sedang (Medium), dan Besar (Large). Biarkan nilai bawaannya, kecuali tema Anda meminta yang lain.
5. Jika tema atau page builder punya ukuran sendiri, ukuran tersebut ditambahkan di atas ketiganya. Setiap ukuran berarti satu salinan lagi dari setiap foto, jadi ruang disk yang terpakai bertambah.

C. Mengunggah foto dan mengisi teks alternatif

6. Di Media » Tambah Berkas Media (Media » Add Media File), unggah foto.
7. Isi Teks Alternatif (Alternative Text): satu kalimat singkat tentang apa yang terlihat, misalnya “Ruang perawatan klinik, dengan kursi dental”. Jangan menjejalkan kata kunci. Untuk foto yang murni dekoratif, biarkan kosong.
8. Pasang foto di halaman. Untuk gambar besar di bagian atas halaman, pastikan tidak dimuat tertunda: gambar itulah yang pertama dilihat pengunjung dan berpengaruh pada LCP (lihat Memahami Core Web Vitals: LCP, INP, dan CLS). Tema modern dan WordPress melakukannya sendiri untuk gambar pertama.

D. Membersihkan pustaka media

9. Di Media » Pustaka (Media » Library), beralih ke tampilan daftar dan urutkan berdasarkan tanggal. Foto yang diunggah berkali-kali atau yang dicoba tetapi tidak dipakai bisa dihapus.
10. Sebelum menghapus dalam jumlah banyak, buat backup website (tab “Backups” di Enhance). Foto yang dihapus dari pustaka hilang dari semua halaman yang memakainya.
11. Berapa ruang yang dipakai folder wp-content/uploads bisa dilihat di Berapa ruang yang terpakai dan apa yang memakainya.

Plugin optimasi gambar

Plugin optimasi otomatis mengompresi foto saat diunggah dan bisa membuat salinan WebP atau AVIF. Plugin ini berguna jika Anda mengunggah banyak foto atau jika beberapa orang mengisi konten website. Yang perlu diketahui sebelumnya:

• sebagian mengirim foto ke server mereka untuk diproses; baca penjelasannya di deskripsi plugin;
• sebagian punya batas gratis bulanan dan meminta langganan jika melebihinya;
• salinan WebP atau AVIF ditambahkan di samping file asli, jadi folder uploads bertambah besar.

Cara memilih plugin yang tepercaya: Plugin yang dibutuhkan website WordPress.

Jika ada kendala

• Saat mengunggah muncul “The uploaded file exceeds the upload_max_filesize directive”. File lebih besar dari batas yang diizinkan PHP website. Perkecil foto (langkah 1) atau naikkan batasnya (lihat Versi PHP dan pengaturan PHP).
• “Server tidak dapat memproses gambar” atau foto muncul tanpa thumbnail. Foto terlalu besar atau formatnya tidak bisa diproses server. Perkecil di bawah 2560 piksel, simpan sebagai JPEG atau WebP, lalu unggah ulang.
• Foto yang diunggah dari iPhone tidak tampil. iPhone secara bawaan menyimpan dalam format HEIC. Kirim dalam format JPEG (di iPhone: Pengaturan » Kamera » Format » Paling Kompatibel) atau konversikan terlebih dahulu.
• Foto tampak buram. Tema memakai ukuran yang lebih kecil dari tempatnya di halaman. Unggah foto dengan lebar yang sesuai atau perbesar ukuran Besar di Setelan » Media; foto lama tetap memakai salinan lama sampai Anda membuat ulang thumbnail-nya.
• Ruang disk penuh. Lihat Berapa ruang yang terpakai dan apa yang memakainya.