Versi terbaru Safari dan Chrome menyertakan dukungan untuk spesifikasi yang diusulkan yang mempermudah situs untuk mendukung tampilan beresolusi tinggi.
Fungsi "set-gambar ()" adalah diusulkan pada bulan Februari oleh insinyur Safari Edward O'Connor, dan meskipun tetap tidak resmi didukung oleh rilis terbaru dari kedua browser.
Masalah tentang cara terbaik untuk mendukung rentang kerapatan piksel yang semakin meningkat di pasar diangkat dengan diperkenalkannya layar Retina di MacBook Pro Apple kisaran bulan Juni.
Apple masih memperlakukan web sebagai warga negara kelas dua di iOS dan Mac OS X
pengembang Mozilla Robert Accettura mengeluh setelah peluncuran perangkat Retina bahwa Apple "masih memperlakukan web sebagai warga negara kelas dua di iOS dan Mac OS X".
Kecuali jika Anda membuat aplikasi asli, sulit untuk menggunakan tampilan baru Apple dengan benar, bantahnya. “Mengapa solusi untuk penulis web tidak disertakan saat iPad 3 dikirimkan? Tampaknya konyol bahwa tidak ada API untuk berinteraksi dengan benar dengan salah satu fitur perangkat baru yang paling dipuji.
Dukungan untuk tampilan Retina lambat datang dari beberapa pengembang terbesar. Adobe memamerkan build Photoshop yang belum dirilis yang dioptimalkan untuk Retina pada peluncuran Apple, tetapi rilis tidak diharapkan hingga "akhir tahun ini". Microsoft mengatakan Outlook 2011 untuk Mac mendukung tampilan Retina, tetapi belum ada rencana yang diumumkan Word, Excel atau PowerPoint, dan rilis Office 2013 untuk Mac kemungkinan akan dilakukan beberapa bulan setelah PC meluncurkan.
Retina di web
Di web, Panduan Konten Web Safari Apple merekomendasikan penggunaan kueri media CSS3 untuk menargetkan perangkat dengan kepadatan tinggi. Rasio kerapatan piksel terdeteksi, dan aset beresolusi rendah atau tinggi dimuat untuk hasil terbaik.
Sekarang Safari 6 dan Chrome 21 telah dikirimkan dengan dukungan eksperimental untuk a spesifikasi kumpulan gambar baru yang diusulkan untuk CSS4, dikabarkan akan hadir di iOS6. Di sini, alih-alih memberi tahu browser aset apa yang akan dimuat pada perangkat tertentu, pengembang menyediakan opsi dan membiarkan browser memutuskan mana yang paling tepat dalam situasi tersebut:
pemilih {
background: image-set (url (foo-lowres.png) 1x,
url (foo-highres.png) 2x) pusat;
}
Dalam contoh di atas, “penulis mengatakan bahwa foo-highres.png adalah
dua kali lipat resolusi foo-lowres.png,” jelas Edward O’Connor. Browser yang mendukung image-set() “kemudian dapat menggunakan gambar 2x pada tampilan resolusi tinggi, dan gambar 1x pada tampilan resolusi rendah”. Aset tidak harus diambil untuk menentukan mana yang terbaik, jadi lebih sedikit bandwidth yang digunakan.
Dukungan resolusi rendah
Opsi tersebut dapat melampaui pemeriksaan resolusi sederhana, kata Jason Grigsby dari pengembang web seluler Awan Empat.
“Di masa mendatang, saya berharap seseorang yang menggunakan perangkat berdensitas tinggi dengan koneksi lambat dapat memberi tahu browser bahwa mereka hanya menginginkan gambar beresolusi rendah,” katanya. “Akan lebih baik jika browser bisa pintar tentang gambar apa yang akan digunakan berdasarkan kecepatan jaringan saat ini.”
Spesifikasi kumpulan gambar belum resmi, dan Grigsby memperingatkan agar tidak menggunakannya di situs langsung, karena dapat berubah di masa mendatang. “Jadi jika Anda memiliki cara untuk mengubahnya dengan mudah di masa mendatang, mungkin masuk akal untuk berhati-hati dan mulai menggunakannya,” jelasnya. “Jika tidak, pertimbangkan untuk menggunakannya di tempat yang tidak terlalu kritis di mana Anda dapat bereksperimen dengan teknologi baru.”
