Sudah cukup lama sejak Retina ditampilkan di perangkat iOS pertama kali dirilis, tetapi masih ada banyak situs web di luar sana yang tidak Retina-siap, bahkan sebagai desainer dan pengembang telah mendapatkan fakta-fakta yang sepenuhnya responsif, dunia yang bersahabat.
Inilah yang perlu Anda ketahui tentang opsi-opsi untuk membuat pekerjaan Anda terlihat terbaik pada tampilan Retina yang semakin umum. Kabar baiknya adalah, meski tampaknya sulit, itu tidak terlalu rumit.
Mempersiapkan Situs Web Anda untuk Gambar Retina-Ready
Gandakan Kesenangan Anda
Sebenarnya ada sejumlah cara Anda dapat menguliti kucing ini, jadi untuk berbicara. Pertama, Anda perlu mengasah CSS Anda sedikit dan menyertakan versi gambar Anda pada dua kali lipat resolusi normal mereka. CSS akan menentukan gambar mana yang akan ditampilkan berdasarkan perangkat tempat situs Anda dilihat.
Pembaruan CSS yang Anda perlukan akan bervariasi tergantung pada browser target Anda, tetapi kabar baiknya adalah bahwa ini tidak terlalu rumit sekarang, dan semakin mudah. Kami akan meninggalkan pengkodean yang sebenarnya ke hari lain.
Satu hal yang perlu diingat: Anda mungkin ingin mengembangkan konvensi penamaan untuk gambar retina Anda sehingga Anda dapat dengan mudah mengasosiasikan dua versi gambar jika mereka perlu diedit nanti.
SVG
Pendekatan lain adalah SVG, atau Scalable Vector Graphics. Seperti namanya, ini terbatas pada grafik vektor dan tidak akan berfungsi dengan gambar fotografi, tetapi grafik SVG menghilangkan kebutuhan untuk dua file gambar untuk setiap grafik di situs Anda. Sekali lagi, ada variasi dari peramban ke peramban sehingga Anda akan ingin melakukan penelitian tambahan tergantung pada kebutuhan Anda.
Dan seperti yang disebutkan di atas, SVG mungkin tidak akan berfungsi sebagai satu-satunya solusi Anda di sebagian besar situs, kecuali situs tersebut tidak mengandung gambar jenis foto.
Brute Force
Tentu saja, Anda juga dapat dengan mudah membuang file beresolusi rendah dan hanya menyajikan gambar-gambar siap Retina. Kami hanya merekomendasikan ini untuk penggunaan dengan audiens yang sangat ditentukan. Jika Anda tahu bandwidth tidak akan menjadi masalah, ini mungkin adalah rute yang benar, tetapi ini tentu bukan praktik terbaik
Solusi Coding Lainnya
Di ujung lain dari upaya dan spektrum elegan adalah metode pengkodean yang bergantung pada beberapa perubahan sisi server (seperti entri file .htaccess) bersama dengan PHP dan pengkodean Javascript.
Ini mungkin pendekatan terbaik Anda, meskipun upaya yang dilakukan mungkin tidak sepadan untuk proyek yang lebih kecil.
Secara keseluruhan, pendekatan yang Anda lakukan akan bergantung pada audiens Anda, sifat visual situs Anda, dan tingkat keahlian teknis tim pengembangan Anda. Ada solusi yang bagus untuk hampir setiap situasi. Satu-satunya solusi yang buruk adalah mengabaikan tampilan Retina sepenuhnya.
Foto NASDAQ melalui Shutterstock
