سياسات الصور لأوقات التحميل السريع وغيرها

استخدِم سياسات الصور المحسّنة لضمان استخدام موقعك الإلكتروني للصور الأفضل أداءً.

Luna Lu
Luna Lu

غالبًا ما تشغل الصور مساحة مرئية كبيرة وتشكّل معظم البايتات التي يتم تنزيلها على موقع إلكتروني. يمكن أن يؤدي تحسين الصور إلى تحسين أداء التحميل وتقليل عدد الزيارات إلى الشبكة.

من المفاجئ أنّ أكثر من نصف المواقع الإلكترونية على الويب تعرض صورًا مضغوطة بشكلٍ سيئ أو كبيرة جدًا بدون داعٍ. وهذا يترك مساحة كبيرة لتحسين الأداء من خلال تحسين الصور ببساطة.

قد تتساءل، كيف يمكنني معرفة ما إذا كانت صوري محسّنة وكيف يمكنني تحسينها؟ نحن نختبر مجموعة جديدة من سياسات الميزات لتحسين الصور: oversized-images وunoptimized-lossy-images unoptimized-lossless-images وunoptimized-lossless-images-strict. وأصبحت جميعها متاحة الآن لإصدارات الإصدارات العلنية التجريبية.

سياسات الصور المحسّنة

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

oversized-images

تفرض سياسة أذونات oversized-images قيودًا على الأبعاد الأساسية للصورة بالنسبة إلى حجم الحاوية.

عندما يستخدم المستند السياسة oversized-images، سيتم استبدال أي عنصر <img> بصورة عنصر نائب إذا كانت دقته الأساسية أكثر من X مرة من حجم الحاوية في أي بُعد.

لماذا؟

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

أمثلة

في ما يلي بعض الأمثلة على ذلك. يوضّح ما يلي السلوك التلقائي عند قطع حجم عرض الصورة إلى النصف.

تمثّل هذه السمة سلوك تغيير الحجم التلقائي.
سلوك تغيير الحجم التلقائي:

في حال تطبيق سياسة الأذونات التالية، أحصل على صورة عنصر نائب بدلاً من ذلك.

Permissions-Policy: oversized-images *(2);

عندما تكون الصورة كبيرة جدًا بالنسبة إلى الحاوية
عندما تكون الصورة كبيرة جدًا بالنسبة إلى الحاوية.

أحصل على نتائج مماثلة في حال تخفيض العرض أو الارتفاع فقط.

العرض الذي تم تغيير حجمه الارتفاع الذي تم تغيير حجمه
غيِّر حجم العرض والارتفاع.

How to use

باختصار، يمكن تحديد سياسة oversized-images من خلال أيّ من الخيارَين التاليَين:

  • عنوان HTTP Permissions-Policy
  • سمة <iframe> allow

للإبلاغ عن سياسة oversized-images، يجب تقديم ما يلي:

  • اسم العنصر، oversized-images (مطلوب)
  • قائمة بالمصادر (اختيارية)
  • قيم الحدّ الأدنى (أي نسبة التصغير X) للمصادر، المحدّدة في قوس (اختياري)

ننصحك بخفض نسبة العرض إلى الارتفاع تبلغ 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> في أي مكان آخر بشكل طبيعي.

unoptimized-{lossy,lossless}-images

تقيِّد سياسات ميزات unoptimized-lossy-images وunoptimized-lossless-images unoptimized-lossless-images-strict حجمملف الصورة بالنسبة إلى دقتها الأساسية:

unoptimized-lossy-images
يجب ألا تتجاوز التنسيقات المفقودة نسبة البايت لكل بكسل من X، مع حد أقصى ثابت قدره 1 كيلوبايت. بالنسبة إلى الصورة التي تبلغ أبعادها W x H، يتم احتساب الحدّ الأقصى لحجم الملف على النحو التالي: W x H x X + 1024.
unoptimized-lossless-images
يجب ألا تتجاوز التنسيقات الأقل انخفاضاً نسبة البايت لكل بكسل من X، مع حد أقصى ثابت قدره 10 كيلوبايت. بالنسبة إلى الصورة التي تبلغ أبعادها "العرض x الارتفاع"، يتم احتساب الحدّ الأقصى لحجم الملف على النحو التالي: "العرض x الارتفاع x X" + 10240.
unoptimized-lossless-images-strict
يجب ألا تتجاوز تنسيقات "الصور غير المُعدَّلة" نسبة بايت لكل بكسل قدرها X، مع السماح بمساحة تخزين إضافية ثابتة تبلغ 1 كيلوبايت. بالنسبة إلى صورة بتنسيق العرض × الارتفاع، يتم احتساب الحدّ الأقصى لحجم الملف على النحو التالي: العرض × الارتفاع × X + 1024.

عندما يستخدم مستند أيًا من هذه السياسات، سيتم استبدال أي عنصر <img> ينتهك القيود بصورة نائبة.

لماذا؟

كلما زاد حجم التنزيل، استغرق تحميل الصورة وقتًا أطول. يجب إبقاء حجم الملف صغيرًا قدر الإمكان عند تحسين الصورة: إزالة البيانات الوصفية واختيار تنسيق جيد للصورة واستخدام ضغط الصور وما إلى ذلك. اطّلِع على المقالتَين استخدام Imagemin لضغط الصور واستخدام صور WebP للحصول على معلومات عن تحسين صورك.

مثال

يوضح الجدول التالي سلوك المتصفِّح التلقائي. بدون سياسة الأذونات، يمكن عرض صورة غير محسّنة ذات فقدان للبيانات تمامًا مثل الصورة المحسّنة.

مقارنة صورة محسَّنة بصورة غير محسَّنة
مقارنة صورة محسَّنة بصورة غير محسّنة:

في حال تطبيق سياسة الأذونات التالية، ستظهر لي صورة نائبة بدلاً من ذلك.

Permissions-Policy: unoptimized-lossy-images *(0.5);

عندما تكون الصورة غير محسّنة.
عندما تكون الصورة غير محسّنة:

How to use

إذا كنت مستخدمًا جديدًا لسياسة الأذونات، يُرجى الاطّلاع على مقدمة عن سياسة الأذونات للحصول على مزيد من التفاصيل.

باختصار، يمكن تحديد سياسات unoptimized-{lossy,lossless}-images من خلال:

  • عنوان HTTP Permissions-Policy
  • سمة <iframe> allow

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