Apa praktik terbaik yang diikuti orang sehubungan dengan gambar di viewports yang lebih besar?
Peramban ukuran apa yang harus kami desain? Berarti bagaimana kita menangani monitor resolusi tinggi dan berapa% pengguna yang memiliki layar besar?
Bagaimana cara terbaik menangani ketinggian gambar pahlawan, karena kita benar-benar perlu memutuskan resolusi layar mana yang harus digunakan?
Tentu saja, semua ini dengan tetap menjaga filosofi grid 12 kolom;)
Jawaban:
Asprilla,
Sementara komentar di atas menghasilkan poin teknis yang sangat bagus, saya sarankan menyesuaikan pekerjaan Anda dengan klien tertentu, yang dimulai dengan melihat Google Analytics situs mereka saat ini - Pelaporan / Teknologi / Browser & OS / Resolusi Layar. Dengan cara ini, Anda akan menghabiskan waktu dan anggaran klien Anda dengan bijaksana dengan memenuhi kebutuhan spesifik klien Anda sebagai lawan dari penerapan pedoman umum. Kami benar-benar harus menyarankan klien kami pada kesempatan untuk tidak melakukan desain yang sepenuhnya responsif hanya karena lalu lintas non-desktop mereka tidak akan membenarkan biaya.
Ada beberapa hal yang perlu diingat saat menyajikan gambar kepada pemirsa.
- Pertahankan rasio gambar sama dengan dimensi aslinya
Kami melakukan ini untuk mencegah gambar menjadi miring dan untuk mencegah gambar menjadi buram. Kami dapat menjaga rasio dimensi tetap sama atau memotong bagian yang tidak cocok.
Ketika menggunakan <img>unsur atau sesuatu yang mirip, ini cukup lurus ke depan, itu hanya membutuhkan menggunakan satu set widthatau heightOR set max-widthatau max-height.
Namun dalam kasus gambar lebar viewport penuh ini sedikit lebih kompleks. Ada beberapa cara CSS untuk melakukannya , yang terbaik adalah background-size:coverseperti contoh tertaut pertama dalam artikel dan acara jawaban Talkingrock .
Selain itu, kami sekarang memiliki kemampuan untuk menggunakan fitur yang terdapat dalam spesifikasi gambar responsif termasuk srcsetdan <picture>elemen, yang sangat berguna. Saya membicarakan hal ini lebih lanjut dalam jawaban ini.
- Berikan pemirsa hanya gambar yang mereka butuhkan
Untuk memiliki pemuatan halaman yang lebih cepat dan mencegah pengguna perlu mentransfer lebih banyak data, sangat penting untuk melayani pengguna akhir hanya gambar yang mereka butuhkan, saat mereka membutuhkannya. Ini berarti kami menyajikan gambar dengan ukuran yang sama atau hanya sedikit lebih besar dari yang viewport mereka gunakan dan menunggu untuk memuat gambar yang tidak akan segera terlihat sampai setelah halaman awal dimuat.
Kami dapat menyajikan gambar berukuran lebih tepat menggunakan CSS dengan menggunakan @mediakueri saat kami menggunakan gambar latar belakang. Gambar yang tidak ada dalam kueri media yang digunakan tidak dimuat . Saya akan merekomendasikan menggunakan setidaknya tiga ukuran foto (yang berarti setidaknya 3 pertanyaan media), tetapi memiliki pasangan lebih banyak bisa menjadi kinerja yang bijaksana. Berikut ini adalah contoh, tetapi biasanya harus bertepatan dengan beberapa breakpoint umum untuk tata letak situs Anda.
@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
... background-image(imageURLforLargeScreens.png); ...
}
Tapi, mari kita hadapi itu: kita tidak pandai memilih breakpoints juga tidak sempurna dalam memilih dimensi gambar yang diberikan ukuran layar tertentu. Bukankah lebih bagus jika kita bisa membiarkan sesuatu melakukan ini 'secara ajaib' bagi kita?
Berita baiknya adalah sekarang kita bisa !
Dengan spesifikasi gambar yang responsif, kami dapat membiarkan browser memutuskan semua ini untuk kami, asalkan kami sedikit membantu. Properti yang sangat berguna srcsetdapat digunakan dengan elemen <img>atau <picture>. Untuk peralihan resolusi seperti yang kami lakukan di sini, kita harus menggunakan <img>elemen.
Berikut ini adalah contoh HTML yang diperlukan srcsetuntuk melakukan tugasnya. Untuk lebih lanjut, Anda dapat membaca artikel hebat Yoav Weiss tentang masalah ini. Contohnya diambil dari itu.
<img src="cat_500px.jpg"
srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
width="500" alt="lolcat">
Catatan: Jika Anda perlu menyajikan gambar yang sama dengan dimensi berbeda pada ukuran viewport tertentu, Anda dapat menggunakan sizesatribut.
Saya tidak mengatakan bahwa menggunakan srcsetselalu lebih baik daripada menggunakan gambar latar belakang CSS, saya sendiri belum cukup banyak bekerja dengannya untuk mengatakannya dengan pasti, tetapi ini berpotensi cara yang lebih baik.
Selain itu, untuk membantu kinerja, kami dapat "malas memuat" gambar yang awalnya tidak akan terlihat. Ini berarti bahwa kami mencegah mereka memuat pada awalnya tetapi mulai memuatnya segera setelah halaman awal selesai memuat. Dengan begitu kita bisa membuat pengunjung untuk melihat halaman sesegera mungkin dan mengisi beberapa detail nanti. Inilah cara untuk melakukan itu, saya tidak akan membahas banyak detail sekarang.
- Pastikan konten dalam gambar yang ingin Anda tampilkan ditampilkan
Jika kita memiliki dimensi yang benar dan kinerja yang hebat itu luar biasa, tetapi jika pemirsa tidak melihat apa yang kita inginkan, tidak ada gunanya. Jika kita menunjukkan gambar sepenuhnya sepanjang waktu, ini bukan masalah, tetapi jika kita harus memotong gambar, ini bisa menjadi masalah.
Kita dapat memotong background-imagemenggunakan CSS dengan menggunakan background-sizedan background-position(dan semacam menggunakan clip, tapi itu biasanya digunakan untuk bentuk yang lebih rumit dan kompleks). Rincian persisnya akan bervariasi dari gambar ke gambar tergantung pada bagaimana penerapannya.
Opsi kedua adalah menggunakan <picture>elemen. Kami menggunakan ini ketika kami hanya ingin bagian dari gambar untuk ditampilkan, seperti yang terlihat di sini , tapi di sini adalah contoh sederhana dalam praktiknya (diambil dari artikel hebat Jason Grigsby tentang hal ini).
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
Saya ingin mengulangi, jika Anda hanya perlu melakukan resolusi switching tidak menggunakan <picture>elemen , cukup gunakan <img>elemen dengan srcset. Satu-satunya waktu kita membutuhkan <picture>elemen adalah untuk arah seni ini, yang berarti kliping, dll.
Ada juga kemungkinan melakukan pemotongan sisi server, menggunakan topeng SVG, atau melakukan beberapa hal dengan Canvas, tapi itu sedikit di luar cakupan jawaban ini.
Breakpoint spesifik tidak begitu penting. Seperti halnya semua desain responsif, penting untuk melakukan yang terbaik yang kami bisa untuk semua viewports, tetapi tidak ada permintaan media yang akan sempurna untuk semua situs.
Waktu pemuatan halaman sangat penting , dan gambar dapat memperlambat waktu pemuatan awal dengan banyak. Pastikan Anda memuat gambar yang akan segera dilihat pertama, lalu yang lain. Cobalah untuk mencegah gambar (seperti JPEG) menampilkan bagian dari gambar saat memuat sisanya. Juga mengoptimalkan semua gambar Anda sehingga mereka adalah ukuran file sekecil mungkin sambil tetap memiliki jumlah kualitas yang Anda butuhkan.
Penting untuk diingat bahwa gambar, dalam banyak kasus, harus menjadi aksesori, bukan keharusan. Saya sarankan untuk selalu menguji bagaimana halaman web terlihat tanpa gambar untuk memastikan itu dapat digunakan.
Catatan : Kita dapat menggunakan polyfill yang disebut Picturefill untuk melayani browser lama yang tidak mendukung spesifikasi gambar responsif.
Saya telah mempelajarinya melalui penelitian sepanjang tahun lalu, dan eksperimen selama beberapa hari terakhir untuk kasus penggunaan khusus ini.
Pilih gambar dengan satu titik fokus, atau tanpa titik fokus sama sekali.
File gambar sumber Anda harus berukuran sangat besar (minimal 5000 x 5000) jika Anda ingin menyajikan banyak gambar yang bergantung pada resolusi.
Untuk versi potret, Anda harus menggunakan rasio aspek 9w:16h.
Untuk versi lansekap, Anda harus menggunakan rasio aspek 4w:3h.
Di dalam kedua gambar, ada area aman konten di mana Anda dapat menjamin bahwa sebagian gambar akan terlihat, atau di atas-lipat- seperti yang mereka katakan di Klingon.
Daerah aman konten untuk kedua gambar, didasarkan pada lima aspek rasio ini: 3:2, 4:3, 5:3, 16:10& 16:9, kira-kira tiga perempat dari kedua gambar.
srcsetadalah Cawan Suci dari penerapan gambar responsif. <picture>mungkin akan lebih baik di masa depan, tetapi srcsetadalah raja untuk saat ini. Periksa jawaban Zach Saucier untuk informasi lebih lanjut tentang ini.
Gambar-gambar ini harus menutupi hampir semua layar. Ubah ukuran panel pratinjau untuk melihat gambar yang berbeda. Fallback harus ke salah satu gambar mid-range, tapi saya menautkan ke halaman di mana saya bersumber gambar sebagai semacam atribusi kecil.
Saya sudah mencoba untuk menjaga jawaban ini singkat (ditulis ulang 3 kali), walaupun saya dapat memberikan pembenaran untuk pernyataan saya, saya belum melakukannya karena itu akan menggembungkan jawaban ini. Saya berharap Anda dapat menyimpulkan justifikasi dari gambar di atas, dan melihat bukti dari contoh saya jsFiddle.
Di 4:3layar:
Di layar super lebar:
Di ponsel potret:
Berikut adalah beberapa informasi tambahan yang mungkin berguna bagi Anda.
Statistik Ukuran Layar
Ukuran layar populer bervariasi, jadi inilah beberapa situs statistik yang mencantumkan penggunaan ukuran layar berdasarkan persen, tren peramban, sistem operasi, dan lainnya.
Pahlawan dan Gambar Besar
Ada solusi CSS yang hebat dan mudah untuk Hero dan gambar besar lainnya. Itu background-size:cover. Ini berguna karena mencakup seluruh div tanpa mengubah gambar pada ukuran layar yang berbeda, atau jika div induk berubah bentuk (teks lebih / kurang ...). Ini bekerja dengan memotong bit gambar untuk mempertahankan proporsi yang tepat, dan Anda juga dapat memposisikan latar belakang sehingga bagian-bagian penting akan selalu ditampilkan (tengah tengah, kanan bawah ...).
Keuntungan lain adalah menampilkan gambar sebagai latar belakang, sehingga teks dan informasi lainnya dapat dengan mudah ditambahkan ke div. Ini juga berfungsi sebagai latar belakang berukuran penuh. Berikut adalah contoh JSFiddle untuk dimainkan dengan yang menggunakan ukuran latar belakang: tutup sebagai latar belakang layar penuh, dan contoh lain yang menggunakan div Pahlawan . Ubah ukuran jendela JSFiddle, dan edit pemosisian CSS agar berfungsi.
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Dukungan Browser untuk Background-size (CanIUse.com) sangat baik, dan ini adalah perbaikan untuk IE7 dan IE8 .
Salah satu solusi populer untuk semua ukuran tampilan perangkat yang berbeda (desktop / tablet / handheld) adalah membuat situs Responsif yang mengubah posisinya agar sesuai dengan berbagai ukuran layar dari TV layar lebar, hingga handheld. Jika Anda tertarik dengan ini, berikut ini adalah tutorial tingkat menengah yang baik: http://www.elated.com/articles/responsive-web-design-demystified/ .
Desain responsif bekerja dengan tata letak kisi, dan jika situs tersebut berbasis piksel, ada rumus yang mengubah ukuran piksel menjadi persentase yang setara. Pencarian cepat menggunakan istilah "grid 12 kolom responsif" dan "kalkulator grid kolom responsif" menghasilkan banyak sumber daya yang bermanfaat seperti wireframe 12-kolom Responsif, kalkulator, dan lainnya. Berikut ini contohnya: http://onepcssgrid.mattimling.com/
Coba desain untuk kompatibilitas dengan resolusi viewport terkecil:
Desktop: 800x600 / 1024x768 (dalam piksel)
ponsel yang lebih lama: 320x480 (dalam piksel)
tablet: 800x1280 (dalam piksel)
Dengan memilih resolusi terendah, Anda memastikan bahwa desain akan bekerja untuk orang-orang dengan resolusi yang lebih kecil serta resolusi yang lebih besar.
Bagi saya sepertinya Anda berdua tertarik pada viewports untuk perangkat yang berbeda daripada ukuran browser.
The Browser adalah jendela lengkap yang digunakan untuk browsing web visual. Area ini mencakup input url navigasi, tab, & bilah alat.
Area pandang adalah area browser yang menampilkan situs web yang dirender. Ini biasanya di bawah bilah alat dan url. Ini adalah area di mana para desainer biasanya lebih tertarik.
Adapun untuk memutuskan resolusi layar Anda, pertama-tama Anda harus bertanya pada diri sendiri: apa yang terutama akan dilihat? Jika ini untuk penggunaan internal di perusahaan, kita dapat menebak kemungkinan besar akan digunakan pada laptop atau desktop. Jika itu dimaksudkan untuk digunakan saat bepergian, kita bisa menebak itu terutama akan digunakan pada perangkat seluler.
Tren saat ini untuk desain web adalah "Mobile First". Di sinilah situs web dirancang untuk seluler sebelum dibuat responsif untuk platform lain. Ini karena semakin banyak orang menggunakan perangkat seluler untuk akses internet daripada desktop atau laptop.
Anda mungkin menemukan Ukuran Viewport sangat membantu untuk mempelajari tentang dimensi viewport. Situs ini memberikan viewport untuk banyak perangkat seluler dan beberapa desktop. Seharusnya Anda dapat menjelajahi berbagai ukuran area pandang.