Mengelola Breakpoint Gambar Dengan Angular

Sebagai pengembang web, kita sering dituntut untuk membuat aplikasi yang responsif sekaligus kaya media. Memiliki persyaratan seperti itu berarti bahwa kita perlu bekerja dengan breakpoint gambar, serta kueri media karena kita ingin memberikan pengalaman terbaik kepada pengguna akhir. Menambah daftar persyaratan, kita mungkin perlu menggunakan kerangka kerja front-end seperti Angular yang sangat bagus untuk membuat SPA dan jenis aplikasi lainnya.

Dalam artikel ini, kita akan melihat breakpoint gambar, kasus penggunaannya, dan seluruh contoh langsung; kami akan mengimplementasikannya dalam aplikasi Angular menggunakan Pengamat BreakPoint Angular sendiri. Saat menggunakan pendekatan ini, kami juga akan menyoroti mengapa kerangka kerja populer ini membantu kami bekerja dengan teknik yang disebutkan di atas dengan cara yang mulus.

Breakpoint Gambar Dan Gambar Responsif

Di era tata letak responsif (di mana kita menangkap titik henti sementara berdasarkan ukuran viewport dan berdasarkan titik henti sementara kita mengubah tata letak halaman), kita juga perlu memastikan bahwa gambar dapat ditampilkan dengan dimensi yang tepat — bahkan setelah tata letak mengubah. Memilih gambar yang tepat cukup menantang untuk situs web responsif modern.

Mari kita bahas dua opsi yang dapat digunakan pengembang saat ini.

srcset

srcset memungkinkan kita menentukan daftar gambar yang beralih antara browser berdasarkan ukuran <img> yang dirender dan kepadatan tampilan.

Mari kita lihat sebuah contoh:

 <img src="tuscany.jpg" />

Di atas, kami menentukan 3 gambar, dengan w menunjukkan lebar piksel untuk gambar. Saat menggunakan di atas dengan srcset kita juga perlu menentukan atribut sizes (ini diperlukan karena spesifikasi mengamanatkan bahwa jika kita menggunakan srcset dan w kita harus memiliki atribut ukuran juga). Apa tujuan dari atribut ini? Peramban perlu memilih sumber daya mana yang akan dimuat dari kumpulan sumber sebelum mereka mengatur tata letak halaman (sebelum mereka tahu seberapa besar gambar itu nantinya). Kita dapat menganggap sizes sebagai petunjuk bagi browser bahwa, setelah tata letak, gambar akan menempati 100% dari lebar viewport (itulah yang dimaksud vw ). Peramban mengetahui lebar viewport yang sebenarnya (serta DPR gambar) pada waktu muat, sehingga dapat melakukan perhitungan untuk mengetahui ukuran sumber daya yang dibutuhkan dan memilih satu dari kumpulan sumber.

Kombinasi elemen <picture> dan <source media=""> memungkinkan kita mengganti sumber daya gambar sebagai respons terhadap kueri media, seperti yang ada di titik henti sementara tata letak.

Mari kita lihat contoh ini juga:

 <picture> <source media="(min-width: 1440px)"> <source media="(min-width: 900px)"> <source media="(min-width: 600px)"> <img src="../assets/images/tuscany-sm.jpg" /> </picture>

Ubah kode di atas secara lokal dengan gambar pilihan Anda yang memiliki ukuran kecil, sedang dan besar. Perhatikan bagaimana, dengan mengubah ukuran browser, Anda mendapatkan gambar yang berbeda.

Kunci utama dari semua hal di atas adalah jika kita ingin menukar gambar pada breakpoint tertentu, kita dapat menggunakan elemen <picture> untuk menempatkan kueri media langsung ke markup.

Catatan : Jika Anda tertarik untuk menjelajahi perbedaan antara <picture> dan srcset + sizes , saya sarankan untuk membaca artikel hebat Eric Portis: srcset dan sizes .

Sejauh ini kita telah membahas cara menggunakan breakpoint gambar bersama dengan kueri media dalam lingkungan HTML murni. Bukankah jauh lebih baik untuk memiliki cara yang nyaman, hampir semi-otomatis untuk menghasilkan breakpoint gambar serta gambar yang sesuai untuk breakpoint bahkan tanpa harus menentukan kueri media sama sekali? Beruntung bagi kami Angular memiliki mekanisme bawaan untuk membantu kami dan kami juga akan melihat cara menghasilkan gambar yang sesuai secara dinamis berdasarkan kondisi tertentu dengan menggunakan layanan pihak ketiga.

Modul Tata Letak Sudut

Angular hadir dengan Layout Module yang ada di dalam perangkat CDK (Component Dev Kit). CDK Angular berisi alat yang telah teruji dengan baik untuk membantu pengembangan komponen. Salah satu bagian dari CDK adalah Layout Module yang berisi BreakpointObserver . Helper ini memberikan akses ke breakpoint media-query, yang berarti bahwa komponen (dan kontennya) dapat beradaptasi dengan perubahan ketika ukuran browser (ukuran layar) diubah secara intuitif.

Bacaan yang disarankan: Modul Tata Letak

Sekarang setelah kita memiliki teori, mari kita turun ke bisnis dan membuat aplikasi yang akan mengimplementasikan breakpoint gambar responsif. Dalam iterasi pertama ini, kami akan membuat shell aplikasi melalui Angular CLI: ng new bpo dan pilih opsi yang diperlukan.

Untuk menggunakan BreakpointObserver kita juga perlu menginstal Modul Tata Letak CDK Angular, yang dapat kita lakukan melalui npm: npm i @angular/cdk .

Setelah instalasi, kami akan dapat menambahkan pernyataan impor yang diperlukan ke komponen apa pun yang kami inginkan:

 // app.component.ts import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

Dengan menggunakan BreakpointObserver , kita dapat berlangganan perubahan lebar viewport dan Angular memberi kita pengakses yang nyaman yang berarti kita tidak perlu menggunakan kueri media sama sekali! Mari kita lanjutkan dan coba ini:

 // app.component.ts constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle XSmall breakpoint } if (result.breakpoints[Breakpoints.Small]) { // handle Small breakpoint } if (result.breakpoints[Breakpoints.Medium]) { // handle Medium breakpoint } if (result.breakpoints[Breakpoints.Large]) { // handle Large breakpoint } if (result.breakpoints[Breakpoints.XLarge]) { // handle XLarge breakpoint } }); }

Seperti disebutkan sebelumnya, properti pengakses di atas mencerminkan kueri media dengan cara berikut:

• Breakpoints.XSmall : max-width = 599,99px
• Breakpoints.Small : min-width = 600px dan max-width = 959.99px
• Breakpoints.Medium : min-width = 960px dan max-width = 1279.99px
• Breakpoints.Large : min-width = 1280px dan max-width = 1919.99px
• Breakpoints.XLarge : min-width = 1920px

Kami sekarang memiliki segalanya di tempat yang berarti, kami dapat mulai menghasilkan gambar yang sesuai.

Breakpoint Responsif Untuk Gambar

Kami memiliki beberapa opsi untuk menghasilkan gambar responsif:

1. Generator Breakpoint Gambar Responsif
   Dengan menggunakan alat ini, kita dapat mengunggah gambar apa saja, mengatur berbagai opsi, misalnya jumlah gambar yang ingin kita hasilkan. Setelah menjalankan alat, kami akan memiliki representasi visual tentang gambar yang dihasilkan, dan kami dapat mengunduhnya sebagai file zip bersama dengan beberapa kode yang dihasilkan yang menggunakan elemen <picture> yang disebutkan sebelumnya.
2. Solusi lain adalah dengan membuat langkah pembangunan untuk proyek kami untuk menghasilkan breakpoint melalui beberapa paket yang tersedia di repositori NPM, seperti gulp-responsive atau grunt-responsive-images . Keduanya bergantung pada pustaka tambahan yang harus kami instal untuk sistem operasi kami. (Silakan periksa repositori yang sesuai untuk informasi tambahan.)
3. Namun solusi lain adalah menggunakan layanan seperti Cloudinary untuk menyimpan gambar dan menyajikannya dalam ukuran dan format yang kita perlukan hanya dengan memodifikasi URL untuk sumber daya yang diminta. Ini akan menjadi pendekatan kami karena ini memberi kami paling banyak fleksibilitas.

Bacaan yang disarankan : Mengotomatiskan Arah Seni Dengan Generator Breakpoints Gambar Responsif oleh Eric Portis

Saya telah mengunggah gambar asli ke akun Cloudinary saya yang berarti saya dapat mengakses gambar itu melalui URL berikut:

 https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

Ini adalah gambar berukuran penuh, mentah, asli, dan tidak berubah yang akan kami kerjakan.

Kita dapat memodifikasi URL gambar untuk menghasilkan versi yang jauh lebih kecil. Misalnya, jika kita ingin memiliki gambar dengan lebar 600 piksel, kita dapat memperbarui URL Cloudinary* menjadi sebagai berikut:

 https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg

* Perhatikan w_600 ditambahkan ke URL.

Mudah-mudahan, pada titik ini, Anda melihat ke mana arah semua ini. Berdasarkan pendekatan di atas, kita dapat dengan cepat mulai menghasilkan gambar yang tepat untuk breakpoint yang tepat.

Menggunakan Cloudinary berarti kita tidak perlu membuat, menyimpan, dan mengelola beberapa versi dari gambar yang sama — itu dilakukan untuk kita oleh Cloudinary secara on-the-fly.

Mari kita perbarui kode kita:

 <!-- app.component.html --> <div> <h1>Current breakpoint: {{ breakpoint }}</h1> <img [src]="imagePath"> </div>

 // app.component.ts import { Component, OnInit } from '@angular/core'; // ... export class AppComponent implements OnInit { imagePath; constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ ... } }

Kami dapat memilih sejumlah breakpoint untuk diamati dari daftar yang disebutkan sebelumnya, dan karena kami memiliki Pengamat, kami dapat berlangganan perubahan dan menindaklanjutinya:

 this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle this case } });

Untuk menangani opsi untuk berbagai gambar di Cloudinary, kami akan menggunakan pendekatan yang akan sangat mudah diikuti. Untuk setiap kasus, kami akan membuat variabel opsi dan memperbarui URL Cloudinary final.

Tambahkan yang berikut ini di bagian atas definisi komponen:

 // app.component.ts imagePath; breakpoint; cloudinaryOptions; baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

Dan tambahkan yang berikut ini juga ke pernyataan if pertama:

 // app.component.ts let url = this.baseURL.split('/'); let insertIndex = url.indexOf('upload'); const options = 'c_thumb,g_auto,f_auto,q_auto,w_400'; url.splice(insertIndex + 1, 0, options); this.imagePath = url.join('/'); this.breakpoint = Breakpoints.XSmall;

Hasilnya akan menjadi URL Cloudinary yang diperbarui:

 https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

Apa saja opsi yang kami atur di sini?

• c_thumb (menghasilkan thumbnail gambar);
• g_auto (berfokus pada bagian yang paling menarik; kita melihat katedral di thumbnail);
• f_auto (menyajikan format yang paling sesuai untuk browser tertentu, yaitu WebP untuk Chrome);
• q_auto (mengurangi kualitas — dan oleh karena itu ukuran keseluruhan — gambar tanpa memengaruhi visual);
• w_400 (mengatur lebar gambar menjadi 400px).

Demi penasaran, mari kita bandingkan ukuran gambar asli dengan gambar yang baru dibuat ini: 2,28 MB vs 29,08 KB!

Kami sekarang memiliki pekerjaan langsung: kami perlu membuat opsi yang berbeda untuk breakpoint yang berbeda. Saya membuat contoh aplikasi di StackBlitz sehingga Anda dapat langsung mengujinya (Anda juga dapat melihat pratinjaunya di sini).

Kesimpulan

Keragaman perangkat desktop dan seluler serta jumlah media yang digunakan di web saat ini telah mencapai jumlah yang luar biasa. Sebagai pengembang web, kita harus menjadi yang terdepan dalam membuat aplikasi web yang berfungsi di perangkat apa pun dan tidak memengaruhi pengalaman visual.

Ada sejumlah metode yang memastikan gambar yang tepat dimuat ke perangkat yang tepat (atau bahkan saat mengubah ukuran perangkat). Dalam artikel ini, kami meninjau pendekatan yang menggunakan fitur Angular bawaan yang disebut BreakPoint Observer yang memberi kami antarmuka yang kuat untuk menangani gambar responsif. Selain itu, kami juga melihat layanan yang memungkinkan kami menyajikan, mengubah, dan mengelola gambar di cloud. Memiliki alat yang sangat menarik di tangan kami, kami masih dapat menciptakan pengalaman web visual yang imersif, tanpa kehilangan pengunjung.