Mengatasi Serves Images With Low Resolution

Serves Images With Low Resolution [ Resolving Serves Images With Low Resolution ] adalah salah satu flag atau bendera yang dikerek pada audit dengan Lighthouse, yang membuat skor pada kategori Best Practices menjadi berkurang. Seberapa pun berkurangnya skor akan tetap ada perasaan tak enak.

Wajar jika webmaster atau pemilik blog menginginkan untuk mendapatkan skor sempurna di angka 100 pada audit Lighthouse di setiap kategori, selagi itu bisa dicapai. Faktanya angka sempurna pada setiap kategori memang bisa dicapai, meski perlu upaya tak mudah pada prosesnya.

Sependek panjangnya ingatan, munculnya bendera Serves Images With Low Resolution ini dahulu tak pernah muncul. Utamanya setelah saya menggunakan srcset pada image atau foto yang ada di blog. Fungsi srcset adalah agar browser mengunduh image dengan resolusi terendah, sesuai dengan ukuran layar gadget atau komputer yang digunakan.

Ini tentu dimaksudkan untuk memberi pengalaman yang baik kepada pengunjung. Oleh sebab semakin cepat blog dibuka setelah diklik tautnya, semakin senang pengunjung karena tak harus menunggu lama. Probabilitasnya tinggi untuk pengunjung menutup sebuah laman jika tak juga muncul setelah lebih dari 3-4 detik.

Contoh kode pada image dengan srcset yang saya gunakan selama ini adalah sebagai berikut,

Perhatikan pada kode srcset, yang tak lagi memuaskan bagi audit Lighthouse sehingga bendera peringatanpun dikerek. Adalah wajar jika parameter audit berubah dari waktu ke waktu sesuai dengan perkembangan, dan tentu dimaksudkan agar supaya kinerja website bisa menjadi lebih baik lagi.

Penambahan atribut "" pada srcset dilakukan oleh sebab blog ini menggunakan skrip lazyload dari lazysizes, yang dimaksudkan untuk mempercepat loading halaman blog.

Apa yang kemudian saya lakukan untuk mengatasi masalah flag Serves Images With Low Resolution Lighthouse adalah mengganti cara penulisan pada srcset dengan menggunakan skala, dengan layar terkecil digunakan sebagai basis skala 1.

Kode pada srcset setelah diubah akan menjadi seperti ini,

Atribut sizes="100vw" tidak diperlukan lagi sehingga dihapus. Setelah perubahan disimpan dan melakukan audit ulang Lighthouse, maka bendera tak lagi dikerek dan skor pun menjadi sempurna.

Diubah: Februari 06, 2021.
Label: Lighthouse, Tutorial
Bagikan ke: WhatsApp, Email. Print!.

Penulis:
Bambang Aroengbinang,
seorang penyusur jalan.
Traktir BA? Scan GoPay, atau via Paypal. GBU.