Format gambar terbaik untuk WordPress adalah WebP untuk foto dan grafik, dengan JPG dan PNG sebagai fallback otomatis, dan SVG untuk logo dan ikon. WordPress menguasai sebagian besar web, dan gambar biasanya merupakan hal terberat di halaman mana pun yang dilayaninya, sehingga format yang Anda unggah secara langsung menentukan seberapa cepat situs Anda dimuat dan seberapa baik peringkatnya. WordPress menangani banyak hal untuk Anda, menghasilkan berbagai ukuran untuk setiap unggahan, tetapi WordPress tidak akan memilih format yang ideal kecuali Anda mengaturnya. Panduan ini mencakup format mana yang digunakan, cara WordPress memproses gambar, serta pengaturan dan plugin yang menjaga kecepatan situs WordPress.

Mengapa format gambar sangat penting di WordPress

Pada halaman WordPress pada umumnya, gambar menyumbang sebagian besar byte yang diunduh pengunjung. Artinya format gambar adalah faktor terbesar pada kecepatan halaman, dan kecepatan halaman dimasukkan langsung ke Core Web Vitals, yang digunakan Google sebagai sinyal peringkat. Sebuah tema bisa saja ramping dan hostingnya cepat, tetapi halaman yang diisi dengan JPG berukuran besar masih akan dirayapi. Memilih format yang efisien dan membiarkan WordPress menyajikan versi dengan ukuran yang sesuai adalah pengoptimalan dengan dampak tertinggi yang dapat dilakukan sebagian besar situs, dan tidak memerlukan biaya apa pun selain sedikit pengaturan.

Bagaimana WordPress menangani unggahan gambar

Saat Anda mengunggah gambar, WordPress tidak hanya menyimpannya. Itu menghasilkan beberapa salinan yang diubah ukurannya secara otomatis, thumbnail, medium, large, dan full, sehingga dapat menyajikan ukuran yang sesuai dengan konteks masing-masing. Itu juga membangun markup srcset responsif sehingga browser memilih ukuran yang tepat untuk setiap perangkat. Ini hebat, tetapi berfungsi dari apa pun yang Anda unggah, jadi dokumen asli 5000 piksel menghasilkan salinan yang besar dalam berbagai ukuran. Mengunggah dokumen asli berukuran wajar dan terkompresi secara efisien berarti setiap versi yang dihasilkan juga ramping.

WebP: default modern

WebP adalah format untuk distandarisasi. Ini menghasilkan file 25 hingga 35% lebih kecil dari JPG dengan kualitas yang sama, mendukung transparansi seperti PNG, dan kini didukung oleh semua browser saat ini. WordPress telah mendukung unggahan WebP sejak versi 5.8, dan dengan plugin yang tepat, WordPress dapat menyajikan versi WebP dari JPG dan PNG Anda yang ada secara otomatis, kembali ke versi asli untuk browser apa pun yang tidak dapat menampilkannya. Memindahkan perpustakaan media ke WebP seringkali merupakan satu-satunya keuntungan kecepatan terbesar yang bisa diperoleh situs WordPress.

JPG dan PNG sebagai cadangan

WebP tidak berarti meninggalkan format lama. JPG tetap menjadi alternatif yang aman untuk foto dan PNG untuk grafik yang memerlukan transparansi, dan plugin pengoptimalan yang baik mempertahankan versi aslinya sehingga browser apa pun yang tidak memiliki dukungan WebP tetap mendapatkan gambar yang berfungsi. Dalam praktiknya, Anda mengunggah JPG atau PNG seperti biasa dan plugin menghasilkan dan menyajikan WebP di sampingnya, mengirimkan file yang lebih kecil jika memungkinkan. Ini memberi Anda penghematan WebP tanpa risiko kompatibilitas apa pun, itulah sebabnya ini merupakan pengaturan yang direkomendasikan daripada hanya WebP saja.

SVG untuk logo dan ikon

Untuk logo dan ikon antarmuka Anda, SVG mengalahkan format raster apa pun. Itu benar vektor, sehingga tetap tajam pada setiap kepadatan layar dari satu file kecil. WordPress tidak mengizinkan unggahan SVG secara default karena alasan keamanan, karena SVG dapat berisi skrip, jadi Anda mengaktifkannya dengan plugin yang membersihkan file saat diunggah. Setelah diaktifkan, logo yang disajikan sebagai SVG akan lebih kecil dan lebih tajam dibandingkan logo PNG dan tidak memerlukan banyak ukuran untuk dibuat. Cadangan SVG untuk logo, ikon, dan grafik sederhana, bukan foto.

Memilih ukuran gambar yang tepat

WordPress menghasilkan beberapa ukuran, tetapi Anda mengontrol dimensinya. Atur ukuran besar hingga tidak lebih luas dari area konten Anda, seringkali sekitar 1200 hingga 1600 piksel, jadi gambar dengan lebar penuh tidak terlalu besar. Mengunggah foto 4000 piksel ketika kolom konten Anda lebarnya 800 piksel akan membuang-buang bandwidth bahkan setelah WordPress diubah ukurannya, karena salinan terbesar yang dihasilkan masih terlalu besar. Cocokkan ukuran gambar terdaftar Anda dengan tata letak tema sebenarnya, dan setiap gambar yang disajikan situs akan tetap proporsional dengan tampilannya.

Plugin kompresi dan pengoptimalan

Plugin pengoptimalan mengotomatiskan seluruh saluran. Pilihan populer kompres setiap unggahan, buat versi WebP, dan dapat menghapus metadata yang tidak diperlukan, semuanya tanpa Anda menyentuh gambar dengan tangan. Banyak juga yang mengoptimalkan perpustakaan Anda yang ada secara massal, mengonversi akumulasi JPG dan PNG selama bertahun-tahun ke WebP dalam sekali jalan. Beberapa memindahkan pemrosesan ke server mereka sendiri untuk menghemat hosting Anda. Apa pun yang Anda pilih, efeknya sama: gambar muncul di halaman dengan kompresi dan format terbaik secara otomatis, yang jauh lebih dapat diandalkan daripada mengingat untuk mengoptimalkan setiap gambar secara manual.

Lambat memuat gambar

Pemuatan lambat menunda gambar hingga pengunjung menggulir di dekatnya, sehingga pemuatan awal laman hanya mengambil apa yang langsung terlihat. WordPress mengaktifkan pemuatan lambat secara default pada gambar paro bawah, menambahkan atribut memuat secara otomatis. Ini mempercepat pengecatan pertama secara nyata pada halaman dengan banyak gambar. Satu-satunya pengecualian adalah gambar paruh atas terbesar Anda, sering kali gambar pahlawan, yang harus dimuat dengan cepat sehingga tidak menunda metrik Cat Konten Terbesar. Sebagian besar plugin pengoptimalan memungkinkan Anda mengecualikan gambar tersebut dari pemuatan lambat dengan satu pengaturan.

Menghapus metadata

Foto membawa metadata, model kamera, lokasi GPS, profil warna, yang jarang dibutuhkan situs web dan menambah bobot. Menghapus metadata ini akan menyusutkan setiap file tanpa perubahan yang terlihat, dan sebagian besar plugin pengoptimalan melakukannya sebagai bagian dari kompresi. Menghapus data GPS juga memiliki keuntungan privasi, karena Anda mungkin tidak ingin mempublikasikan tempat pengambilan foto. Satu-satunya metadata yang layak disimpan adalah profil warna jika akurasi warna penting. Jika tidak, menghapusnya adalah pengurangan ukuran yang gratis dan tidak terlihat di seluruh perpustakaan.

Pengaturan gambar WordPress yang direkomendasikan

Gabungkan semuanya dan pengaturannya mudah. Daftarkan ukuran gambar yang sesuai dengan tata letak tema Anda. Instal plugin pengoptimalan yang mengompresi unggahan, menghasilkan dan menyajikan WebP dengan fallback, dan menghapus metadata. Aktifkan SVG yang sudah disanitasi untuk logo dan ikon Anda. Pertahankan pemuatan lambat default WordPress, tetapi muat gambar pahlawan Anda dengan penuh semangat. Kemudian cukup unggah dokumen asli berukuran wajar dan biarkan pipeline melakukan sisanya. Dengan adanya hal ini, setiap gambar di situs akan dikompres, diukur dengan benar, dan disajikan dalam format terbaik secara otomatis, dan situs akan tetap cepat seiring dengan berkembangnya perpustakaan.

AVIF: itu

langkah selanjutnya di luar WebP

AVIF adalah format terbaru yang efisien, dan WordPress juga mendukungnya. Itu memampatkan bahkan lebih kecil dari WebP, seringkali 20% lebih kecil lagi, dengan kualitas visual yang sama, dengan dukungan transparansi dan warna lebar. Dukungan browser kini luas namun sedikit tertinggal dari WebP, sehingga AVIF berfungsi paling baik jika disajikan dengan cadangan WebP atau JPG. Beberapa plugin pengoptimalan dapat menghasilkan AVIF secara otomatis bersama WebP. Untuk situs yang mengejar beberapa kilobyte terakhir dari setiap gambar, AVIF layak untuk diaktifkan, meskipun WebP tetap menjadi format utama yang aman untuk saat ini.

Perpustakaan media dan tata graha

Seiring waktu, perpustakaan media WordPress dipenuhi dengan gambar yang tidak digunakan, versi lama, dan duplikat yang membuat cadangan membengkak dan mengacaukan admin. Membersihkan media yang tidak terpakai secara berkala membuat perpustakaan tetap dapat dikelola dan cadangan Anda ramping. Plugin dapat mengidentifikasi gambar yang tidak dilampirkan pada postingan atau halaman mana pun, meskipun ada baiknya meninjau ulang sebelum menghapusnya, karena beberapa gambar digunakan dengan cara yang tidak dapat dideteksi oleh pemindaian. Pustaka media yang rapi lebih mudah digunakan dan, setelah dioptimalkan, memberikan gambaran yang jelas tentang seberapa banyak ruang yang sebenarnya ditempati oleh gambar Anda.

Membuat ulang thumbnail setelah perubahan tema

Saat Anda mengganti tema atau mengubah ukuran gambar terdaftar, unggahan yang ada masih memiliki ukuran lama yang dihasilkan. Pembuatan ulang thumbnail akan membangun kembali setiap ukuran dari aslinya untuk mencocokkan dimensi baru, yang dilakukan plugin khusus secara massal di seluruh perpustakaan. Lewati ini dan gambar dapat tampak melebar atau disajikan dengan ukuran yang salah berdasarkan tema baru. Ini adalah langkah satu kali setelah perubahan apa pun pada ukuran gambar Anda, dan menjalankannya akan menjaga seluruh perpustakaan tetap konsisten dengan cara tema saat ini menampilkan gambar.

Pengiriman CDN untuk gambar

Jaringan pengiriman konten mempercepat pengiriman gambar dengan menyajikan file dari server di dekat setiap pengunjung. CDN menyimpan gambar Anda dalam cache di lokasi edge di seluruh dunia, sehingga pembaca yang jauh dari host Anda tetap mendapatkan gambar dengan cepat. Banyak plugin pengoptimalan dan caching WordPress mengintegrasikan CDN, dan beberapa CDN khusus gambar juga mengonversi dan mengubah ukuran dengan cepat, menangani format dan dimensi secara otomatis. Untuk situs dengan audiens global atau lalu lintas padat, CDN menghilangkan pengiriman gambar sebagai hambatan dan pada saat yang sama menghilangkan beban dari server asal Anda.

Gambar unggulan dan pratinjau sosial

Gambar unggulan setiap postingan memiliki tugas ganda: muncul di tema Anda dan, melalui tag Open Graph, sebagai pratinjau saat postingan dibagikan. Atur gambar unggulan pada ukuran yang sesuai untuk pratinjau sosial, sekitar 1200 kali 630, sehingga tautan yang dibagikan terlihat tajam di umpan. Plugin SEO biasanya memetakan gambar unggulan ke tag Open Graph secara otomatis. Melakukan hal ini dengan benar berarti setiap postingan yang dibagikan menampilkan gambar yang bersih dan berukuran tepat, bukan thumbnail yang dipotong atau tidak sama sekali.

Menguji kinerja gambar Anda

Setelah mengoptimalkan, ukur hasilnya. Alat seperti PageSpeed Insights melaporkan masalah terkait gambar, menandai gambar berukuran besar, format modern tidak ada, dan gambar tanpa dimensi yang menyebabkan perubahan tata letak. Mereka terkait langsung dengan Core Web Vitals, sehingga saran mereka sesuai dengan apa yang diukur oleh Google. Menjalankan pengujian sebelum dan sesudah proses pengoptimalan menunjukkan dengan tepat seberapa cepat halaman tersebut berkembang dan menyorot gambar apa pun yang masih menghambatnya. Perlakukan laporan ini sebagai daftar periksa untuk menghilangkan beban terakhir dari gambar Anda.

Kesalahan umum gambar WordPress

Beberapa kebiasaan memperlambat situs WordPress secara diam-diam. Mengunggah gambar kamera resolusi penuh, melewatkan kompresi, dan tidak mengaktifkan WebP adalah yang paling umum, masing-masing meninggalkan file besar sedangkan file kecil bisa digunakan. Penyebab lainnya termasuk lupa mengatur dimensi gambar, yang menyebabkan perubahan tata letak, dan menggunakan plugin yang lambat dan banyak fitur yang menambah bobot daripada menghemat. Semua ini mudah diperbaiki dengan pengaturan di atas. Menghindarinya akan membuat situs WordPress tetap cepat seiring pertumbuhannya, dibandingkan melihatnya lambat dari tahun ke tahun seiring dengan terisinya perpustakaan.

Apa format gambar terbaik untuk WordPress?

WebP untuk foto dan grafik, dengan fallback JPG dan PNG, dan SVG untuk logo. File WebP berukuran 25 hingga 35% lebih kecil dari JPG dengan kualitas yang sama dan setiap browser saat ini mendukungnya.

Apakah WordPress mendukung WebP?

Ya, sejak WordPress 5.8. Anda dapat mengunggah WebP secara langsung, dan plugin pengoptimalan dapat menyajikan versi WebP dari JPG dan PNG yang ada secara otomatis dengan fallback.

Bisakah saya mengunggah file SVG ke WordPress?

Bukan secara default, untuk alasan keamanan. Sebuah plugin yang membersihkan SVG saat diunggah mengaktifkannya dengan aman, setelah itu logo dan ikon yang disajikan sebagai SVG lebih kecil dan lebih tajam daripada PNG.

Apakah saya memerlukan plugin pengoptimalan gambar?

Ini sangat disarankan. Sebuah plugin memampatkan unggahan, menghasilkan WebP, dan menghapus metadata secara otomatis, yang jauh lebih dapat diandalkan dibandingkan mengoptimalkan setiap gambar secara manual.

Haruskah saya mengubah ukuran gambar sebelum diunggah ke WordPress?

Ya. Unggah tidak lebih luas dari area konten Anda, seringkali 1200 hingga 1600 piksel. Dokumen asli yang sangat besar membuat setiap ukuran yang dihasilkan WordPress juga menjadi terlalu besar.

Apakah WordPress mendukung AVIF?

Ya. AVIF mengompresi sekitar 20% lebih kecil dari WebP dengan kualitas yang sama, dan beberapa plugin pengoptimalan menghasilkannya secara otomatis. Sajikan dengan cadangan WebP atau JPG untuk dukungan browser penuh.

Haruskah saya menggunakan CDN untuk image WordPress?

Untuk situs global atau dengan lalu lintas tinggi, ya. CDN menyimpan gambar dalam cache di lokasi edge di seluruh dunia, sehingga pengunjung jauh mendapatkannya dengan cepat dan memuat dari server asal Anda.

Mengapa gambar saya terlihat salah setelah mengganti tema?

Karena unggahan yang ada tetap mempertahankan ukuran lama yang dihasilkan. Pembuatan ulang thumbnail akan membangun kembali setiap ukuran dari aslinya untuk mencocokkan dimensi tema baru.

Haruskah saya memuat gambar WordPress dengan lambat?

Ya dan WordPress mengaktifkan pemuatan lambat secara default pada gambar di paro bawah. Tetap aktifkan, tetapi muat gambar pahlawan utama Anda di paruh atas dengan penuh semangat agar tidak menunda Cat Konten Terbesar.