Foto Blur di Retina Tapi Tajam di Monitor 1080p? Image Size `Custom` Elementor Menyajikan Aset 1x

Pesan dari klien kali ini termasuk kategori yang bikin bingung: foto tim di situs company profile yang saya bangun terlihat "soft" di MacBook mereka, dan beberapa orang di kantornya melaporkan hal yang sama dari HP. Saya buka halaman yang sama di monitor eksternal 1080p saya: tajam, tidak ada masalah apa pun. Saya cek file aslinya di media library: foto studio resolusi tinggi, helai rambutnya kelihatan satu-satu. Jadi fotonya tajam, halamannya blur, dan kami berdua sama-sama benar. Itu kombinasi yang aneh, dan aneh biasanya berarti ada asumsi saya yang salah di suatu tempat.

Tersangka pertama saya: plugin optimasi gambar yang kompresinya terlalu agresif. Saya cek, kompresinya wajar. Tersangka kedua: CDN yang menyajikan varian lama. Bukan juga. Baru setelah itu saya buka DevTools dan hover elemen img-nya. Chrome menampilkan dua angka yang langsung menjawab semuanya: intrinsic size 400x400, rendered size 400x400. Di monitor 1080p saya itu match sempurna, satu piksel file untuk satu piksel layar. Tapi MacBook klien bukan layar 1x.

Kenapa ini terjadi

Di widget Image milik Elementor, saya menyetel Image Size ke Custom dan mengetik dimensi tampilnya persis: 400 x 400, untuk kartu tim yang memang dirender selebar 400px. Waktu itu terasa seperti keputusan yang benar dan hemat. Buat apa mengirim file yang lebih besar dari kotak yang menampilkannya?

Insting hemat itu justru seluruh masalahnya, karena dua hal.

Pertama, ukuran display bukan ukuran aset. Layar Retina dan hampir semua HP modern jalan di device pixel ratio 2x sampai 3x. Gambar yang menempati 400 CSS pixel butuh 800 sampai 1200 piksel fisik supaya tajam. File 400px saya cuma punya setengahnya, atau sepertiganya, jadi display meng-upscale dan hasilnya blur. Monitor 1080p saya DPR-nya 1x, makanya di meja saya semuanya terlihat baik-baik saja. Blur-nya nyata, cuma tidak kelihatan dari layar yang saya pakai untuk verifikasi.

Kedua, dan ini bagian yang lebih jahat: Custom size di Elementor menghasilkan tepat satu file. Tidak ada alternatif yang bisa dipilih browser. WordPress normalnya menyisipkan srcset berisi beberapa ukuran, dan browser di layar padat otomatis mengambil sumber yang lebih rapat. Dengan Custom, mekanisme itu mati total:

<!-- Image Size: Custom (400x400). One file, no srcset. -->
<img src="/wp-content/uploads/team-photo-400x400.jpg"
     width="400" height="400" alt="Team member">
 
<!-- Image Size: Large. WordPress keeps srcset in play. -->
<img src="/wp-content/uploads/team-photo-1024x1024.jpg"
     srcset="/wp-content/uploads/team-photo-300x300.jpg 300w,
             /wp-content/uploads/team-photo-768x768.jpg 768w,
             /wp-content/uploads/team-photo-1024x1024.jpg 1024w"
     sizes="(max-width: 480px) 100vw, 400px"
     width="1024" height="1024" alt="Team member">

Browser di MacBook itu sebenarnya mau menolong. Dia tahu DPR-nya 2x dan dengan senang hati akan mengambil file 800px kalau ditawari. Saya tidak menawarkan apa-apa.

Perbaikannya

Berhenti menyajikan file seukuran display. Saya ganti Image Size dari Custom ke ukuran terdaftar yang lebih besar, Large untuk kartu tim dan Full untuk gambar hero, lalu biarkan CSS yang membatasi kotak render-nya:

.team-card img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Dengan ukuran terdaftar, srcset dan sizes bawaan WordPress tetap jalan. Browser di layar 1x mengambil file kecil, browser di layar Retina mengambil yang rapat. Semua kebagian versi yang benar, dan saya tidak perlu menebak DPR siapa pun.

Kalau berat file benar-benar jadi perhatian, misalnya Large terasa boros untuk slot kecil, jangan kembali mengetik piksel display di widget. Daftarkan custom size yang proper, yaitu 2x dari slot-nya:

add_action( 'after_setup_theme', function () {
    // 2x asset for a 400px display slot
    add_image_size( 'card_photo_2x', 800, 800, true );
} );

Ukuran itu ikut muncul di dropdown Image Size Elementor. Lalu regenerate thumbnail supaya gambar lama ikut dibuatkan file barunya:

wp media regenerate --only-missing

Verifikasinya kembali ke DevTools: hover elemen img, bandingkan intrinsic size dengan rendered size. Di layar Retina, intrinsic seharusnya kira-kira 2x rendered. Kalau dua angka itu identik, kamu sedang menyajikan aset 1x, dan pengguna Retina kamu sedang melihat blur yang tidak kamu lihat.

Pelajaran

Ukuran display bukan ukuran aset. Kotak 400px butuh sumber 800px ke atas untuk layar modern.
Image Size Custom di Elementor membunuh srcset: satu file untuk semua layar.
Kalau ada yang terlihat "soft", cek intrinsic vs rendered di DevTools dulu sebelum menyalahkan kompresi.
Rancang pipeline aset dengan asumsi minimal DPR 2x untuk foto.

Dan satu kebiasaan baru: setiap kali klien bilang blur sementara layar saya bilang tajam, saya tidak lagi berdebat. Saya tanya dulu: kamu lihatnya dari layar apa?