إدارة نقاط فصل الصورة مع الزاوي

بصفتنا مطوري ويب ، غالبًا ما يُطلب منا إنشاء تطبيقات سريعة الاستجابة وغنية بالوسائط. إن وجود مثل هذه المتطلبات يعني أننا بحاجة إلى العمل مع نقاط توقف الصور ، بالإضافة إلى استعلامات الوسائط لأننا نريد تقديم أفضل تجربة للمستخدمين النهائيين. إضافة إلى قائمة المتطلبات ، قد نحتاج إلى استخدام إطار عمل أمامي مثل 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> لوضع استعلامات الوسائط في الترميز مباشرةً.

ملاحظة : إذا كنت مهتمًا باستكشاف الاختلافات بين sizes <picture> و srcset + ، فإنني أوصي بقراءة مقالة Eric Portis الرائعة: sizes srcset .

لقد ناقشنا حتى الآن كيفية استخدام نقاط توقف الصور جنبًا إلى جنب مع استعلامات الوسائط في بيئة HTML خالصة. ألن يكون من الأفضل كثيرًا أن يكون لديك طريقة مريحة شبه آلية لإنشاء نقاط توقف للصور بالإضافة إلى الصور المقابلة لنقاط التوقف حتى بدون الاضطرار إلى تحديد استعلامات الوسائط على الإطلاق؟ لحسن الحظ بالنسبة لنا ، تمتلك Angular آلية مدمجة لمساعدتنا وسنلقي نظرة أيضًا على إنشاء الصور المناسبة ديناميكيًا بناءً على ظروف معينة باستخدام خدمة جهة خارجية.

وحدة التخطيط الزاوي

يأتي Angular مزودًا بوحدة تخطيط موجودة في مجموعة أدوات CDK (مجموعة تطوير المكونات). يحتوي Angular CDK على أدوات تم اختبارها جيدًا للمساعدة في تطوير المكونات. جزء واحد من CDK هو وحدة التخطيط التي تحتوي على BreakpointObserver . يتيح هذا المساعد الوصول إلى نقاط توقف استعلام الوسائط ، مما يعني أن المكونات (ومحتوياتها) يمكن أن تتكيف مع التغييرات عندما يتم تغيير حجم المتصفح (حجم الشاشة) بشكل بديهي.

يوصى بقراءة : وحدة التخطيط

الآن بعد أن أصبح لدينا النظرية بعيدًا عن الطريق ، فلنبدأ العمل وننشئ تطبيقًا ينفذ نقاط توقف للصور سريعة الاستجابة. في هذا التكرار الأول ، سننشئ غلاف التطبيق عبر Angular CLI: ng new bpo الخيارات الضرورية.

لاستخدام BreakpointObserver ، نحتاج أيضًا إلى تثبيت Angular's CDK Layout Module ، والذي يمكننا القيام به عبر 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 } }); }

كما ذكرنا سابقًا ، تعكس خصائص الموصل أعلاه استعلامات الوسائط بالطريقة التالية:

• Breakpoints.XSmall . XSmall: max-width = 599.99px
• Breakpoints.Small صغيرة: الحد الأدنى للعرض = 600 بكسل والحد الأقصى للعرض = 959.99 بكسل
• Breakpoints.Medium الإيقاف المتوسطة: الحد الأدنى للعرض = 960 بكسل والحد الأقصى للعرض = 1279.99 بكسل
• Breakpoints.Large : كبيرة: الحد الأدنى للعرض = 1280 بكسل والحد الأقصى للعرض = 1919.99 بكسل
• Breakpoints.XLarge . XLarge: min-width = 1920px

لدينا الآن كل شيء في مكانه مما يعني أنه يمكننا البدء في إنشاء الصور المناسبة.

نقاط توقف مستجيبة للصور

لدينا بعض الخيارات لإنشاء صور سريعة الاستجابة:

1. مولد نقاط توقف الصورة المستجيبة
   باستخدام هذه الأداة ، يمكننا تحميل أي صورة وإعداد خيارات متنوعة ، مثل عدد الصور التي نرغب في إنشائها. بعد تشغيل الأداة ، سيكون لدينا تمثيل مرئي للصور التي تم إنشاؤها ، ويمكننا تنزيلها كملف مضغوط مع بعض التعليمات البرمجية التي تم إنشاؤها والتي تستخدم عنصر <picture> المذكور سابقًا.
2. قد يكون الحل الآخر هو إنشاء خطوة بناء لمشروعنا لإنشاء نقاط توقف عبر بعض الحزم المتوفرة في مستودع NPM ، مثل الصور gulp-responsive أو المستجيبة grunt-responsive-images . كلاهما يعتمد على مكتبات إضافية نحن مطالبون بتثبيتها لنظام التشغيل الخاص بنا. (يرجى التحقق من المستودعات المناسبة للحصول على معلومات إضافية.)
3. هناك حل آخر يتمثل في استخدام خدمة مثل Cloudinary لتخزين الصور وتقديمها بالحجم والتنسيق الذي نحتاجه فقط من خلال تعديل عنوان URL للمورد المطلوب. سيكون هذا هو نهجنا لأن هذا يمنحنا أكبر قدر من المرونة.

يوصى بالقراءة : أتمتة التوجيه الفني باستخدام أداة إنشاء نقاط فصل الصور المستجيبة بواسطة إريك بورتيس

لقد قمت بتحميل الصورة الأصلية إلى حسابي في Cloudinary مما يعني أنه يمكنني الوصول إلى تلك الصورة عبر عنوان URL التالي:

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

هذه هي الصورة بالحجم الكامل والخام والأصلية وغير المتغيرة التي سنعمل معها.

يمكننا تعديل عنوان URL للصورة لإنشاء نسخة أصغر بكثير. على سبيل المثال ، إذا أردنا الحصول على صورة بعرض 600 بكسل ، فيمكننا تحديث عنوان URL الخاص بـ Cloudinary * ليكون كالتالي:

 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 ، سنستخدم نهجًا سيكون من السهل جدًا اتباعه. لكل حالة ، سننشئ متغير خيارات ونحدّث عنوان URL النهائي لـ Cloudinary.

أضف ما يلي في الجزء العلوي من تعريف المكون:

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

ستكون النتيجة عنوان URL محدث لـ Cloudinary:

 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 (يضبط عرض الصورة على 400 بكسل).

من أجل الفضول ، دعنا نقارن حجم الصورة الأصلي بهذه الصورة التي تم إنشاؤها حديثًا: 2.28 ميجا بايت مقابل 29.08 كيلو بايت!

لدينا الآن مهمة مباشرة: نحتاج إلى إنشاء خيارات مختلفة لنقاط توقف مختلفة. لقد أنشأت نموذجًا للتطبيق على StackBlitz حتى تتمكن من اختباره على الفور (يمكنك أيضًا مشاهدة معاينة هنا).

خاتمة

وصل تنوع أجهزة سطح المكتب والأجهزة المحمولة وكمية الوسائط المستخدمة في الويب اليوم إلى عدد مذهل. بصفتنا مطوري ويب ، يجب أن نكون في طليعة إنشاء تطبيقات الويب التي تعمل على أي جهاز ولا تؤثر على التجربة المرئية.

هناك عدد كبير من الطرق التي تتأكد من تحميل الصورة الصحيحة على الجهاز الصحيح (أو حتى عند تغيير حجم الجهاز). في هذه المقالة ، راجعنا نهجًا يستخدم ميزة Angular مدمجة تسمى BreakPoint Observer والتي تمنحنا واجهة قوية للتعامل مع الصور سريعة الاستجابة. علاوة على ذلك ، ألقينا أيضًا نظرة على خدمة تتيح لنا تقديم الصور وتحويلها وإدارتها في السحابة. بوجود مثل هذه الأدوات الجذابة بين أيدينا ، لا يزال بإمكاننا إنشاء تجارب ويب مرئية غامرة ، دون فقدان الزوار.