أثناء نشر موقع ويب، يستخدم المطورون عادةً نفس الصورة لجميع أحجام الشاشات، وهي ليست ممارسة جيدة حيث لا يمكن الاعتماد على المتصفح لتغيير الحجم. في مثل هذه الحالة، تدخل الصور سريعة الاستجابة حيز التنفيذ مما يضمن تنزيل الصورة بالحجم والجودة المناسبين للجهاز المقابل، وبالتالي تعزيز سرعة تحميل الصفحة.
كيفية تحسين سرعة تحميل الصفحة باستخدام الصور المستجيبة؟
لتعزيز سرعة تحميل الصفحة عبر الصور سريعة الاستجابة، خذ بعين الاعتبار المنهجيات التالية:
المثال 1: تحسين سرعة تحميل الصفحة عبر الصور المستجيبة باستخدام السمة 'srcset'.
يمكن أن يكون الأسلوب الأكثر ملاءمة لتطبيق الصور سريعة الاستجابة هو استخدام ' com.srcset 'السمة المتراكمة في' ' بطاقة شعار. تتيح هذه السمة للمبرمج تحديد أحجام مختلفة للصور، ويختار المتصفح تلقائيًا الصورة الأكثر ملاءمة فيما يتعلق بحجم شاشة المستخدم. وفيما يلي المظاهرة:
نوع الوثيقة أتش تي أم أل >
< لغة البرمجة >
< رأس >
< ميتا مجموعة محارف = 'utf-8' >
< ميتا اسم = 'إطار العرض' محتوى = 'العرض=عرض الجهاز، المقياس الأولي=1' >
< عنوان >< عنوان >
رأس >
< جسم >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' كل شئ = 'صورة مستجيبة'
com.srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 400 واط، F:\JOB TECHNICAL ARTICLES\imgre.png 800 واط، F:\JOB TECHNICAL ARTICLES\imgre.png 1200 واط'
/>
جسم >
لغة البرمجة >
في هذا الكود:
- ال ' com.srcset يتم تضمين السمة التي تشتمل على مسار الصورة وعروضها المختلفة في كل مرة.
- هكذا تكون الصورة' F:\JOB TECHNICAL ARTICLES\imgre.png 400w ' يمثل مسار صورة بعرض ' 400 'بكسل.
- وبناءً على هذه المعلومات، يقوم المتصفح بتحليل الصورة الأكثر ملاءمة للتنزيل بناءً على حجم شاشة المستخدم بحيث تعرض الشاشات الأصغر حجمًا صورًا أصغر، وبالتالي الحفاظ على النطاق الترددي.
انتاج |
المثال 2: تحسين سرعة تحميل الصفحة عبر الصور المستجيبة عن طريق تحديد كثافات بكسل مختلفة
في هذا المثال، سيتم تحديد مسار الصورة مع كثافات بكسل مختلفة للشاشات عالية الدقة. ويمكن تحقيق ذلك عبر ' com.srcset 'السمة، الموضحة أدناه:
نوع الوثيقة أتش تي أم أل >< لغة البرمجة >
< رأس >
< ميتا مجموعة محارف = 'utf-8' >
< ميتا اسم = 'إطار العرض' محتوى = 'العرض=عرض الجهاز، المقياس الأولي=1' >
< عنوان >< عنوان >
رأس >
< جسم >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' كل شئ = 'صورة مستجيبة' com.srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 1x, F:\JOB TECHNICAL ARTICLES\imgre.png 1.5x, F:\JOB TECHNICAL ARTICLES\imgre.png 2x'
/>
جسم >
لغة البرمجة >
في مقتطف التعليمات البرمجية هذا، حدد مسار الصورة ثلاث مرات بكثافة بكسلات مختلفة. ومن هذا القبيل أن المتصفح يختار الصورة الأكثر ملاءمة/مناسبة لضمان أعلى جودة على الشاشات المختلفة.
ملحوظة: ال ' 1x 'البكسل هو القيمة الافتراضية لذا فهو خيار للمستخدم أن يربطه بمسار الصورة أم لا.
انتاج |
المثال 3: تحسين سرعة تحميل الصفحة عبر الصور المستجيبة باستخدام سمة 'الأحجام'.
في بعض المواقف، قد يكون هناك قيود حيث يختلف حجم الصورة الفعلي على الشاشة عن عرض الشاشة. ولمعالجة هذه المشكلة، ' الأحجام يمكن استخدام السمة لتضمين حجم الصورة فيما يتعلق باستعلامات الوسائط أو الحجم الثابت. أدناه هو العرض التوضيحي للكود:
نوع الوثيقة أتش تي أم أل >< لغة البرمجة >
< رأس >
< ميتا مجموعة محارف = 'utf-8' >
< ميتا اسم = 'إطار العرض' محتوى = 'العرض=عرض الجهاز، المقياس الأولي=1' >
< عنوان >< عنوان >
رأس >
< جسم >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' كل شئ = 'صورة مستجيبة' com.srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 50w، F:\JOB TECHNICAL ARTICLES\imgre.png 800w، F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
الأحجام = '(أقصى عرض: 800 بكسل) 100 فولت، 800 بكسل'
/>
جسم >
لغة البرمجة >
في كتلة التعليمات البرمجية هذه، ' الأحجام 'تدمج السمة استعلامات الوسائط وأحجامها. إنه يوجه المتصفح لاختيار حجم الصورة فيما يتعلق بعرض شاشة المستخدم. يؤدي هذا إلى التأكد من أن الصورة (الصور) لا تتجاوز الحد الأقصى للعرض المستهدف.
انتاج |
اعتبارات مهمة أثناء استخدام سمة 'الأحجام'.
هناك بعض القيود في استخدام ' الأحجام 'السمة مدرجة أيضًا أدناه:
- عند استخدام استعلامات الوسائط المتعددة في ' الأحجام '، تأكد من اختيار أول استعلام حقيقي عن الوسائط. تأكد أيضًا من ترتيب استعلامات الوسائط من الأكثر تحديدًا إلى الأقل تحديدًا.
- لا تدعم سمة 'الأحجام' الأحجام المئوية نظرًا لأن المتصفح لا يدرك مدى اتساع شيء محدد بالنسب المئوية حتى يكون على علم بعرض العنصر الأصلي.
المثال 4: تحسين سرعة تحميل الصفحة عبر الصور المستجيبة باستخدام العنصر '
ال ' <صورة> يمكّن العنصر 'المبرمج من عرض ونشر صور متعددة بأحجام مختلفة للشاشة. إنه مفيد في الحالات التي يختلف فيها المحتوى حسب الجهاز. أدناه هو العرض التوضيحي للكود:
نوع الوثيقة أتش تي أم أل >< لغة البرمجة >
< رأس >
< ميتا مجموعة محارف = 'utf-8' >
< ميتا اسم = 'إطار العرض' محتوى = 'العرض=عرض الجهاز، المقياس الأولي=1' >
< عنوان >< عنوان >
رأس >
< جسم >
< صورة >
< مصدر وسائط = '(الحد الأقصى للعرض: 100 بكسل)' com.srcset = 'F:\JOB TECHNICAL ARTICLES\imgbanner.png' />
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' كل شئ = 'صورة مستجيبة' />
صورة >
جسم >
لغة البرمجة >
وفقًا لسطور الكود هذه:
- حدد ال ' <صورة> 'العنصر الذي يجمع' <المصدر> ' لصور مختلفة والسماح للمتصفح باختيار العنصر المناسب بناءً على حجم شاشة المستخدم.
- وأيضًا، إذا لم يكن أي من ' <المصدر> 'العناصر مناسبة لحجم الشاشة، الصورة المحددة في'
تعمل العلامة كعلامة احتياطية.
- يؤدي هذا إلى إضافة صورة بديلة في حالة غير متوقعة، وبالتالي الحفاظ على سرعة تحميل الصفحة المحسنة.
انتاج |
خاتمة
يمكن تحسين سرعة تحميل الصفحة من خلال الصور سريعة الاستجابة باستخدام ' com.srcset '، والتي تحدد كثافات البكسل المختلفة، باستخدام الخاصية ' الأحجام 'السمة، أو عبر' <صورة> ' عنصر. ال ' <صورة> يمكن النظر في نهج العنصر إذا لم تنجح أي من الطرق الأخرى حيث تضيف صورة بديلة في حالة غير متوقعة دون خيارات إضافية لنفس الصورة.