การจัดการเบรกพอยต์ของรูปภาพด้วย Angular

ในฐานะนักพัฒนาเว็บ เรามักจะต้องสร้างแอปพลิเคชันที่ตอบสนองได้ดีและมีเดียที่หลากหลาย การมีข้อกำหนดดังกล่าวหมายความว่าเราจำเป็นต้องทำงานกับเบรกพอยต์ของรูปภาพ รวมถึงการสืบค้นสื่อ เนื่องจากเราต้องการมอบประสบการณ์ที่ดีที่สุดแก่ผู้ใช้ปลายทาง การเพิ่มรายการข้อกำหนด เราอาจต้องใช้เฟรมเวิร์กส่วนหน้า เช่น Angular ซึ่งเหมาะสำหรับการสร้าง SPA และแอปพลิเคชันประเภทอื่นๆ

ในบทความนี้ เราจะพิจารณาเบรกพอยต์ของรูปภาพ กรณีใช้งาน และตัวอย่างเชิงปฏิบัติ เราจะนำไปใช้ในแอปพลิเคชัน Angular โดยใช้ BreakPoint Observer ของ Angular ในขณะที่ใช้วิธีนี้ เราจะเน้นว่าเหตุใดเฟรมเวิร์กยอดนิยมนี้จึงช่วยให้เราทำงานกับเทคนิคดังกล่าวได้อย่างราบรื่น

เบรกพอยต์ของรูปภาพและรูปภาพที่ตอบสนอง

ในยุคของเลย์เอาต์ที่ตอบสนอง (ที่เราจับเบรกพอยท์ตามขนาดวิวพอร์ตและเปลี่ยนเลย์เอาต์ของเพจตามเบรกพอยต์) เราต้องตรวจสอบให้แน่ใจด้วยว่ารูปภาพสามารถแสดงได้ด้วยขนาดที่เหมาะสม — แม้หลังจากเลย์เอาต์ เปลี่ยน. การเลือกภาพที่เหมาะสมนั้นค่อนข้างท้าทายสำหรับเว็บไซต์ตอบสนองสมัยใหม่

มาพูดถึงสองตัวเลือกที่นักพัฒนาสามารถใช้ได้ในขณะนี้

srcset

srcset ช่วยให้เรากำหนดรายการภาพที่เบราว์เซอร์สลับไปมาตามขนาด <img> ที่แสดงผลและความหนาแน่นของการแสดงผล

ลองมาดูตัวอย่าง:

 <img src="tuscany.jpg" />

ในข้างต้น เราระบุภาพ 3 ภาพ โดยที่ w ระบุความกว้างของพิกเซลของภาพ เมื่อใช้ข้างต้นกับ srcset เราจำเป็นต้องระบุแอตทริบิวต์ sizes ด้วย (ซึ่งจำเป็นเนื่องจากข้อกำหนดข้อกำหนดว่าหากเราใช้ srcset และ w เราต้องมีแอตทริบิวต์ขนาดด้วย) จุดประสงค์ของคุณลักษณะนี้คืออะไร? เบราว์เซอร์ต้องเลือกทรัพยากรที่จะโหลดจากชุดแหล่งที่มาก่อนที่จะจัดวางหน้า (ก่อนที่พวกเขาจะรู้ว่าภาพจะใหญ่แค่ไหน) เราสามารถนึกถึง sizes เป็นคำใบ้สำหรับเบราว์เซอร์ว่าหลังจากการจัดวาง รูปภาพจะใช้ความกว้าง 100% ของวิวพอร์ต (นั่นคือสิ่งที่ vw อ้างถึง) เบราว์เซอร์รู้ความกว้างของวิวพอร์ตจริง (รวมถึง DPR ของรูปภาพ) ในขณะโหลด ดังนั้นจึงคำนวณหาขนาดทรัพยากรที่ต้องการและเลือกหนึ่งชุดจากชุดแหล่งที่มา

การผสมผสานองค์ประกอบ <picture> และ <source media=""> ช่วยให้เราสลับทรัพยากรรูปภาพเพื่อตอบสนองต่อการสืบค้นสื่อ เช่นเดียวกับที่จุดพักเลย์เอาต์

ลองมาดูตัวอย่างของสิ่งนี้ด้วย:

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

เปลี่ยนโค้ดด้านบนในเครื่องด้วยรูปภาพที่คุณเลือกซึ่งมีขนาดเล็ก กลาง และใหญ่ โปรดสังเกตว่า การปรับขนาดเบราว์เซอร์ คุณจะได้ภาพที่แตกต่างออกไป

ประเด็นสำคัญจากทั้งหมดข้างต้นคือ หากเราต้องการสลับภาพที่จุดสั่งหยุด เราสามารถใช้องค์ประกอบ <picture> เพื่อใส่ข้อความค้นหาสื่อลงในมาร์กอัปได้

หมายเหตุ : หากคุณสนใจที่จะสำรวจความแตกต่างระหว่าง <picture> และ srcset + sizes ฉันแนะนำให้อ่านบทความที่ยอดเยี่ยมของ Eric Portis: srcset and sizes

จนถึงตอนนี้ เราได้พูดถึงวิธีใช้เบรกพอยต์ของรูปภาพพร้อมกับคิวรีสื่อในสภาพแวดล้อม HTML ล้วนๆ จะดีกว่ามากไหมที่จะมีวิธีที่สะดวกเกือบกึ่งอัตโนมัติในการสร้างเบรกพอยต์ของรูปภาพรวมถึงรูปภาพที่เกี่ยวข้องสำหรับเบรกพอยต์โดยไม่ต้องระบุคิวรีสื่อเลย โชคดีสำหรับเรา Angular มีกลไกในตัวเพื่อช่วยเรา และเราจะดูที่การสร้างภาพที่เหมาะสมแบบไดนามิกตามเงื่อนไขบางประการโดยใช้บริการของบุคคลที่สาม

โมดูลเค้าโครงเชิงมุม

Angular มาพร้อมกับ Layout Module ซึ่งอยู่ในชุดเครื่องมือ CDK (Component Dev Kit) Angular CDK มีเครื่องมือที่ได้รับการทดสอบอย่างดีเพื่อช่วยในการพัฒนาส่วนประกอบ ส่วนหนึ่งของ CDK คือ Layout Module ซึ่งมี BreakpointObserver ตัวช่วยนี้ให้การเข้าถึงจุดสั่งหยุดการสืบค้นสื่อ หมายความว่าส่วนประกอบ (และเนื้อหา) สามารถปรับให้เข้ากับการเปลี่ยนแปลงเมื่อขนาดเบราว์เซอร์ (ขนาดหน้าจอ) เปลี่ยนแปลงโดยสัญชาตญาณ

การอ่านที่แนะนำ : Layout Module

ตอนนี้เรามีทฤษฎีเรียบร้อยแล้ว มาลงมือทำธุรกิจกันและสร้างแอปพลิเคชันที่จะนำเบรกพอยต์ของรูปภาพที่ตอบสนองมาใช้ ในการทำซ้ำครั้งแรกนี้ เราจะสร้างเชลล์ของแอปพลิเคชันผ่าน Angular CLI: ng new bpo และเลือกตัวเลือกที่จำเป็น

ในการใช้ BreakpointObserver เราต้องติดตั้ง CDK Layout Module ของ Angular ด้วย ซึ่งเราสามารถทำได้ผ่าน npm: npm i @angular/cdk

หลังจากการติดตั้ง เราจะสามารถเพิ่มคำสั่งนำเข้าที่จำเป็นให้กับส่วนประกอบใดๆ ที่เราต้องการ:

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

การใช้ BreakpointObserver ทำให้เราสามารถสมัครรับการเปลี่ยนแปลงในความกว้างของวิวพอร์ต และ Angular ให้การเข้าถึงที่สะดวกแก่เรา ซึ่งหมายความว่าเราไม่จำเป็นต้องใช้การสืบค้นสื่อเลย! ไปข้างหน้าและลองทำสิ่งนี้:

 // 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 } }); }

ดังที่กล่าวไว้ก่อนหน้าคุณสมบัติ accessor ด้านบนแสดงถึงการสืบค้นสื่อด้วยวิธีต่อไปนี้:

• Breakpoints.XSmall .XSmall : ความกว้างสูงสุด = 599.99px
• Breakpoints.Small พอยต์ขนาดเล็ก : ความกว้างต่ำสุด = 600px และความกว้างสูงสุด = 959.99px
• Breakpoints.Medium พอยต์ขนาดกลาง : ความกว้างต่ำสุด = 960px และความกว้างสูงสุด = 1279.99px
• Breakpoints.Large พอยต์ขนาดใหญ่ : ความกว้างต่ำสุด = 1280px และความกว้างสูงสุด = 1919.99px
• Breakpoints.XLarge พอยต์ XLarge : ความกว้างต่ำสุด = 1920px

ตอนนี้เรามีทุกอย่างพร้อมแล้ว ซึ่งหมายความว่า เราสามารถเริ่มสร้างภาพที่เหมาะสมได้

เบรกพอยต์ที่ตอบสนองสำหรับรูปภาพ

เรามีตัวเลือกสองสามอย่างในการสร้างภาพที่ตอบสนอง:

1. ตัวสร้างเบรกพอยต์ที่ตอบสนอง
   โดยใช้เครื่องมือนี้ เราสามารถอัปโหลดภาพใดๆ ตั้งค่าตัวเลือกต่างๆ เช่น จำนวนภาพที่เราต้องการสร้าง หลังจากเรียกใช้เครื่องมือนี้แล้ว เราจะมีการแสดงภาพเกี่ยวกับรูปภาพที่สร้างขึ้น และเราสามารถดาวน์โหลดรูปภาพเหล่านั้นเป็นไฟล์ zip พร้อมกับโค้ดที่สร้างขึ้นซึ่งใช้องค์ประกอบ <picture> ที่กล่าวถึงก่อนหน้านี้
2. อีกวิธีหนึ่งคือการสร้างขั้นตอนการสร้างสำหรับโปรเจ็กต์ของเราเพื่อสร้างเบรกพอยต์ผ่านแพ็คเกจบางตัวที่มีอยู่ในที่เก็บ NPM เช่น gulp-responsive หรือ grunt-responsive-images ทั้งสองสิ่งนี้ขึ้นอยู่กับไลบรารีเพิ่มเติมที่เราจำเป็นต้องติดตั้งสำหรับระบบปฏิบัติการของเรา (โปรดตรวจสอบที่เก็บที่เหมาะสมเพื่อดูข้อมูลเพิ่มเติม)
3. อีกวิธีหนึ่งคือการใช้บริการเช่น Cloudinary เพื่อจัดเก็บภาพและให้บริการในขนาดและรูปแบบที่เราต้องการโดยการแก้ไข URL สำหรับทรัพยากรที่ร้องขอเท่านั้น นี่จะเป็นแนวทางของเรา เนื่องจากสิ่งนี้ทำให้เรามีความยืดหยุ่นสูงสุด

การอ่านที่แนะนำ : กำหนดทิศทางศิลปะโดยอัตโนมัติด้วยตัวสร้างจุดพักรูปภาพที่ตอบสนอง โดย Eric Portis

ฉันได้อัปโหลดรูปภาพต้นฉบับไปยังบัญชี Cloudinary ของฉันแล้ว ซึ่งหมายความว่าฉันสามารถเข้าถึงรูปภาพนั้นผ่าน URL ต่อไปนี้:

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

นี่คือรูปภาพขนาดเต็ม ดิบ เป็นต้นฉบับ และไม่มีการเปลี่ยนแปลงที่เราจะใช้งานด้วย

เราสามารถแก้ไข URL ของรูปภาพเพื่อสร้างเวอร์ชันที่เล็กกว่าได้มาก ตัวอย่างเช่น หากเราต้องการมีรูปภาพที่มีความกว้าง 600 พิกเซล เราสามารถอัปเดต Cloudinary URL* ให้เป็นดังต่อไปนี้:

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

* หมายเหตุ w_600 เพิ่มไปยัง URL

หวังว่าเมื่อถึงจุดนี้ คุณจะเห็นว่าทั้งหมดนี้กำลังจะไปที่ใด จากแนวทางข้างต้น เราสามารถเริ่มสร้างภาพที่เหมาะสมสำหรับเบรกพอยต์ที่เหมาะสมได้อย่างรวดเร็ว

การใช้ Cloudinary หมายความว่าเราไม่จำเป็นต้องสร้าง จัดเก็บ และจัดการอิมเมจเดียวกันหลายเวอร์ชัน — Cloudinary ดำเนินการให้เราได้ทันที

มาอัปเดตรหัสของเรา:

 <!-- 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([ ... } }

เราสามารถเลือกเบรกพอยต์จำนวนเท่าใดก็ได้ที่จะสังเกตจากรายการที่กล่าวถึงก่อนหน้านี้ และเนื่องจากเรามีผู้สังเกตการณ์ เราจึงสามารถสมัครรับการเปลี่ยนแปลงและดำเนินการกับมันได้:

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

ในการจัดการตัวเลือกสำหรับรูปภาพต่างๆ ใน ​​Cloudinary เราจะใช้แนวทางที่ง่ายต่อการปฏิบัติตาม สำหรับแต่ละกรณี เราจะสร้างตัวแปรตัวเลือกและอัปเดต Cloudinary URL สุดท้าย

เพิ่มสิ่งต่อไปนี้ที่ด้านบนของข้อกำหนดส่วนประกอบ:

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

และเพิ่มสิ่งต่อไปนี้เข้ากับคำสั่ง if แรก:

 // 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;

ผลลัพธ์จะเป็น Cloudinary URL ที่อัปเดต:

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

อะไรคือตัวเลือกที่เรากำลังตั้งค่าที่นี่?

• c_thumb (สร้างภาพขนาดย่อของภาพ);
• g_auto (เน้นที่ส่วนที่น่าสนใจที่สุด เราเห็นมหาวิหารในภาพขนาดย่อ);
• f_auto (ใช้รูปแบบที่เหมาะสมที่สุดสำหรับเบราว์เซอร์ที่กำหนด เช่น WebP สำหรับ Chrome)
• q_auto (ลดคุณภาพ — และขนาดโดยรวม — ของภาพโดยไม่กระทบต่อภาพ)
• w_400 (กำหนดความกว้างของภาพเป็น 400px)

เพื่อความอยากรู้ เรามาเปรียบเทียบขนาดภาพต้นฉบับกับภาพที่สร้างขึ้นใหม่นี้กัน: 2.28 MB เทียบกับ 29.08 KBs!

ตอนนี้เรามีงานที่ตรงไปตรงมา: เราจำเป็นต้องสร้างตัวเลือกที่แตกต่างกันสำหรับเบรกพอยต์ที่แตกต่างกัน ฉันได้สร้างแอปพลิเคชันตัวอย่างบน StackBlitz เพื่อให้คุณสามารถทดสอบได้ทันที (คุณสามารถดูตัวอย่างได้ที่นี่)

บทสรุป

ความหลากหลายของอุปกรณ์เดสก์ท็อปและมือถือ และปริมาณสื่อที่ใช้ในเว็บในปัจจุบันมีจำนวนที่โดดเด่น ในฐานะนักพัฒนาเว็บ เราต้องอยู่ในระดับแนวหน้าในการสร้างเว็บแอปพลิเคชันที่ทำงานบนอุปกรณ์ใดๆ ก็ได้ และไม่ส่งผลกระทบต่อประสบการณ์การมองเห็น

มีวิธีการมากมายที่ช่วยให้แน่ใจว่ารูปภาพที่ถูกต้องถูกโหลดไปยังอุปกรณ์ที่ถูกต้อง (หรือแม้แต่เมื่อปรับขนาดอุปกรณ์) ในบทความนี้ เราได้ทบทวนแนวทางที่ใช้คุณลักษณะ Angular ในตัวที่เรียกว่า BreakPoint Observer ซึ่งทำให้เรามีอินเทอร์เฟซที่มีประสิทธิภาพสำหรับจัดการกับภาพที่ตอบสนอง นอกจากนี้เรายังได้ดูบริการที่ช่วยให้เราสามารถให้บริการ แปลงโฉม และจัดการภาพในระบบคลาวด์ได้ การมีเครื่องมือที่น่าสนใจอยู่ในมือ เรายังคงสร้างประสบการณ์การใช้เว็บที่สมจริงได้โดยไม่สูญเสียผู้เยี่ยมชม