Gambar ‘Retina’ di Website Anda

Jika bisnis Anda bergantung pada kualitas gambar (misalnya fotografer, agensi desain, atau penyedia rendering visual), maka website dengan gambar double density bisa menjadi keunggulan kompetitif. Alasannya, pengunjung dengan layar HDPI atau “Retina” akan melihat kualitas gambar jauh lebih tajam. Namun, gambar double density berukuran 2 kali lebih lebar dan 2 kali lebih tinggi dari gambar standar, artinya ukurannya bisa 4 kali lebih besar.

Karena ukuran yang besar ini, gambar double density biasanya dihindari di website berperforma tinggi, sebab berisiko membuat website hingga 4 kali lebih lambat untuk dimuat. Bagi pengguna perangkat mobile dengan layar Retina, hal ini bisa menjadi bencana—mereka mungkin pergi ke website pesaing yang lebih cepat.

Apa yang bisa Anda lakukan?

Teknik Khusus

Semua website yang kami bangun menggunakan logo dan banyak ikon double density. Ini memungkinkan karena ikon dan logo dikompresi dengan hati-hati, serta disatukan ke dalam sprites agar dapat dimuat dengan sangat efisien tanpa memperlambat website. Kami juga menerapkan teknik khusus untuk menampilkan gambar besar double density hanya jika diperlukan.

Kompresi Besar

Anazet adalah contoh perusahaan yang memproduksi gambar foto-realistis untuk industri real-estate, sehingga sangat penting bagi mereka untuk menampilkan produk dengan kualitas terbaik. Kami mengambil gambar double density dan menyimpannya dalam versi terkompresi secara masif untuk ditampilkan di anazet.com. Jika sistem mendeteksi pengunjung menggunakan layar HDPI, maka yang dikirim adalah gambar double density terkompresi. Jika tidak, pengunjung hanya menerima gambar standar. Dengan metode ini, Anda dapat mengoptimalkan kualitas tampilan gambar sekaligus efisiensi pengiriman—baik untuk perangkat HDPI maupun non-HDPI.

Kompresi gambar membutuhkan perhitungan matematis yang kompleks, dan mungkin akan mengejutkan banyak orang bahwa sebuah gambar double density dapat dikompresi secara masif sehingga ukurannya hanya 40–80% lebih besar dibanding gambar standar. Namun, ketika ditampilkan dengan benar pada perangkat HDPI, gambar tersebut akan tampak memiliki kualitas jauh lebih tinggi daripada yang diperkirakan. Jadi, selama bagian lain dari website Anda tetap berperforma tinggi, Anda tetap bisa menyajikan gambar double density tanpa mengorbankan kecepatan website.

Cari Tahu Apakah Layar Anda HDPI

Jika Anda mengklik tombol pada kotak di bawah ini, sistem akan memberi tahu rasio piksel dari layar Anda saat ini. Jika nilainya 1.5 atau lebih, berarti layar Anda adalah HDPI dan Anda akan mendapat manfaat dari website yang mendukung HDPI serta menampilkan gambar double density.

Jika nilainya kurang dari 1.5, sayangnya layar Anda tidak dapat menampilkan manfaat gambar double density. Namun, jumlah pengunjung website Anda yang menggunakan layar HDPI terus bertambah—dan mereka akan melihat perbedaannya dengan jelas.

Tampilan ikon HDPI (Retina) jauh lebih tajam dibanding tampilan standar.

Apa Itu HDPI?

HDPI (High Dots Per Inch) adalah layar dengan kepadatan piksel sangat tinggi sehingga pikselnya hampir tidak terlihat. Hasilnya, teks dan gambar terlihat jauh lebih realistis—bahkan seolah-olah seperti cetakan berkualitas tinggi di atas kertas.

Apa Itu Retina & Double Density?

Retina adalah nama dagang yang digunakan oleh Apple untuk memasarkan perangkatnya dengan layar HDPI. Apple sudah memproduksi perangkat Retina cukup lama; salah satu yang pertama adalah iPad 4 tahun 2012, yang awalnya dipasarkan sebagai “iPad with Retina display”. Sejak itu, sebagian besar ponsel dari Sony, Samsung, dan produsen lain juga menggunakan layar HDPI, demikian pula dengan jumlah notebook PC yang semakin banyak dilengkapi teknologi ini.

Double density adalah teknik menempatkan dua kali lebih banyak piksel dalam lebar yang sama. Jadi, layar dengan 1000 piksel dalam satu garis kini punya 2000 piksel. Dalam konteks web, ini disebut rasio piksel.

Snippet Berguna untuk Developer

Sebagian besar browser modern dapat menampilkan kepadatan piksel dengan javascript ini:

window.devicePixelRatio;

Ketika gambar pop-up diminta, nilai rasio piksel dikirim sebagai parameter URL ke webserver untuk memutuskan apakah harus mengirim gambar double density. Di sisi browser, dimensi gambar latar kemudian dibagi berdasarkan rasio piksel. Misalnya, jika rasio piksel bernilai 2, maka server dapat mengirim gambar berukuran 2400 x 700px, namun ditampilkan dengan CSS yang ditunjukkan di bawah. Kode CSS ini akan memaksa browser untuk menggunakan 4 piksel detail di layar HDPI (Retina), di mana sebelumnya hanya digunakan 1 piksel.

#myImageContainer{background-size: 1200px 350px;}

Ada pertanyaan? Hubungi kami, kami siap membantu.