Get best of the week

Pendekatan sederhana untuk bekerja dengan gambar responsif

Spesifikasi gambar responsif adalah dokumen fantastis yang menjelaskan banyak kegunaan untuk gambar seperti itu. Tetapi pengalaman memberi tahu saya bahwa paling sering ketika bekerja dengan mereka, Anda hanya perlu tahu cara memberikan salinan gambar yang sama ukurannya kepada klien, memilihnya tergantung pada lebar area tampilan halaman. Kami menyebutnya "peralihan resolusi." Untuk mengatasi masalah ini, Anda dapat menggunakan atribut srcsetdan sizes.

Output dari gambar responsif melibatkan penggunaan logika yang cukup kompleks. Ini, antara lain, termasuk menentukan gambar mana yang akan ditampilkan, serta menentukan apakah pengguna bekerja dengan layar resolusi tinggi. Untungnya, browser lebih baik daripada orang yang dapat menentukan gambar mana yang paling cocok untuk setiap pengguna tertentu. Yang perlu kita lakukan adalah memberi mereka beberapa petunjuk. Atribut srcsetmemberi browser daftar sumber daya grafis dari mana ia dapat memilih gambar yang paling cocok. Atribut sizesmemungkinkan Anda untuk memberi tahu browser tentang ukuran gambar apa yang ingin Anda tampilkan dalam kasus tertentu.



Omong-omong, menggunakan gambar responsif Anda tidak perlu khawatir tentang dukungan browser untuk teknologi ini. Atribut yang kami tertarik nikmati dukungan browser yang sangat baik . Dan selain itu, kami memiliki mekanisme cadangan yang dirancang untuk browser lama seperti IE11.

Bagaimana tag "berkomunikasi" dengan browser


Ini adalah bagaimana tag <img>memberi tahu browser gambar yang harus dipilih.


"Bicara" dari tag dan browser

Di sini tag<img>memberitahu browser berikut: "Dengan ukuran layar ini, saya akan ditampilkan kira-kira dengan ukuran berikut (menunjukkan atributsizes). Anda dapat mengambil gambar-gambar ini yang memiliki lebar berikut (menunjukkan atributsrcset). Karenanya, silakan pilih gambar yang sekarang paling cocok. "

Atribut Srcset


Atribut srcsetmemberi browser satu set sumber daya grafis dari mana ia dapat memilih yang paling cocok. Ini juga berisi informasi tentang ukuran masing-masing gambar yang diusulkan.




Atribut Srcset Atribut inisrcberisi gambar cadangan untuk browser yang tidak memahami atributsrcset. ThesrcsetURL berisi gambar dan informasi tentang lebar mereka. Dari serangkaian gambar yang diberikan kepadanya, browser akan memilih yang paling cocok. Selain itu, jika pengguna memiliki layar dengan kerapatan piksel tinggi (tampilan Retina) - browser akan mempertimbangkan ini saat memilih gambar.

Atributsrcsetberisi daftar URL gambar diikuti oleh informasi lebar gambar. PasanganURL-dipisahkan oleh koma. Item daftar terlihat seperti ini:image.jpg 1000w. Catatan seperti itu memberi tahu browser bahwa gambarimage.jpgtersebut memiliki lebar 1000 piksel.

Menjelaskan set gambar dengan cara ini, kami memberi tahu browser berikut: "Saya memberi Anda daftar gambar dan percaya Anda untuk memilih yang paling cocok."

Browser akan memilih gambar terbaik, dipandu oleh serangkaian kriteria yang kompleks, yang meliputi gambar apa yang ditampilkan pengguna, apa ukuran saat ini dari area tampilan, dan apakah pengguna memiliki layar resolusi tinggi.

Browser cukup cerdas untuk mengetahui bahwa pada tampilan desktop beresolusi rendah, jika lebar gambar yang dihasilkan adalah 800 piksel, Anda harus memilih gambar dari daftar dengan lebar minimal 800 piksel.

Browser, selain itu, tahu bahwa jika gambar dengan lebar 320 piksel ditampilkan pada layar resolusi tinggi, Anda harus memilih file gambar dengan lebar minimal 640 piksel. Akibatnya, kita tidak perlu khawatir tentang sumber daya grafis 1x dan 2x. Yang perlu Anda lakukan adalah memberi peramban gambar yang bagus dan membiarkannya melakukan tugasnya.

Bagaimana cara menggambarkan gambar yang cocok untuk layar yang berbeda?

Atribut ukuran


Atribut srcsetadalah alat yang hebat. Tetapi ketika browser membaca kode HTML halaman, ia tidak tahu apakah, misalnya, gaya CSS digunakan, yang menetapkan ukuran gambar hingga 50% dari lebar layar. 

Di sinilah atribut berperan sizes. Dengan itu, kami dapat memberi peramban petunjuk tentang ukuran gambar yang akan ditampilkan setelah menerapkan CSS.


Atribut ukuran

  • 100vw- ukuran default ketika tidak ada kondisi yang terpenuhi. Itu ditunjukkan terakhir dalam daftar yang ada di atribut sizes.
  • 1023px - lebar jendela.
  • 780px - lebar gambar saat kondisi yang ditentukan terpenuhi.

Browser akan berhenti pada kondisi terpenuhi pertama.

Atribut sizesberisi daftar kondisi media, dipisahkan dengan koma. Kondisi media adalah bagian dari kueri media. Di sini Anda tidak dapat menentukan jenis lingkungan di mana kondisi ( printatau screen) berlaku , tetapi Anda dapat menggunakan kueri media yang terkait dengan lebar area tampilan.

Setiap entri daftar berisi lebar jendela viewport dan lebar gambar yang sesuai. Item daftar memiliki formulir (min-width: 1023px) 780px. Catatan seperti itu memberi tahu browser bahwa jika lebar viewport adalah 1023 piksel (atau lebih), maka Anda perlu menggunakan gambar dengan lebar 780 piksel.

Di sini, di samping itu, satuan lebar relatif dapat digunakan. Misalnya, sesuatu seperti50vw. Ini memberi tahu browser bahwa lebar gambar akan 50% dari lebar viewport. Di sini, dalam situasi yang lebih kompleks, Anda bahkan dapat menggunakan fungsinya calc. Misalnya, desain tampilan calc(50vw — 2rem)memberi tahu browser bahwa lebar gambar akan menjadi 50% dari lebar viewport dikurangi 2rem. Mungkin lebarnya diatur dengan cara ini untuk memperhitungkan lebar lekukan atau batas tertentu.

Elemen terakhir dari daftar tidak dilengkapi dengan kondisi media. Jika Anda menambahkan lebar ke daftar dan tidak menentukan kondisi media, nilai yang sesuai akan dianggap sebagai nilai default, yaitu, jika tidak ada kondisi lain yang terpenuhi.

Browser akan melihat daftar ini dari atas ke bawah dan berhenti di elemen yang sesuai pertama yang sesuai dengan lebar viewport.

Asumsikan yang sizesberikut ini ada dalam atribut :

(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw

Inilah yang akan terjadi dalam situasi yang berbeda:

  • Jika pengguna bekerja pada tampilan desktop yang besar, maka browser akan mempertimbangkan elemen pertama dari daftar yang sesuai dan akan tahu bahwa gambar harus berukuran 780 piksel.
  • Lebar standar area tampilan layar iPad tegak adalah 768 piksel. Dalam situasi ini, browser akan melewatkan entri pertama dalam daftar, tetapi akan menemukan bahwa kondisi saat ini cocok dengan entri kedua. Ini memberitahu browser bahwa gambar akan 620 piksel.
  • , sizes. , , 100% .

Tentu saja, ini hanya contoh. Di dunia nyata, semuanya jauh lebih rumit. Misalnya, pengguna dengan layar besar yang melihat halaman di jendela browser yang sempit akan menerima gambar yang lebih kecil daripada yang akan ia miliki jika jendela diperluas ke layar penuh. Seorang pengguna dengan iPad Pro mungkin mendapatkan gambar yang lebih besar jika ia menempatkan perangkat dalam mode lansekap. Jika dia menggunakan tablet dalam mode potret, dia mungkin mendapatkan gambar berukuran sedang. Dan jika dia menggunakan browser dalam mode ketika layar dibagi antara beberapa windows, maka dia mungkin mendapatkan gambar kecil. Beberapa ponsel dengan layar besar akan mematuhi aturan kedua dari daftar kami saat bekerja dengannya dalam mode lansekap. Ini adalah pesona dari sistem yang dijelaskan:pengembang tidak perlu mengurus semua kasus khusus ini dan berbagai faktor bentuk perangkat. Cukup baginya untuk memberi tahu browser versi gambar mana yang akan dipilih untuk area tampilan tertentu.

Bagaimana menyiapkan daftar gambar dari mana browser akan memilih yang paling cocok?

Atribut Src


Anda mungkin telah memperhatikan bahwa atribut tersebut masih digunakan dalam semua contoh di atas src. Anda mungkin bertanya-tanya apakah atribut ini diperlukan mengingat atribut tersebut srcset. Intinya di sini adalah bahwa jika kita memberikan atribut browser srcset, maka jika itu adalah browser modern, itu akan mengganti nilai srcdalam DOM dengan nilai yang sesuai dengan gambar yang dipilih srcset. Akibatnya, peramban modern mengabaikan atribut tersebut src, dan malah berfokus pada atribut tersebut srcset.

Tetapi atribut srcitu sendiri masih penting untuk browser yang tidak mendukung bekerja dengan gambar responsif. Browser seperti itu, cukup lama, mengabaikan srcsetdan atribut sizes. Mereka sama sekali tidak tahu tentang keberadaan mereka. Tapi atributsrcmereka mengerti, sehingga Anda dapat menulis alamat gambar ke dalamnya, yang akan berfungsi sebagai opsi cadangan untuk browser tersebut. Saya biasanya menulis dalam atribut ini alamat gambar terkecil yang terlihat bagus pada monitor desktop yang tidak memiliki kerapatan piksel tinggi.

Pertanyaan dan jawaban


▍Cara menghasilkan set gambar?


Gambar dapat dihasilkan dengan berbagai cara: secara manual, menggunakan alat untuk membuat gambar responsif, menggunakan kemampuan CDN yang sesuai.

Untuk membuat gambar secara manual, Anda perlu membuka gambar asli di Photoshop (atau editor lain yang Anda gunakan) dan mengekspornya dalam semua ukuran yang diperlukan.

Ini mungkin memerlukan banyak waktu, jadi Anda mungkin ingin mengotomatiskan pekerjaan ini menggunakan alat yang sesuai. Di antara alat-alat ini, saya paling suka Generator Gambar Breakpoint Responsif .dari Cloudinary. Ketika bekerja dengan alat ini, cukup transfer gambar ke sana, setelah itu akan secara otomatis membuat variannya dengan ukuran yang berbeda. Di sini Anda dapat menyesuaikan jumlah gambar yang dihasilkan. Setelah gambar siap, mereka dapat diunduh dan digunakan dalam proyek.

Pilihan lain untuk mendukung gambar responsif adalah menggunakan CDN yang sesuai untuk menampungnya. Misalnya - Cloudinary atau IMGIX. Menggunakan layanan serupa, gambar dalam resolusi tertinggi yang tersedia diunduh ke CDN. Anda kemudian dapat meminta versi gambar dalam berbagai ukuran menggunakan parameter URL. Dalam hal ini, Anda tidak perlu khawatir tentang mengubah ukuran gambar: cukup beri tahu CDN tentang ukuran di mana Anda akan menampilkan gambar yang sesuai.

Berikut adalah daftar layanan dan proyek yang dapat Anda gunakan untuk membuat variasi gambar dengan ukuran berbeda.

▍ Ukuran apa yang harus saya berikan ke browser?


Pertanyaan bagus! Jika Anda memberi browser terlalu banyak sumber daya grafis, maka Anda hanya akan membuang waktu dan tenaga untuk membuatnya. Jika sumber daya terlalu sedikit, ini berarti Anda memaksa pengguna situs Anda untuk mengunduh gambar yang lebih besar dari yang mereka butuhkan.

Jika Anda bekerja dengan satu gambar dan Anda memiliki kesempatan untuk menyesuaikan tata letak untuk output gambar ini, maka Anda dapat menggunakan alat Generator Penghancur Gambar Responsif. Dia akan secara otomatis memeriksa gambar dan memutuskan apa set sumber daya optimal (dalam hal keseimbangan antara ukuran file dan resolusi mereka) yang dihasilkan dari gambar ini. Maka alat ini tidak hanya akan menghasilkan file, tetapi juga secara otomatis mempersiapkan srcsetdan atribut sizes.


Satu set standar ukuran gambar dengan lebar 320 hingga 2560 piksel.

Jika Anda bekerja dalam CMS tertentu, atau jika Anda membuat aplikasi web, dan Anda tidak tahu ukuran gambar apa yang akan ditampilkan di satu tempat atau yang lain, maka saya sarankan menggunakan set ukuran standar. gambar-gambar. Sebelumnya, saya menggunakan dimensi berikut:320w,640w,960w,1280w,1920wdan2560w. Ini adalah angka bulat yang diperoleh dengan mengalikan 320 dengan koefisien yang berbeda. Rangkaian sumber daya ini mencakup kebutuhan beragam layar - mulai dari tampilan ponsel kecil hingga monitor desktop besar.

Namun, menggunakan set sumber daya standar selalu kurang efektif daripada menggunakan set Anda sendiri, dengan mempertimbangkan fitur-fitur proyek. Dalam hal ini, meskipun kami melihat urutan yang cukup logis, itu menunjukkan peningkatan progresif dalam ukuran file, karena jika lebar (dan, sesuai, tinggi) dari suatu gambar digandakan, maka jumlah piksel dalam gambar ini adalah empat kali lipat . Akibatnya, jika Anda harus menggunakan set standar ukuran gambar, maka Anda mungkin perlu memilih set yang akan memiliki lebih sedikit opsi untuk gambar ukuran kecil dan lebih banyak pilihan untuk ukuran besar.

Jika Anda meng-host gambar di Cloudinary, maka pendekatan lain akan tersedia untuk Anda. Ini untuk digunakanCloudinary API , yang memungkinkan Anda untuk memproses gambar menggunakan Generator Breakpoint Gambar Responsif saat diunduh. Setelah gambar diproses secara otomatis, Anda dapat secara dinamis mengisi srcsetdan atribut menggunakan respons API sizes.

▍ Nilai apa yang harus dimasukkan dalam atribut ukuran?


Untuk mengetahui nilai apa yang harus dimasukkan dalam atribut sizes, Anda perlu menganalisis CSS dan memahami lebar gambar yang ditampilkan dalam kondisi yang berbeda.

Terkadang ini ditentukan oleh lebar gambar itu sendiri:

img {
  width 320px;
}

@media screen and (min-width: 37.5em) {
  width: 640px;
}

Dalam hal ini, ada dua opsi ukuran gambar tetap. Fakta ini dapat langsung tercermin dalam atribut sizes:

<img
  alt="Ferrari"
  src="ferrari.jpg"
  srcset="ferrari-s.jpg 320w,
          ferrari-m.jpg 960w,
          ferrari-l.jpg 1920w"
  sizes="(min-width: 37.5em) 640px, 320px">

Namun, sering kali ternyata ukuran gambar fleksibel. Seringkali gambar mewarisi ukuran dari wadahnya:

img {
  height: auto;
  width: 100%;
}

.container {
  padding: 1rem;
  width: 100%;
}

@media screen and (min-width: 37.5em) {
  .container {
    width: 50%;
  }
}

Dalam contoh ini (dengan asumsi bahwa satu-satunya elemen yang mempengaruhi lebar gambar adalah .container) lebar wadah dapat dianggap sebagai lebar gambar. Di sini perlu diperhatikan fakta bahwa lebar indentasi dalam dikurangi dari lebar wadah. Anda mungkin perlu mempertimbangkan ini, mungkin tidak. Itu semua tergantung pada seberapa besar lekukan mempengaruhi lebar akhir gambar.

<img
  alt="Ferrari"
  src="ferrari.jpg"
  srcset="ferrari-s.jpg 320w,
          ferrari-m.jpg 960w,
          ferrari-l.jpg 1920w"
  sizes="(min-width: 37.5em) calc(50vw - 2rem),
         calc(100vw - 2rem)">

Seperti yang Anda lihat, mengatur atribut sizessangat tergantung pada tata letak tertentu. Biasanya saya membuat pekerjaan, mulai dengan meneliti gambar di alat pengembang browser dan mencari tahu opsi mana yang mempengaruhi ukuran gambar.

▍Cara memeriksa pengaturan yang benar untuk gambar responsif?


Sangat mudah untuk membayangkan bahwa menguji pengaturan yang benar untuk gambar responsif bisa sulit dan memakan waktu. Tapi, untuk kebahagiaan kita, ada alat yang menyederhanakan solusi dari masalah seperti itu. Ini adalah Linter Image Responsif .

Ini adalah bookmarklet yang dapat ditambahkan ke browser dan digunakan di situs Anda sendiri. Ketika dipanggil, secara otomatis memindai halaman, menggunakan berbagai ukuran area tampilan dan kerapatan piksel layar untuk menguji gambar.

Kemudian ia menampilkan laporan yang berisi informasi tentang semua gambar halaman, dan apakah pengelolaan ukurannya diatur dengan benar. Jika terjadi kesalahan saat menguji halaman, Anda akan diberitahu tentang hal ini dan bahkan diberi saran tentang cara memperbaiki masalah.

Ringkasan


Seperti yang Anda lihat, kombinasi atribut srcsetdan sizesmemberikan peluang besar. Dengan mengatur kedua atribut ini, Anda memberi tahu browser tentang lebar gambar yang ingin Anda gunakan untuk lebar tertentu dari area tampilan, dan memberikan daftar sumber daya grafis dari mana browser memilih salah satu yang menurutnya paling cocok.

Jika Anda perlu menyelesaikan masalah yang lebih rumit saat bekerja dengan gambar, perlu diketahui bahwa ada alat untuk menyelesaikan masalah tersebut. Katakanlah ini adalah sesuatu seperti menggunakan format grafik modern seperti WebP , atau mengirim gambar berbeda ke klien, tergantung pada ukuran layar. Jika Anda ingin mempelajari pekerjaan dengan gambar responsif - lihat materi ini .

Pembaca yang budiman! Apakah Anda menggunakan gambar responsif dalam proyek Anda?

More articles:


All Articles