Menggunakan gambar render javascript wajah

Mari kita periksa skenario tipikal. Situs web tipikal mungkin berisi gambar header dan beberapa gambar konten di bawah header. Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan pas di suatu tempat di dalam kolom konten. Ini contoh sederhana

Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop [Anda dapat melihat contohnya secara langsung dan menemukan kode sumbernya di GitHub. ] Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan itu

• Konten isi telah disetel ke lebar maksimum 1200 piksel — pada area pandang di atas lebar tersebut, isi tetap pada 1200px dan memusatkan dirinya sendiri di ruang yang tersedia. Pada area pandang di bawah lebar tersebut, isi akan tetap 100% dari lebar area pandang
• Gambar header telah diatur sehingga bagian tengahnya selalu berada di tengah header, berapa pun lebar judulnya. Jika situs dilihat pada layar yang lebih sempit, detail penting di tengah gambar [orang] masih dapat dilihat, dan kelebihannya hilang dari kedua sisi. Tingginya 200px
• Gambar konten telah diatur sehingga jika elemen tubuh menjadi lebih kecil dari gambar, gambar mulai menyusut sehingga selalu berada di dalam tubuh, bukannya meluap.

Namun, masalah muncul saat Anda mulai melihat situs di perangkat layar sempit. Header di bawah terlihat OK, tetapi mulai memakan banyak ketinggian layar untuk perangkat seluler. Dan pada ukuran ini, sulit untuk melihat wajah dua orang dalam gambar konten pertama

Perbaikan akan menampilkan versi gambar yang dipotong yang menampilkan detail penting dari gambar saat situs dilihat di layar sempit. Gambar yang dipangkas kedua dapat ditampilkan untuk perangkat layar berukuran sedang, seperti tablet. Masalah umum di mana Anda ingin menyajikan gambar yang dipangkas berbeda dengan cara itu, untuk berbagai tata letak, umumnya dikenal sebagai masalah arah seni

Selain itu, tidak perlu menyematkan gambar sebesar itu di halaman jika sedang dilihat di layar ponsel. Melakukannya dapat membuang bandwidth; . Sebaliknya, gambar raster kecil mulai terlihat berbintik saat ditampilkan lebih besar dari ukuran aslinya [gambar raster memiliki lebar sejumlah piksel dan tinggi sejumlah piksel, seperti yang kita lihat saat melihat grafik vektor]. Idealnya, beberapa resolusi akan tersedia untuk browser web pengguna. Browser kemudian dapat menentukan resolusi optimal untuk dimuat berdasarkan ukuran layar perangkat pengguna. Ini disebut masalah pengalihan resolusi

Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar beresolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda

Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya sampai tingkat tertentu — ukurannya kecil dalam ukuran file dan skalanya bagus, dan Anda harus menggunakannya sedapat mungkin. Namun, mereka tidak cocok untuk semua jenis gambar. Gambar vektor sangat bagus untuk grafik sederhana, pola, elemen antarmuka, dll. , tetapi mulai menjadi sangat rumit untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di, katakanlah, sebuah foto. Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat pada contoh di atas

Masalah seperti ini tidak ada saat web pertama kali ada, di awal hingga pertengahan 90-an — saat itu satu-satunya perangkat yang ada untuk menjelajah Web adalah desktop dan laptop, sehingga teknisi browser dan penulis spesifikasi bahkan tidak berpikir untuk mengimplementasikannya solusi. Teknologi gambar responsif diterapkan baru-baru ini untuk memecahkan masalah yang ditunjukkan di atas dengan membiarkan Anda menawarkan beberapa file gambar ke browser, semuanya menampilkan hal yang sama tetapi berisi jumlah piksel yang berbeda [pengalihan resolusi], atau gambar berbeda yang cocok untuk alokasi ruang yang berbeda [art direction ]

catatan. Fitur baru yang dibahas dalam artikel ini — //

Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan cara menyelesaikannya menggunakan fitur gambar responsif HTML. Anda harus mencatat bahwa kami akan berfokus pada

Jadi, apa masalah yang ingin kita selesaikan dengan peralihan resolusi? . Elemen

Namun kami dapat menggunakan dua atribut — dan — untuk menyediakan beberapa gambar sumber tambahan beserta petunjuk untuk membantu browser memilih yang tepat. Anda dapat melihat contohnya di responsive kami. html contoh di GitHub [lihat juga kode sumber]

Atribut srcset dan

srcset_ menentukan kumpulan gambar yang akan kami izinkan untuk dipilih oleh browser, dan berapa ukuran setiap gambar. Setiap set informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis

1. Nama file gambar [
   9]
2. sebuah ruang
3. Lebar intrinsik gambar dalam piksel [
   _0] — perhatikan bahwa ini menggunakan unit
   1, bukan
   2 seperti yang Anda harapkan. Ukuran intrinsik gambar adalah ukuran aslinya, yang dapat ditemukan dengan memeriksa file gambar di komputer Anda [misalnya, di Mac Anda dapat memilih gambar di Finder dan menekan Cmd + I untuk membuka layar info]

1. Kondisi media [
   _4] — Anda akan mempelajari lebih lanjut tentang hal ini di topik CSS, tetapi untuk saat ini anggap saja kondisi media menjelaskan kemungkinan status layar dapat berada. Dalam hal ini, kami mengatakan "ketika lebar viewport adalah 600 piksel atau kurang"
2. sebuah ruang
3. Lebar slot yang akan diisi gambar bila kondisi media benar [
   5]

catatan. Untuk lebar slot, daripada memberikan lebar absolut [misalnya,

Jadi, dengan atribut-atribut ini, browser akan melakukannya

1. Lihatlah lebar perangkatnya
2. Cari tahu kondisi media mana dalam daftar
   _0 yang pertama benar
3. Lihat ukuran slot yang diberikan untuk kueri media tersebut
4. Muat gambar yang dirujuk dalam daftar srcset yang memiliki ukuran yang sama dengan slot atau, jika tidak ada, gambar pertama yang lebih besar dari ukuran slot yang dipilih

Dan itu saja. Pada titik ini, jika browser pendukung dengan lebar viewport 480px memuat halaman, kondisi media

img {
  width: 320px;
}

catatan. Saat menguji ini dengan browser desktop, jika browser gagal memuat gambar yang lebih sempit saat jendelanya diatur ke lebar tersempit, lihat apa area pandangnya [Anda dapat memperkirakannya dengan masuk ke konsol JavaScript browser dan ketik

img {
  width: 320px;
}

img {
  width: 320px;
}

Untuk melihat gambar mana yang dimuat, Anda dapat menggunakan tab Monitor Jaringan Firefox DevTools atau panel Jaringan Chrome DevTools. Untuk Chrome, Anda mungkin juga ingin menonaktifkan cache untuk mencegahnya mengambil gambar yang sudah diunduh

Browser lama yang tidak mendukung fitur ini akan mengabaikannya. Sebagai gantinya, browser tersebut akan melanjutkan dan memuat gambar yang direferensikan dalam atribut seperti biasa

catatan. Dalam

img {
  width: 320px;
}

img {
  width: 320px;
}

Jika Anda mendukung beberapa resolusi tampilan, tetapi semua orang melihat gambar Anda pada ukuran dunia nyata yang sama di layar, Anda dapat mengizinkan browser untuk memilih gambar resolusi yang sesuai dengan menggunakan srcset dengan deskriptor x dan tanpa

________limabelas_______

Dalam hal ini,

Singkatnya, masalah arah seni melibatkan keinginan untuk mengubah gambar yang ditampilkan agar sesuai dengan ukuran tampilan gambar yang berbeda. Misalnya, halaman web menyertakan bidikan lanskap besar dengan orang di tengah saat dilihat di browser desktop. Saat dilihat di browser seluler, gambar yang sama menyusut, membuat orang di dalam gambar menjadi sangat kecil dan sulit dilihat. Mungkin akan lebih baik untuk menampilkan gambar potret yang lebih kecil di ponsel, yang memperbesar orang tersebut. Elemen memungkinkan kita menerapkan solusi seperti ini

Kembali ke asal kita non-responsif. html misalnya, kami memiliki gambar yang sangat membutuhkan arahan seni

Mari kita perbaiki ini, dengan . Seperti _

• Elemen
  0 menyertakan atribut
  _3 yang berisi kondisi media — seperti pada contoh _srcset pertama, kondisi ini adalah pengujian yang menentukan gambar mana yang ditampilkan — gambar pertama yang mengembalikan true akan ditampilkan. Dalam hal ini, jika lebar viewport adalah 799px atau kurang, gambar elemen
  0 pertama akan ditampilkan. Jika lebar viewport adalah 800px atau lebih, itu akan menjadi yang kedua
• Atribut srcset_ berisi jalur ke gambar yang akan ditampilkan. Sama seperti yang kita lihat dengan
  2 di atas,
  _0 dapat menggunakan atribut srcset dengan referensi beberapa gambar, serta atribut
  0. Jadi, Anda dapat menawarkan banyak gambar melalui elemen , tetapi kemudian juga menawarkan beberapa resolusi dari masing-masing gambar. Secara realistis, Anda mungkin tidak ingin melakukan hal semacam ini terlalu sering
• Dalam semua kasus, Anda harus memberikan elemen
  _2, dengan

  img {
    width: 320px;
  }
  

  _6 dan
  4, tepat sebelum
  5, jika tidak, gambar tidak akan muncul. Ini memberikan kasus default yang akan diterapkan ketika tidak ada kondisi media yang benar [Anda sebenarnya dapat menghapus elemen
  0 kedua dalam contoh ini], dan fallback untuk browser yang tidak mendukung elemen

Kode ini memungkinkan kita menampilkan gambar yang sesuai pada tampilan layar lebar dan layar sempit, seperti yang ditunjukkan di bawah ini

catatan. Anda harus menggunakan atribut

Saat browser mulai memuat halaman, browser mulai mendownload [memuat sebelumnya] gambar apa pun sebelum parser utama mulai memuat dan menginterpretasikan CSS dan JavaScript halaman. Mekanisme itu berguna secara umum untuk mengurangi waktu muat halaman, tetapi tidak membantu untuk gambar yang responsif — oleh karena itu perlu menerapkan solusi seperti srcset. Misalnya, Anda tidak dapat memuat elemen

Format gambar baru seperti dan dapat mempertahankan ukuran file yang rendah dan kualitas tinggi pada saat yang bersamaan. Format ini sekarang memiliki dukungan browser yang relatif luas tetapi sedikit "kedalaman sejarah"

_ memungkinkan kami terus melayani browser lama. Anda dapat menyediakan jenis MIME di dalam atribut srcset4 sehingga browser dapat segera menolak jenis file yang tidak didukung

• Jangan gunakan atribut
  3, kecuali jika Anda juga memerlukan arahan seni
• Dalam elemen
  0, Anda hanya dapat merujuk ke gambar dari jenis yang dinyatakan dalam srcset4
• Gunakan daftar yang dipisahkan koma dengan srcset dan
  0, sesuai kebutuhan

Untuk pembelajaran aktif ini, kami mengharapkan Anda menjadi berani dan kebanyakan melakukannya sendiri. Kami ingin Anda menerapkan tangkapan layar sempit/lebar yang sesuai dengan seni yang sesuai menggunakan _______ 55 _______, dan contoh pengalihan resolusi yang menggunakan ________ 57 _______

1. Tulis beberapa HTML sederhana untuk memuat kode Anda [gunakan 2 sebagai titik awal, jika Anda suka]
2. Temukan gambar lanskap layar lebar yang bagus dengan semacam detail yang terkandung di dalamnya di suatu tempat. Buat versi seukuran web menggunakan editor grafis, lalu pangkas untuk menampilkan bagian yang lebih kecil yang memperbesar detail, dan buat gambar kedua [lebar sekitar 480px bagus untuk ini]
3. Gunakan elemen untuk menerapkan pengalih gambar arah seni
4. Buat beberapa file gambar dengan ukuran berbeda, masing-masing menampilkan gambar yang sama
5. Gunakan srcset/5 untuk membuat contoh pengalih resolusi, baik untuk menyajikan gambar ukuran yang sama pada resolusi yang berbeda, atau ukuran gambar yang berbeda pada lebar viewport yang berbeda

Itu adalah balutan untuk gambar responsif — kami harap Anda menikmati bermain dengan teknik baru ini. Sebagai rangkuman, ada dua masalah berbeda yang telah kita diskusikan di sini

• arah seni. Masalah saat Anda ingin menyajikan gambar yang dipangkas untuk tata letak yang berbeda — misalnya gambar lanskap yang menampilkan pemandangan penuh untuk tata letak desktop, dan gambar potret yang menampilkan subjek utama yang diperbesar untuk tata letak seluler. Anda dapat memecahkan masalah ini menggunakan elemen
• Pergantian resolusi. Masalah di mana Anda ingin menyajikan file gambar yang lebih kecil ke perangkat layar sempit, karena mereka tidak memerlukan gambar besar seperti tampilan desktop — dan untuk menyajikan gambar beresolusi berbeda ke layar kepadatan tinggi/kepadatan rendah. Anda dapat mengatasi masalah ini menggunakan grafik vektor [gambar SVG] dan dengan atribut

Ini juga menutup seluruh Multimedia dan modul embedding. Satu-satunya hal yang harus dilakukan sekarang sebelum melanjutkan adalah mencoba penilaian Multimedia dan penyematan kami, dan lihat bagaimana hasilnya. selamat bersenang-senang

Bagaimana wajah membuat fungsi di JavaScript?

Log konsol JavaScript untuk apa?

Pada bagian HTML di mana JavaScript dapat diletakkan?

Apa innerHTML Anda pada JavaScript?