Cegah WordPress Mengompres Gambar Anda di Kualitas 82%

WordPress meng-encode ulang setiap JPEG yang dibuatnya pada kualitas 82 dari skala 0–100. Nilai default itu ada di WP_Image_Editor::get_default_quality() dan berlaku untuk setiap turunan yang dipotong WordPress dari file yang Anda upload — thumbnail, medium, medium_large, large, dan setiap ukuran tambahan yang didaftarkan tema Anda. Untuk foto, 82 adalah kompromi yang masuk akal antara ukuran file dan artefak. Untuk screenshot, tangkapan UI, grafik, logo, dan apa pun yang punya teks tajam atau warna datar, 82 terlihat merusak: Anda akan mendapat mosquito noise merayap di sekeliling setiap huruf dan banding di gradasi yang mulus.

Untuk mengubahnya, tambahkan satu filter dan regenerate thumbnail Anda. Untuk memperbaiki screenshot secara khusus, jawaban yang lebih baik biasanya adalah dengan tidak menyerahkan JPEG ke WordPress sejak awal.

Dari mana sebenarnya angka 82 berasal

WordPress menurunkan default JPEG-nya dari 90 ke 82 sejak versi 4.5 (2016) sebagai optimasi bobot halaman. Nilai ini dikembalikan oleh get_default_quality() di wp-includes/class-wp-image-editor.php dan dibaca setiap kali editor aktif — WP_Image_Editor_Imagick jika hosting Anda punya Imagick, jika tidak WP_Image_Editor_GD — menulis file yang di-resize.

Detail pentingnya: 82 diterapkan per ukuran turunan, bukan sekali saja. Upload satu gambar, dan WordPress menjalankannya melalui encoder beberapa kali, melakukan re-kuantisasi pada kualitas 82 di setiap tahap. File asli yang Anda upload sendiri dibiarkan utuh jika ukurannya di bawah ambang big-image (2560px pada sisi terpanjang). Jika melebihi ambang itu, WordPress menghasilkan -scaled.jpg yang di-encode ulang pada kualitas 82 dan menyajikan file itu sebagai ukuran “full”. Jadi “gambar resolusi penuh saya terlihat baik tapi versi di halaman terlihat pudar” hampir selalu karena srcset memilih sub-ukuran kualitas-82 atau file -scaled.

Cara mengubah kualitasnya

Ada satu filter yang perlu di-hook. wp_editor_set_quality adalah yang modern dan kanonik — ia berjalan untuk JPEG dan WebP serta menerima tipe MIME sehingga Anda bisa bercabang:

add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
    if ( 'image/jpeg' === $mime_type ) {
        return 92; // up from 82
    }
    return $quality;
}, 10, 2 );

Letakkan ini di mu-plugin kecil (wp-content/mu-plugins/) atau plugin khusus situs. functions.php juga bisa, tapi Anda kehilangan pengaturan ini begitu Anda ganti tema.

Anda juga akan melihat filter lama jpeg_quality yang direkomendasikan. Filter itu masih berjalan (WordPress menerapkannya tepat setelah wp_editor_set_quality, khusus JPEG), tapi tidak ada alasan untuk meng-hook keduanya — wp_editor_set_quality mencakup semua yang dilakukan filter lama itu dan lebih banyak lagi.

Satu hal yang semua orang lupa: filter ini hanya memengaruhi gambar yang di-encode setelah filter aktif. Setiap thumbnail yang sudah ada di wp-content/uploads ditulis pada 82 dan akan tetap 82. Regenerate mereka:

wp media regenerate --yes

Jika Anda tidak menggunakan WP-CLI, plugin Regenerate Thumbnails melakukan hal yang sama melalui admin.

Sebelum Anda memutuskan sebuah angka, ada baiknya melihat apa yang sebenarnya dilakukan sebuah nilai kualitas terhadap gambar Anda alih-alih menebak. Tool WordPress JPEG quality kami meng-encode ulang sampel di browser pada setiap level kualitas sehingga Anda bisa melihat artefak muncul — ini membuat perbedaan antara 82, 90, dan 100 terlihat jelas pada sebuah screenshot dengan cara yang tak akan pernah bisa dilakukan oleh sebuah angka di file konfigurasi.

Perbaikan yang lebih baik untuk screenshot dan grafik datar

Menaikkan angka JPEG hanya mengobati gejalanya. Masalah sebenarnya dengan screenshot adalah JPEG merupakan codec yang salah untuknya. Kompresi DCT milik JPEG disetel untuk gradasi fotografis; ia hancur pada tepi keras hitam-di-atas-putih dari teks dan chrome UI, yang persis mengapa kualitas 82 terlihat jauh lebih buruk pada screenshot dibanding pada foto pantai.

Upload PNG saja. WordPress mempertahankan sub-ukuran PNG sebagai PNG, dan PNG bersifat lossless — filter kualitas tidak menyentuhnya, jadi tidak ada artefak pada ukuran apa pun, hanya resampling yang bersih. Untuk sebuah screenshot, PNG yang dioptimasi dengan baik sering kali lebih kecil daripada JPEG kualitas tinggi dari gambar yang sama, karena warna datar terkompresi dengan baik di PNG dan sangat buruk di JPEG.

Jika Anda ingin file lebih kecil dari format lossy tanpa kerusakan tepi milik JPEG, WebP adalah jalan tengahnya — tapi Anda tetap mengontrol kualitasnya melalui filter wp_editor_set_quality yang sama seperti ditunjukkan di atas, dengan bercabang pada image/webp.

Yang tidak boleh dilakukan

Jangan set kualitas ke 100 secara global. Ini adalah jawaban dengan vote tertinggi di separuh thread forum, dan itu keliru. JPEG kualitas 100 tidak lossless — ia masih melakukan kuantisasi — tapi ia membengkakkan setiap foto di situs Anda dengan margin besar tanpa keuntungan yang terlihat, menyeret turun LCP dan Core Web Vitals. Naikkan angka untuk format yang membutuhkannya, atau ganti format untuk grafik; jangan menghancurkan kompresi di seluruh situs.

Jangan edit class-wp-image-editor.php. Mengubah nilai return dari get_default_quality() di core akan berfungsi sampai wp core update berikutnya diam-diam menimpanya. Gunakan filter.

Jangan nonaktifkan ukuran gambar untuk “menghindari kompresi”. Mematikan pembuatan thumbnail tidak menghentikan re-encoding — ia merusak srcset responsif, sehingga browser mengunduh gambar ukuran penuh Anda di ponsel. Masalah yang berbeda, hasil yang lebih buruk.

Jangan berasumsi upload ulang memperbaiki gambar yang sudah ada. Jika Anda menyetel filter tapi melewati langkah regenerate, setiap turunan lama masih kualitas 82. Filter hanya berlaku ke depan.

Jangan salahkan file -scaled jika gambar Anda di bawah 2560px — jalur itu tidak pernah berjalan untuk mereka. Jika Anda memang mengalaminya dan ingin file asli yang utuh disajikan, itu adalah pengaturan terpisah; lihat menonaktifkan scaled images.

Masih terjebak?

Jika suatu ukuran tertentu masih terlihat salah setelah regenerate, pastikan file mana yang sebenarnya disajikan halaman — buka gambar di tab baru dan periksa apakah nama file-nya berakhir dengan sufiks dimensi (-1024x768.jpg) atau -scaled.jpg. Image sizes inspector menampilkan setiap turunan yang dihasilkan WordPress dari satu upload, sehingga Anda bisa melihat persis ukuran mana yang diserahkan srcset Anda ke browser dan berhenti men-debug file yang salah.