استخدِم سياسات الصور المحسّنة لضمان استخدام موقعك الإلكتروني للصور الأفضل أداءً.
غالبًا ما تشغل الصور مساحة مرئية كبيرة وتشكّل الغالبية من عدد البايتات التي يتم تنزيلها على موقع إلكتروني. يمكن أن يؤدي تحسين الصور إلى تحسين أداء التحميل وتقليل عدد الزيارات إلى الشبكة.
من المفاجئ أنّ أكثر من نصف المواقع الإلكترونية على الويب تعرض صورًا مضغوطة بشكلٍ سيئ أو كبيرة جدًا بدون داعٍ. ويترك ذلك مجالاً واسعًا لتحسين الأداء من خلال تحسين الصور.
قد تتساءل، كيف أعرف ما إذا كانت صوري محسّنة وكيف يمكنني تحسينها؟
نحن نختبر مجموعة جديدة من سياسات الميزات لتحسين
الصور: oversized-images
وunoptimized-lossy-images
unoptimized-lossless-images
وunoptimized-lossless-images-strict
.
وأصبحت جميعها متاحة الآن لإصدارات الإصدارات العلنية
التجريبية.
سياسات الصور المحسّنة
تُقدّم سياسة الأذونات مجموعة جديدة من القيود على الصور التي يمكن تطبيقها من خلال فرضها في وقت التطوير. سيتم عرض الصور التي تنتهك أيًا من القيود كصور نائبة، ومن السهل التعرّف عليها وإصلاحها. يمكن تحديد هذه السياسات في وضع "الإبلاغ فقط" حيث سيتم عرض الصور بشكل طبيعي بدون فرض قيود عليها أثناء رصد الانتهاكات من خلال التقارير. (اطّلِع على وضع "الإبلاغ فقط" في الإصدار العلني، أدناه لمعرفة التفاصيل).
oversized-images
تفرض سياسة أذونات oversized-images
قيودًا على الأبعاد الأساسية
للصورة بالنسبة إلى حجم الحاوية.
عندما يستخدم المستند سياسة oversized-images
، سيتم استبدال أي عنصر <img>
يكون دقة وحدة الصورة له أكبر من حجم الحاوية بمرات عديدة في أي من السمتَين بصورة نائبة.
لماذا؟
إنّ عرض صور أكبر من حجم الشاشة التي يعرضها الجهاز، على سبيل المثال، عرض صور مخصّصة للكمبيوتر المكتبي على الأجهزة الجوّالة، أو عرض صور ذات كثافة وحدات بكسل عالية على جهاز ذو كثافة وحدات بكسل منخفضة، يتسبّب في إهدار حركة المرور على الشبكة ومساحة التخزين في الجهاز. اطّلِع على المقالتَين عرض الصور بأبعادها الصحيحة وعرض صور متجاوبة للحصول على معلومات عن تحسين صورك.
أمثلة
في ما يلي بعض الأمثلة التي توضّح ذلك. يوضّح ما يلي السلوك التلقائي عند قطع حجم عرض الصورة إلى النصف.
في حال تطبيق سياسة الأذونات التالية، ستظهر لي صورة نائبة بدلاً من ذلك.
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 + 10240.
unoptimized-lossless-images-strict
- يجب ألا تتجاوز تنسيقات "الصور غير المُعدَّلة" نسبة بايت لكل بكسل قدرها X، مع السماح بمساحة تخزين إضافية ثابتة تبلغ 1 كيلوبايت. بالنسبة إلى الصورة التي تبلغ أبعادها W x H، يتم احتساب الحدّ الأقصى لحجم الملف على النحو التالي: W x H x 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
أكثر سهولة وبساطة في الاستخدام، أو ما إذا كان ينبغي
استخدام بدل نفقات عامة مختلف بدلاً من ذلك. سنرسل إليك ملفًا شخصيًا عند قرب انتهاء الفترة التجريبية. يُرجى متابعة أخبارنا باستمرار.