استخدِم سياسات الصور المحسّنة لضمان استخدام موقعك الإلكتروني للصور الأفضل أداءً.
غالبًا ما تستهلك الصور قدرًا كبيرًا من المساحة المرئية، وتشكّل معظم وحدات البايت التي يتم تنزيلها على موقع الويب. يمكن أن يؤدي تحسين الصور إلى تحسين أداء التحميل وتقليل حركة بيانات الشبكة
المستغرب أن أكثر من نصف المواقع على الويب يعرض صورًا مضغوطة بشكل سيّئ أو صور كبيرة غير ضرورية. يتيح ذلك مساحة كبيرة لتحسينات الأداء بمجرد تحسين الصور.
يمكنك أن تطرح السؤال التالي على نفسك: كيف أعرف ما إذا كانت صوري محسّنة وكيف يمكنني تحسينها؟ إننا نختبر مجموعة جديدة من سياسات الميزات لتحسين الصور: oversized-images وunoptimized-lossy-images
وunoptimized-lossless-images وunoptimized-lossless-images-strict.
كل هذه الميزات متاحة الآن لتجارب المصدر.
سياسات الصور المحسّنة
تفرض "سياسة الأذونات" قيودًا جديدة على الصور التي يمكن تطبيقها مع فرض قيود على وقت التطوير. أما الصور التي تنتهك أيًا من القيود، فسيتم عرضها على شكل صور عناصر نائبة، ويسهل تحديدها وإصلاحها. يمكن تحديد هذه السياسات في وضع "إعداد التقارير فقط" حيث سيتم عرض الصور بشكل طبيعي بدون فرضها أثناء رصد الانتهاكات من خلال التقارير. (يمكنك الاطّلاع على وضع إعداد التقارير فقط في أي مكان، أدناه للحصول على التفاصيل).
صور كبيرة الحجم
تفرض سياسة الأذونات oversized-images قيودًا على الأبعاد الأساسية للصورة بالنسبة إلى حجم حاويتها.
عند استخدام سياسة oversized-images في مستند، سيتم استبدال أي عنصر <img> بدرجة دقته الأساسية بأكثر من X مرة عن حجم الحاوية في أي من البُعدين، وسيتم استبداله بصورة عنصر نائب.
ولماذا؟
يؤدي عرض صور أكبر مما يمكن لجهاز العرض عرضه - مثل عرض صور سطح المكتب في سياقات الجوّال أو عرض صور عالية الكثافة على جهاز منخفض الكثافة - إلى إهدار حركة بيانات الشبكة وذاكرة الجهاز. اطّلِع على عرض الصور ذات الأبعاد الصحيحة وعرض صور متجاوبة للحصول على معلومات عن تحسين الصور.
أمثلة
إليك بعض الأمثلة لتوضيح ذلك. في ما يلي السلوك التلقائي عند تخفيض حجم عرض الصورة إلى النصف.
في حال تطبيق سياسة الأذونات التالية، سأحصل على صورة عنصر نائب بدلاً من ذلك.
Permissions-Policy: oversized-images *(2);
أحصل على نتائج مماثلة إذا قمت بخفض العرض أو الارتفاع فقط.
How to use
باختصار، يمكن تحديد سياسة oversized-images من خلال أي مما يلي:
- عنوان HTTP يتضمّن العنصر
Permissions-Policy - السمة
allow:<iframe>
للإقرار بسياسة oversized-images، عليك تقديم ما يلي:
- اسم الميزة،
oversized-images(مطلوب) - قائمة بالمصادر (اختيارية)
- قيم الحدّ الأدنى (أي نسبة الخفض س) للأصول المحدّدة في الأقواس (اختيارية)
ننصح باستخدام نسبة تصغير تبلغ 2.0 أو أقل. يمكنك استخدام الصور المتجاوبة بدرجات دقة مختلفة لعرض الصور على أفضل نحو على مختلف أحجام الشاشات ودرجات الدقة وما إلى ذلك.
مزيد من الأمثلة
Permissions-Policy: oversized-images *(2.0)
يتم فرض السياسة على جميع المصادر التي تكون قيمة الحد الأدنى لها 2.0. لا يُسمح بأي عنصر
<img> يحتوي على صورة تزيد نسبة تصغيره عن
2.0 وسيتم استبداله بصورة عنصر نائب.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
يتم فرض السياسة على أصل الموقع الإلكتروني بقيمة حد أدنى تبلغ 1.5.
ولن يتم عرض عناصر <img> في سياقات التصفُّح ذات المستوى الأعلى وسياقات التصفُّح المتداخلة ذات المصدر نفسه إلا إذا كانت نسبة تخفيض الحجم أقل من 1.5 أو تساويها. سيتم عرض عناصر <img> بشكل طبيعي في أي مكان آخر.
غير محسَّنة-{lossy,lossless}-الصور
تفرض سياسات الميزات unoptimized-lossy-images وunoptimized-lossless-images
وunoptimized-lossless-images-strict قيودًا على حجم ملف
الصورة بالنسبة إلى درجة الدقة الأساسية:
unoptimized-lossy-images- يجب ألا تتجاوز التنسيقات المفقودة نسبة X وحدات بايت لكل بكسل، مع حدّ أقصى ثابت قدره 1 كيلوبايت. بالنسبة إلى صورة العرض × الارتفاع، يتم احتساب الحدّ الأدنى لحجم الملف على النحو التالي: عرض × ارتفاع × س +1024.
unoptimized-lossless-images- يجب ألّا تتجاوز التنسيقات غير القابلة للفقدان نسبة X وحدات بايت لكل بكسل، مع حدّ أقصى ثابت قدره 10 كيلوبايت. بالنسبة إلى صورة عرض × ارتفاع، يتم احتساب الحدّ الأدنى لحجم الملف على النحو التالي: عرض × ارتفاع × س +10240.
unoptimized-lossless-images-strict- يجب ألا تتجاوز التنسيقات غير القابلة للقياس نسبة البايت لكل بكسل، وهي X، مع حدّ أقصى ثابت قدره 1 كيلوبايت. بالنسبة إلى صورة العرض × الارتفاع، يتم احتساب الحدّ الأدنى لحجم الملف على النحو التالي: عرض × ارتفاع × س +1024.
وعند استخدام أي من هذه السياسات في مستند، سيتم استبدال أي عنصر <img> يخالف القيد بصورة عنصر نائب.
ولماذا؟
كلما زاد حجم التنزيل، زادت مدّة تحميل الصورة. يجب إبقاء حجم الملف صغيرًا قدر الإمكان عند تحسين الصورة: إزالة البيانات الوصفية واختيار تنسيق جيد للصورة واستخدام ضغط الصور وغير ذلك اطّلِع على القسم استخدام Imagemin لضغط الصور واستخدام صور WebP للحصول على معلومات حول تحسين صورك.
مثال
يوضّح ما يلي سلوك المتصفِّح التلقائي. في حال عدم توفّر سياسة الأذونات، يمكن عرض صورة غير محسَّنة غير محسَّنة تمامًا كما يتم عرض الصورة المحسّنة.
في حال تطبيق سياسة الأذونات التالية، سأحصل على صورة عنصر نائب بدلاً من ذلك.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
إذا كنت مستخدمًا مبتدئًا لسياسة الأذونات، يُرجى الاطّلاع على مقدمة حول سياسة الأذونات لمعرفة المزيد من التفاصيل.
باختصار، يمكن تحديد سياسات unoptimized-{lossy,lossless}-images
من خلال:
- عنوان HTTP يتضمّن العنصر
Permissions-Policy - السمة
allow:<iframe>
للإعلان عن سياسة unoptimized-{lossy,lossless}-images، عليك
تقديم ما يلي:
- اسم الميزة، مثل
unoptimized-lossy-images(مطلوب) - قائمة بالمصادر (اختيارية)
- قيم الحدّ الأدنى (أي نسبة البايت لكل بكسل X) للأصول المحدّدة بين قوسين (اختياري)
ننصحك باستخدام نسبة بايت لكل بكسل تبلغ 0.5 أو أقل مع
unoptimized-lossy-images ونسبة وحدات بايت لكل بكسل 1 أو أقل
في كل من
unoptimized-lossless-images وunoptimized-lossless-images-strict.
تتميز تنسيقات WebP بنسب ضغط أفضل من التنسيقات الأخرى. اعرض جميع صورك بتنسيق WebP مع فقدان البيانات إن أمكن. وإذا لم يكن ذلك كافيًا، جرِّب تنسيق WebP الخالي من الأخطاء. استخدِم تنسيق JPEG على المتصفّحات التي لا تتوافق مع تنسيقات WebP. استخدم PNG إذا لم يعمل أي من التنسيقات.
إذا كنت تستخدم تنسيقات WebP، جرِّب استخدام حدود أكثر صرامة:
- 0.2 لـ WEBPV8
- 0.5 لـ WEBPL
مزيد من الأمثلة
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
يتم فرض هذه السياسة على جميع المصادر التي تكون قيمة الحد الأدنى فيها 0.5 (للتنسيقات مع فقدان البيانات) و1 (للتنسيقات التي لا تؤدي إلى فقدان البيانات). لا يُسمَح بأي عنصر <img> تزيد نسبة البايت لكل بكسل في صورته عن القيد وسيتم استبداله بصورة عنصر نائب.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
يتم فرض هذه السياسة على أصل الموقع الإلكتروني باستخدام قيمة الحد الأدنى 0.3 (للتنسيقات التي تؤدي إلى فقدان البيانات) و0.8 (للتنسيقات التي لا تؤدي إلى فقدان البيانات). ولن يتم عرض عناصر <img> في سياقات التصفُّح ذات المستوى الأعلى وسياقات التصفُّح المتداخلة الأصلية نفسها إلا إذا كانت نسبة البايت لكل بكسل تستوفي هذه القيود. سيتم عرض عناصر <img> بشكل طبيعي في أي مكان آخر.
وضع "إعداد التقارير فقط" في البرية
قد لا يكون نشر موقع إلكتروني يتضمّن صور عناصر نائبة هو ما تريده. يمكنك استخدام
السياسات في وضع التنفيذ (مع عرض صور غير محسَّنة كصور عناصر نائبة) أثناء عملية التطوير والتقسيم المرحلي، واستخدام وضع "إعداد التقارير فقط" في
الإنتاج. (يُرجى الاطّلاع على إعداد تقارير
سياسة الأذونات
للحصول على مزيد من التفاصيل). على غرار عنوان HTTP يتضمّن Permissions-Policy، يتيح لك عنوان Permissions-Policy-Report-Only
مراقبة تقارير الانتهاكات بشكل علني بدون أي إجراء تنفيذ.
القيود
لا تعمل سياسات الصور إلا على عناصر HTML الخاصة بالصور (<img> و<source> وما إلى ذلك)، وهي غير متاحة حتى الآن على صور الخلفية أو المحتوى الذي يتم إنشاؤه. إذا أردت تطبيق سياسات على محتوى أوسع نطاقًا، يُرجى إعلامنا بذلك.
تحسين الصور
لقد تحدثت كثيرًا عن تحسين الصور، لكن لم أتحدث عن كيفية إجراء ذلك. هذا الموضوع خارج نطاق هذه المقالة، ولكن يمكنك معرفة المزيد من المعلومات من خلال الروابط أدناه ومن الدروس التطبيقية حول الترميز المدرجة في نهاية هذه المقالة.
يُرجى إرسال ملاحظاتك إلينا
نأمل أن تكون هذه المقالة قد فهمت سياسات الصور وتثير فضولك. يسرّنا أن تجرّب هذه السياسات وأن ترسل إلينا ملاحظاتك.
يمكنك إرسال ملاحظاتك عن كل ميزة من الميزات المذكورة في هذه المقالة إلى قائمتنا البريدية: feature-control@chromium.org.
نودّ معرفة قيم الحدّ التي استخدمتها وترى أنّها مفيدة. نودّ معرفة ما إذا كان استخدام unoptimized-lossless-images أو unoptimized-lossless-images-strict أكثر سهولة في الاستخدام أو سهولة في الاستخدام، أو ما إذا كان علينا
استخدام فرق النفقات العامة بدلاً من ذلك. سنرسل استبيانًا
قُرب انتهاء التجربة. يُرجى متابعة أخبارنا باستمرار.